[CLOSED] Multiple Column Chart for a single country

  1. #1

    [CLOSED] Multiple Column Chart for a single country

    Hi Ext.Net Team,

    We have a scenario where we need to display 3 values for one country i.e Mean ,Max and Min Values as shown below:

    Click image for larger version. 

Name:	MulColChart.PNG 
Views:	26 
Size:	23.6 KB 
ID:	6714

    How can i achieve that with ext.net column chart. I want to know which series or axis i have to loop through

    Thanks
    Last edited by Baidaly; Aug 09, 2013 at 5:22 PM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    I don't see a way to group the columns as you need, i.e. remove the gaps between the columns of the country. However, this looks close to your requirement.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Chart1.GetStore();
    
                store.Data = new object[]
                {
                    new
                    {
                        Name = "Country 1",
                        Min = 10
                    },
                    
                    new
                    {
                        Name = "Country 1",
                        Mean = 20
                    },
                    
                    new
                    {
                        Name = "Country 1",
                        Max = 30  
                    },
                    
                    new
                    {
                        Name = "Country 2",
                        Min = 20
                    },
                    
                    new
                    {
                        Name = "Country 2",
                        Mean = 35
                    },
                    
                    new
                    {
                        Name = "Country 2",
                        Max = 50   
                    }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel
                runat="server"
                Title="Column Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <Items>
                    <ext:Chart ID="Chart1" runat="server">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Min" />
                                            <ext:ModelField Name="Mean" />
                                            <ext:ModelField Name="Max" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <Axes>
                            <ext:NumericAxis
                                Fields="Min,Mean,Max"
                                Title="Count"
                                Minimum="0" />
    
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Name"
                                Title="Country" />
                        </Axes>
                        <Series>
                            <ext:ColumnSeries
                                Axis="Left"
                                XField="Name"
                                YField="Min" />
    
                            <ext:ColumnSeries
                                Axis="Left"
                                XField="Name"
                                YField="Mean" />
    
                            <ext:ColumnSeries
                                Axis="Left"
                                XField="Name"
                                YField="Max" />
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3
    It doesn't seem to work below is my MVC Code:

    Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "SnapShotChart",
                Animate = true,
                Height = 300,
                Shadow = true,
            };
    
     var store = CreateStore(isMonteCarlo);
            store.DataSource = result;
            chtGrafico.Store.Add(store);
    
    if (isMonteCarlo)
            {
                NumericAxis numericAxis = new NumericAxis()
                {
                    Fields = new[] { "MeanEstimatedPrice", "MaxEstimatedPrice", "MinEstimatedPrice" },
                    Grid = true,
                    Title = "Price per UOM",
                    Minimum = 0.00,
                    Label = l
                };
                chtGrafico.Axes.Add(numericAxis);
            }
    
    
    //Creating ColumnSeries
    if (isMonteCarlo)
            {
                absSeries.Add(
                            Html.X().ColumnSeries()
                                    .Axis(Position.Left)
                                    .XField("CountryName")
                                    .YField("MeanEstimatedPrice")
                                    .Highlight(true)
                                    .Tips(Html.X().ChartTip()
                                        .TrackMouse(true)
                                        .Width(380)
                                        .Height(28)
                                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('CountryName')+',Price:'+ storeItem.get('PACK_CURRENCY_DESC') + ' ' + storeItem.get('MeanEstimatedPrice'));")
                                    )
                                    .Label(new SeriesLabel()
                                    {
                                        Display = SeriesLabelDisplay.None,
                                        Field = new[] { "MeanEstimatedPrice" },
                                        Orientation = Orientation.Horizontal,
                                        Color = "#333E",
                                        TextAnchor = "middle"
    
                                    })
                                    .Renderer(r => r.Handler = @"
                                    var c= new Array();
                                    var colorsArr =['green'] ;                                 
                                        attributes.fill = colorsArr[index % colorsArr.length]; 
                                        return attributes;")
                            );
                //Max
                absSeries.Add(
                            Html.X().ColumnSeries()
                                    .Axis(Position.Left)
                                    .XField("CountryName")
                                    .YField("MaxEstimatedPrice")
                                    .Highlight(true)
                                    .Tips(Html.X().ChartTip()
                                        .TrackMouse(true)
                                        .Width(380)
                                        .Height(28)
                                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('CountryName')+',Price:'+ storeItem.get('PACK_CURRENCY_DESC') + ' ' + storeItem.get('MaxEstimatedPrice'));")
                                    )
                                    .Label(new SeriesLabel()
                                    {
                                        Display = SeriesLabelDisplay.None,
                                        Field = new[] { "MaxEstimatedPrice" },
                                        Orientation = Orientation.Horizontal,
                                        Color = "#333E",
                                        TextAnchor = "middle"
    
                                    })
                                    .Renderer(r => r.Handler = @"
                                    var c= new Array();
                                    var colorsArr =['blue'] ;                                 
                                        attributes.fill = colorsArr[index % colorsArr.length]; 
                                        return attributes;")
                            );
                
                //Min
                absSeries.Add(
                            Html.X().ColumnSeries()
                                    .Axis(Position.Left)
                                    .XField("CountryName")
                                    .YField("MinEstimatedPrice")
                                    .Highlight(true)
                                    .Tips(Html.X().ChartTip()
                                        .TrackMouse(true)
                                        .Width(380)
                                        .Height(28)
                                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('CountryName')+',Price:'+ storeItem.get('PACK_CURRENCY_DESC') + ' ' + storeItem.get('MinEstimatedPrice'));")
                                    )
                                    .Label(new SeriesLabel()
                                    {
                                        Display = SeriesLabelDisplay.None,
                                        Field = new[] { "MinEstimatedPrice" },
                                        Orientation = Orientation.Horizontal,
                                        Color = "#333E",
                                        TextAnchor = "middle"
    
                                    })
                                    .Renderer(r => r.Handler = @"
                                    var c= new Array();
                                    var colorsArr =['red'] ;                                 
                                        attributes.fill = colorsArr[index % colorsArr.length]; 
                                        return attributes;")
                            );
                 
            }
    I only get the column for Mean i.e. green color as attached:

    Click image for larger version. 

Name:	MulColChart1.PNG 
Views:	14 
Size:	9.0 KB 
ID:	6716

    Note: In my case right now the values for "Mean,Max and Min" are same to 111.
    I think the 3 bars are overlapping.
    But that might not be the case for every scenario
    Last edited by PriceRightHTML5team; Aug 07, 2013 at 7:19 AM.
  4. #4
    Please look at this example. It is closer to your requirement.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Chart1.GetStore();
     
                store.Data = new object[]
                {
                    new
                    {
                        Name = "Country 1",
                        Min = 10,
                        Mean = 20,
                        Max = 30
                    },
                     
                     new
                    {
                        Name = "Country 2",
                        Min = 50,
                        Mean = 75,
                        Max = 100
                    },
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
     
            <ext:Panel
                runat="server"
                Title="Column Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <Items>
                    <ext:Chart ID="Chart1" runat="server">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Min" />
                                            <ext:ModelField Name="Mean" />
                                            <ext:ModelField Name="Max" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
     
                        <Axes>
                            <ext:NumericAxis
                                Fields="Min,Mean,Max"
                                Title="Count"
                                Minimum="0" />
     
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Name"
                                Title="Country" />
                        </Axes>
                        <Series>
                            <ext:ColumnSeries
                                Axis="Left"
                                XField="Name"
                                YField="Min, Mean, Max" />
    
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  5. #5
    Nope not working below is my code change

    absSeries.Add(
                            Html.X().ColumnSeries()
                    //.XPadding(400)
                    //.Style(new SpriteAttributes(){st
                                    .Axis(Position.Left)
                                    .XField("CountryName")
                                    .YField("MeanEstimatedPrice,MaxEstimatedPrice,MinEstimatedPrice")
                                    .Highlight(true)
                                    //.Style(new SpriteAttributes() { Width = 30 })
                                    .Tips(Html.X().ChartTip()
                                        .TrackMouse(true)
                                        .Width(380)
                                        .Height(28)
                                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('CountryName')+',Price:'+ storeItem.get('PACK_CURRENCY_DESC') + ' ' + storeItem.get('MeanEstimatedPrice'));")
                                    )
                                    
                            );
    
    return absSeries();
  6. #6
    Sorry its working.

    How can i add different colors for "Mean","Max" and Min.

    Also how to configure the tooltip to show Mean text for "Mean value" and so on
    Last edited by PriceRightHTML5team; Aug 07, 2013 at 8:59 AM.
  7. #7
    Stylizing a series should be possible using a ColumnSeries's Renderer.

    Customizing a ToolTip should be possible with its Renderer.
  8. #8
    Quote Originally Posted by Daniil View Post
    Stylizing a series should be possible using a ColumnSeries's Renderer.

    Customizing a ToolTip should be possible with its Renderer.

    Ok. but since we adding YField as:

     YField="Min, Mean, Max" />
    How can do i add the tooltip. I need to display for Mean Column as "Mean Price
    for Max Column as "Max Price"

    since we are binding all the three together how do we identify the columns
  9. #9
    By checking up item.yField.
    <Tips>
        <Renderer Handler="this.update(item.yField);" />
    </Tips>
  10. #10
    Quote Originally Posted by Daniil View Post
    By checking up item.yField.
    <Tips>
        <Renderer Handler="this.update(item.yField);" />
    </Tips>
    Thanks Danill it worked

Similar Threads

  1. Multiple Task Managers in a single page
    By GKG4 in forum 2.x Help
    Replies: 1
    Last Post: May 27, 2013, 5:13 AM
  2. [CLOSED] [#18] Chart: Single Column Series yField incorrect
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 11:15 AM
  3. Multiple vType on a Single Control
    By huzzy143 in forum 1.x Help
    Replies: 2
    Last Post: Sep 09, 2011, 3:39 PM
  4. [CLOSED] [1.0]multiple validators on a single textfield
    By betamax in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 07, 2011, 7:32 PM
  5. Multiple ext controls in single anchor (or workaround)
    By dlouwers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 04, 2008, 12:53 PM

Tags for this Thread

Posting Permissions