PDA

View Full Version : [CLOSED] how to create a vertical line originating from x axis , on current date?



Sowjanya
Nov 12, 2013, 9:04 PM
Hi,

I am using a line chart in my application, where I am trying to show a vertical line originating from X axis, on current date (model field is: CURRENT_DATE) on X axis.
( X axis has all dates).

I created the line series - series51 for this to be accomplished...but in vain.....

This is wierd coz....I had done the same in the series11, the only difference is, the constant value relying on Y axis. ( MAX_LINE)

for your reference, I have attached a screenshot , where it shows the horizontal line ( green color) that i achieved using MAX_LINE ( lineseries ID - series11)....I would like to accomplish the same, but vertically.

pls let me know a solution soon. Thanks !

Here is my code:
-------------------




<ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="850" Animate="true" Theme="ChartTheme"
Height="500" InsetPadding="30" >


<Loader ID="Loader1" runat="server">

<LoadMask ShowMask="true" ></LoadMask>
</Loader>

<Store>
<ext:Store ID="MonthlyChartStore" runat="server" AutoLoad="false" >
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#MChartURL%>' AutoDataBind="true" >
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
<%-- <ExtraParams>

<ext:StoreParameter Name="InstanceID" Value="-1"/>
<ext:StoreParameter Name="ISMONTH" Value="month"/>
<ext:StoreParameter Name="GrowthValue" Value="0"/>
<ext:StoreParameter Name="MonthsBack" Value="3" />

</ExtraParams>--%>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="MChartStoreModel" runat="server">
<Fields>

<ext:ModelField Name="PROJECTED_DATE" Type="Date">
<Convert Handler="return Ext.util.Format.date(value, 'M d Y');" />
</ext:ModelField>
<%-- <ext:ModelField Name="PROJECTED_DATE" Type="String">

</ext:ModelField>--%>

<ext:ModelField Name="CURRENT_DATE" Type="Date">
<Convert Handler="return Ext.util.Format.date(value, 'M d Y');" />
</ext:ModelField>
<%--<ext:ModelField Name="CURRENT_DATE" Type="String">

</ext:ModelField>
--%>



<ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" >


</ext:ModelField>
<ext:ModelField Name="MAX_LINE" Type="Float" />
<ext:ModelField Name="PERCENT_GROWTH" Type="Float" />
<ext:ModelField Name="PROJECTED_TREND" Type="Float" />
<ext:ModelField Name="PERC_GROWTH_TREND" Type="Float" />
<ext:ModelField Name="EST_70_DATE" Type="String" />
<ext:ModelField Name="EST_MAX_DATE" Type="String" />



</Fields>
</ext:Model>
</Model>

<DirectEvents>
<Load OnEvent="MonChartStoreLoad" After="Ext.getCmp('MonthlyChart').refresh();">


<ExtraParams>
<ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
<ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnl y:true}))"
Mode="Raw" />
</ExtraParams>
</Load>

</DirectEvents>

<%-- <Listeners>
<Load Fn="AfterLoad('MONTH')" />
</Listeners>--%>
<%-- <Listeners>

<Load Handler="if(data.records.length > 0) { App.direct.getCurrentMonthValue('MONTH', data.records[0].get('PROJECTED_USAGE_MONTH'));}" />
</Listeners>--%>

</ext:Store>
</Store>


<Axes>
<ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage(Mon)" AxisID="Axis1" MajorTickSteps="30">

</ext:NumericAxis>



<ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Months Out(date)" />


</Axes>
<Series>



<ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_MONTH" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="1" Radius="1" StrokeWidth="0" />
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));"></Renderer>
</Tips>
</ext:LineSeries>


<ext:LineSeries SeriesID="Series11" Axis="Left" XField="PROJECTED_DATE" YField="MAX_LINE" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="1" Radius="1" StrokeWidth="0" />
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="75" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('MAX_LINE'));"></Renderer>
</Tips>
</ext:LineSeries>


<ext:LineSeries SeriesID="Series51" Axis="Bottom" XField="CURRENT_DATE" YField="PROJECTED_USAGE_MONTH" Smooth="3">

<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="1" Radius="1" StrokeWidth="0" />
<Tips ID="Tips3" runat="server" TrackMouse="true" Width="75" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('CURRENT_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));"></Renderer>
</Tips>
</ext:LineSeries>





</Series>

<Plugins>
<ext:VerticalMarker ID="VerticalMarker2" runat="server">
<XLabelRenderer Handler="return value;" />
</ext:VerticalMarker>
</Plugins>


<Listeners>
<BeforeRender Handler= "#{window1}.mask('Loading...'); " />


</Listeners>

<%-- <Listeners>

<Render
Handler="Ext.getCmp('window1').mask();"/>
<AfterRender
Handler="Ext.getCmp('window1').unmask();" Delay="1"/>


</Listeners>--%>


<%-- <Listeners>

<Refresh Handler="this.redraw();" />
</Listeners>--%>
</ext:Chart>

Baidaly
Nov 13, 2013, 4:05 AM
Hello!

Unfortunately, there is no such functionality for charts, but you can try to do it using AfterRender. Look at the sample below:


<ext:LineSeries
Titles="Green Line"
XField="Date"
YField="Data2"
Axis="Right"
Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
<Listeners>
<AfterRender Handler="var c = this.chart,
yAxis = c.axes.items[0],
xAxis = c.axes.items[1];
x = xAxis.x + Math.floor(xAxis.length * 2 / xAxis.to) + 1;
c.surface.add({
'type': 'path',
'stroke': '#f00',
'stroke-width': 1,
'path': [
'M' + x + ' ' + yAxis.y,
'V' + (yAxis.y - yAxis.length + 2) + ' Z'
].join(' ')
}).show(true);
return this.callParent(arguments);" />
</Listeners>
</ext:LineSeries>

elisa
Nov 13, 2013, 4:55 PM
Hi,

Sowjanya and I work on the same team so I'm going to continue the thread as I'm working on this code now.

If I understand correctly the value we would change in your example would be the "2" in


Math.floor(xAxis.length * 2 / xAxis.to)


But how does this work if our X axis values are dates? Like we are trying to show the vertical line at today's date, "Nov 13 2013".

elisa
Nov 13, 2013, 9:09 PM
Figured it out. In case it's helpful to anyone:



var c = this.chart,
yAxis = c.axes.items[0],
xAxis = c.axes.items[1],
dt = new Date(),
xID = -1;

while (xID == -1) {
xID = c.store.find("PROJECTED_DATE", Ext.util.Format.date(dt, 'M d Y'));
dt.setDate(dt.getDate() - 1);
}

xID += 1;
var x = xAxis.x + Math.floor(xAxis.length * xID / xAxis.to);

c.surface.add({
type: 'path',
stroke: 'red',
'stroke-width': 1,
path: [
'M' + x + ' ' + yAxis.y,
'V' + (yAxis.y - yAxis.length + 2) + ' Z'
].join(' ')
}).show(true);

Baidaly
Nov 13, 2013, 9:50 PM
Thank you for sharing your solution!

tylert
Oct 23, 2014, 9:18 PM
Thanks for posting these solutions. I also needed to show a vertical line for the current date. I wasn't sure how to use the example with PROJECTED_DATE, but here is what worked for me.

Here is my handler for AfterRender for the first series in my chart -- posting in case this it helps anyone else.



var c = this.chart,
yAxis = c.axes.items[0],
xAxis = c.axes.items[1];
x = xAxis.x + xAxis.length / (xAxis.to - xAxis.from) * (Date.now() - xAxis.from);

c.surface.add({
'type': 'path',
'stroke': '#f00',
'stroke-width': 1,
'path': [
'M' + x + ' ' + yAxis.y,
'V' + (yAxis.y - yAxis.length + 2) + ' Z'
].join(' ')
}).show(true);