Nov 07, 2013, 2:41 PM
[CLOSED] Chart - set axes min and max values dynamically and redraw chart
hi,
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 ?
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 ?
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 12, 2013 at 9:19 AM.
Reason: [CLOSED]