PDA

View Full Version : [CLOSED] Chart - set axes min and max values dynamically and redraw chart



Sowjanya
Nov 07, 2013, 3:41 PM
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 ?




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({selectedOnl y: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>

Baidaly
Nov 07, 2013, 9:14 PM
Hello!

By default, Chart identifies minimum and maximum values on data load, so it's not necessary to set them explicitly. However, you can change them on server and client sides.


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">

protected void ButtonClick(object sender, DirectEventArgs e)
{
((NumericAxis)Chart1.Axes[0]).SetMinimum(0);
((NumericAxis)Chart1.Axes[0]).SetMaximum(100);

Chart1.Redraw();
}

public List<object> GenerateData()
{

List<object> lst = new List<object>
{
new
{
Name = "January",
Count = 10
},
new
{
Name = "February",
Count = 50
},
new
{
Name = "March",
Count = 40
},
new
{

Name = "April",
Count = 25
},
new
{

Name = "May",
Count = 35
}
};

return lst;

}


</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel
runat="server"
Title="Line Chart"
Width="800"
Height="600"
Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
Text="Set Minimum"
Handler="#{Chart1}.axes.getAt(0).minimum = 10;
#{Chart1}.redraw();" />

<ext:Button
Text="Set Maximum"
Handler="#{Chart1}.axes.getAt(0).maximum = 100;
#{Chart1}.redraw();" />

<ext:Button
Text="Set Minimum and Maximum (Server)" >
<DirectEvents>
<Click OnEvent="ButtonClick" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;"
Shadow="true"
StandardTheme="Category1"
Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store
runat="server"
Data="<%# GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Count" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="Count"
Title="Number of Hits"
MinorTickSteps="1"
Minimum="0">
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year"
/>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Name" YField="Count">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>