[CLOSED] Chart - set axes min and max values dynamically and redraw chart

[Sowjanya]

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({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>

[Baidaly]

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>