EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 10 of 10

Thread: [CLOSED] Multiple Column Chart for a single country

  1. #1
    Premium Member
    Join Date
    Jun 2013
    Posts
    527

    [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 6:22 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,786
    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
    Code:
    <%@ 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>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Premium Member
    Join Date
    Jun 2013
    Posts
    527
    It doesn't seem to work below is my MVC Code:

    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 8:19 AM.

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,786
    Please look at this example. It is closer to your requirement.

    Example
    Code:
    <%@ 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>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Premium Member
    Join Date
    Jun 2013
    Posts
    527
    Nope not working below is my code change

    Code:
    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
    Premium Member
    Join Date
    Jun 2013
    Posts
    527
    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 9:59 AM.

  7. #7
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,786
    Stylizing a series should be possible using a ColumnSeries's Renderer.

    Customizing a ToolTip should be possible with its Renderer.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  8. #8
    Premium Member
    Join Date
    Jun 2013
    Posts
    527
    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:

    Code:
     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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,786
    By checking up item.yField.
    Code:
    <Tips>
        <Renderer Handler="this.update(item.yField);" />
    </Tips>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  10. #10
    Premium Member
    Join Date
    Jun 2013
    Posts
    527
    Quote Originally Posted by Daniil View Post
    By checking up item.yField.
    Code:
    <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, 6:13 AM
  2. [CLOSED] [#18] Chart: Single Column Series yField incorrect
    By cwolcott in forum 2.x Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 12:15 PM
  3. Multiple vType on a Single Control
    By huzzy143 in forum 1.x Help
    Replies: 2
    Last Post: Sep 09, 2011, 4:39 PM
  4. [CLOSED] [1.0]multiple validators on a single textfield
    By betamax in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 07, 2011, 8:32 PM
  5. Multiple ext controls in single anchor (or workaround)
    By dlouwers in forum 1.x Premium Help
    Replies: 4
    Last Post: Dec 04, 2008, 1:53 PM

Tags for this Thread

Posting Permissions