What's New?

[CLOSED] Set chart axes min and mix value from code behind

  1. #1
    Mar 08, 2013, 7:29 PM

    [CLOSED] Set chart axes min and mix value from code behind

    Hello,

    I defined a chart with the following markup. It works fine. How can I set ext:GauseAxis 'Minimum' and 'Maximum' values from code behind?

                                                <ext:Chart ID="MyChart" runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" StoreID="MyStore">
                                                <AnimateConfig Easing="ElasticIn" Duration="1000" />
                                                <Axes>
                                                    <ext:GaugeAxis Minimum="0" Maximum="100" Steps="10" Margin="-10" />
                                                </Axes>
                                                <Series>
                                                    <ext:GaugeSeries AngleField="Data1" Donut="0" ColorSet="#F49D10,#ddd" />
                                                </Series>
                                            </ext:Chart>
    I came to the point below (;

    MyChart.Axes.ElementAt(0) ... ?
    Thanks.
    Last edited by Daniil; Mar 14, 2013 at 9:49 AM. Reason: [CLOSED]
  2. #2
    Mar 08, 2013, 11:54 PM
    Hello!

    I'm not sure that I've understood you correctly. However, to set Maximum and Minimum you can the following approach:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    public List<object> Values = new List<object>
            {
                new
                    {
                        Name = "1",
                        Data1 = 30
                    }
            };
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server"  />
    <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
        <Items>
            <ext:Chart ID="Chart2" runat="server" Animate="true" StyleSpec="background:#fff;"
                InsetPadding="50">
                <Store>
                    <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Data1" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:GaugeAxis Minimum="10" Maximum="50" Steps="4"  Title="Title">
                    </ext:GaugeAxis>
                </Axes>
                <Series>
                    <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                    </ext:GaugeSeries>
                </Series>
            </ext:Chart>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Mar 09, 2013, 12:35 AM
    Hello,

    Yes I am aware that I can set them like you wrote (already set in my example code). The problem is that minimum and maximum values are not static and I need to set them in code behind (C#) depending on the data set being used.

    Let's say below is the defualt min and max values. I need to change min and max values in page load if necessary.

                        <ext:GaugeAxis Minimum="10" Maximum="50" Steps="4"  Title="Title">
                    </ext:GaugeAxis>
    Quote Originally Posted by Baidaly View Post
    Hello!

    I'm not sure that I've understood you correctly. However, to set Maximum and Minimum you can the following approach:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    public List<object> Values = new List<object>
            {
                new
                    {
                        Name = "1",
                        Data1 = 30
                    }
            };
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server"  />
    <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
        <Items>
            <ext:Chart ID="Chart2" runat="server" Animate="true" StyleSpec="background:#fff;"
                InsetPadding="50">
                <Store>
                    <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Data1" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:GaugeAxis Minimum="10" Maximum="50" Steps="4"  Title="Title">
                    </ext:GaugeAxis>
                </Axes>
                <Series>
                    <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                    </ext:GaugeSeries>
                </Series>
            </ext:Chart>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  4. #4
    Mar 09, 2013, 2:41 AM
    Sorry, don't quite understand you. But I think you need something like this:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        (Chart2.Axes[0] as GaugeAxis).Minimum = 10;
        (Chart2.Axes[0] as GaugeAxis).Maximum = 50;
    }

    public List<object> Values = new List<object>
    {
        new
            {
                Name = "1",
                Data1 = 30
            }
    };
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
        <Items>
            <ext:Chart ID="Chart2" runat="server" Animate="true" StyleSpec="background:#fff;"
                InsetPadding="50">
                <Store>
                    <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Data1" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:GaugeAxis Minimum="0" Maximum="100" Steps="4" Title="Title">
                    </ext:GaugeAxis>
                </Axes>
                <Series>
                    <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                    </ext:GaugeSeries>
                </Series>
            </ext:Chart>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
    Last edited by Baidaly; Mar 10, 2013 at 10:23 PM.
  5. #5
    Mar 09, 2013, 3:01 PM
    It is clear that you did not understand me (;
    The example you provided has nothing to do with setting "Chart Axis" minimum and maximum values before page load. Did I miss a line of code in your example?

    Anyway, I found a solution like this:

    Chart markup:
    <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" StoreID="MyStore" >
    <AnimateConfig Easing="ElasticIn" Duration="1000"  />
    <Axes>
        <ext:GaugeAxis AxisID="MyAxis" Steps="10" Margin="-10" Title="My Value">
            <CustomConfig>
                <ext:ConfigItem Name="minimum" Value="0" Mode="Raw"></ext:ConfigItem>
                <ext:ConfigItem Name="maximum" Value="100" Mode="Raw"></ext:ConfigItem>                                                            
            </CustomConfig>
        </ext:GaugeAxis>
    </Axes>
    <Series>
        <ext:GaugeSeries AngleField="Data1" Donut="0" ColorSet="#F49D10,#eee">
        </ext:GaugeSeries>
    </Series>                                                
</ext:Chart>
    Adding sript during page load to re-set minimum and maximum values for axis based on a specific condition:

                MyChart.AddScript("App.MyChart.axes.items[0].minimum=" + MinFromDB+ ";");
            MyChart.AddScript("App.MyChart.axes.items[0].maximum=" + MaxFromDB+ ";");
    I had asked if it is possible to replace below code with pure C# by accessing MyChart object. Is it clear now?

    Thanks.
  6. #6
    Mar 10, 2013, 10:23 PM
    Sorry, my bad. I fixed it. Please, take a look: http://forums.ext.net/showthread.php...l=1#post104320

Similar Threads

  1. [CLOSED] How to Export SVG chart from code behind
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  2. [CLOSED] CategoryAxis for both X and Y axes in a chart
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 23, 2013, 9:05 PM
  3. Pie Chart from Code Behind
    By devgaipp in forum 2.x Help
    Replies: 0
    Last Post: Sep 18, 2012, 12:29 PM
  4. Chart: Is it a bug? configuring CHART from code behind
    By tanky65 in forum 2.x Help
    Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. CHART: building and switching different Stores in code behind
    By tanky65 in forum 2.x Help
    Replies: 0
    Last Post: May 30, 2012, 8:44 PM

Posting Permissions