Nov 07, 2013, 4:53 AM
[OPEN] [#372] line chart with multiple axes and multiple line series....
Hi,
I have following questions regarding Line Chart:
1) I want to create a line chart where the y-axis has both positive and negative values and I would like to display positive values above x-axis and negative values below x-axis ( X axis is on 0 ).
How do I accomplish this?
So far, i have not seen any chart in examples with any negative values below X axis.
Pls let me know.
2) In another chart Application, I have X axis as Months and Y axis as some numbers that I retrieve from Database....the values in Y axis also have nulls in between the numbers like e.g, 1,3,null,null,6,8,null etc....
currently, the chart is behaving in such a way that nulls are considered as 0s in line series......hence the line series connects like this-
1,3,0,0,6,8,0...etc....
but, I want to connect only non-null numbers in the series....Let me know how i can accomplish that....
3) In a chart, if i dont declare minimum and maximum values for the Y-axis ( any axis for that matter...)
, does it take the minimum value and maximum value of the y axis data that is bound from the Database ???
If not, how can i set minimum and maximum values dynamically in c# ? also let me know how i can do that in Javascript ? Also, if i set those values again ,
do i need to recreate / redraw the chart ? also let me know what else I should do once i set min and max values dynamically ?
fyi, I am using ajax proxy to bind data to axes in the chart...so, once it is bound to the chart store, how can i take the minimum and maximum values ?
4) I am using a vertical marker plugin for the chart...
but the vertical marker is not appearing on screen. screenshot attached...how can i resolve this ?
5) Initially, I am binding empty data to chart store....but in an application event ( slider movement..) I have a direct method where i reload chart store based on this slider value...
pls let me know how I can get the X axis and Y axis values in code behind after reloading store ?
Actually, I am usng store load direct event....so I am able to get the chart data as json...but still wondering if there is any other way that avods lot of postbacks to server (that makes app really slow...) ????????
aspx code for graph :
----------------------
I have following questions regarding Line Chart:
1) I want to create a line chart where the y-axis has both positive and negative values and I would like to display positive values above x-axis and negative values below x-axis ( X axis is on 0 ).
How do I accomplish this?
So far, i have not seen any chart in examples with any negative values below X axis.
Pls let me know.
2) In another chart Application, I have X axis as Months and Y axis as some numbers that I retrieve from Database....the values in Y axis also have nulls in between the numbers like e.g, 1,3,null,null,6,8,null etc....
currently, the chart is behaving in such a way that nulls are considered as 0s in line series......hence the line series connects like this-
1,3,0,0,6,8,0...etc....
but, I want to connect only non-null numbers in the series....Let me know how i can accomplish that....
3) In a chart, if i dont declare minimum and maximum values for the Y-axis ( any axis for that matter...)
, does it take the minimum value and maximum value of the y axis data that is bound from the Database ???
If not, how can i set minimum and maximum values dynamically in c# ? also let me know how i can do that in Javascript ? Also, if i set those values again ,
do i need to recreate / redraw the chart ? also let me know what else I should do once i set min and max values dynamically ?
fyi, I am using ajax proxy to bind data to axes in the chart...so, once it is bound to the chart store, how can i take the minimum and maximum values ?
4) I am using a vertical marker plugin for the chart...
<Plugins>
<ext:VerticalMarker ID="VerticalMarker2" runat="server">
<XLabelRenderer Handler="return value;" />
</ext:VerticalMarker>
</Plugins>
but the vertical marker is not appearing on screen. screenshot attached...how can i resolve this ?
5) Initially, I am binding empty data to chart store....but in an application event ( slider movement..) I have a direct method where i reload chart store based on this slider value...
pls let me know how I can get the X axis and Y axis values in code behind after reloading store ?
Actually, I am usng store load direct event....so I am able to get the chart data as json...but still wondering if there is any other way that avods lot of postbacks to server (that makes app really slow...) ????????
aspx code for graph :
----------------------
<ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="900" Animate="true" Theme="ChartTheme"
Height="300" InsetPadding="30" >
<LegendConfig Position="Bottom" />
<Loader ID="Loader1" runat="server">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
<Store>
<ext:Store ID="MonthlyChartStore" runat="server" AutoLoad="true">
<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="0" />
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="MChartStoreModel" runat="server">
<Fields>
<ext:ModelField Name="PROJECTED_DATE" Type="String">
<%-- <Convert Fn="TrimText" />--%>
</ext:ModelField>
<ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" >
<%-- <Convert Fn="percentageConvert" />--%>
</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" />
</Fields>
</ext:Model>
</Model>
<DirectEvents>
<Load OnEvent="MonChartStoreLoad">
<ExtraParams>
<ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
<ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</Load>
</DirectEvents>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage(Mon)" AxisID="Axis1" MajorTickSteps="5">
<%-- <GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>--%>
</ext:NumericAxis>
<ext:NumericAxis
Title="Percent Growth"
Fields="PERCENT_GROWTH" MajorTickSteps="5"
Position="Right"
>
<LabelTitle Fill="#94ae0a" />
<Label Fill="#94ae0a" />
</ext:NumericAxis>
<ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Months Out(date)" />
<%-- <ext:TimeAxis Fields="PROJECTED_DATE" Position="Bottom" Title="12 Months Out(date)" DateFormat="MMM dd"
Constrain="false" />
--%>
</Axes>
<Series>
<ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_MONTH">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="3" Radius="3" 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="3" Radius="3" 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="Series21" Axis="Right" XField="PROJECTED_DATE" YField="PERCENT_GROWTH" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
<Tips ID="Tips3" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PERCENT_GROWTH'));"></Renderer>
</Tips>
</ext:LineSeries>
<ext:LineSeries SeriesID="Series31" Axis="Right" XField="PROJECTED_DATE" YField="PERC_GROWTH_TREND" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
<Tips ID="Tips4" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PERC_GROWTH_TREND'));"></Renderer>
</Tips>
</ext:LineSeries>
<ext:LineSeries SeriesID="Series41" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_TREND" Smooth="3">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="3" Radius="3" StrokeWidth="0" />
<Tips ID="Tips5" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_TREND'));"></Renderer>
</Tips>
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker ID="VerticalMarker2" runat="server">
<XLabelRenderer Handler="return value;" />
</ext:VerticalMarker>
</Plugins>
</ext:Chart>
Last edited by Daniil; Nov 07, 2013 at 1:04 PM.
Reason: [OPEN] [#372]