[CLOSED] Line chart- Working with multiple lines

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Line chart- Working with multiple lines

    Hi Ext.Net Team,

    I have following model structure:

    Country: Switzerland
    List<Key,Values> = "Apr,1.1"
    "May 1.2" and so on

    Country: Italy
    List<Key,Values> = "Apr,1.2"
    "May 1.3" and so on

    and this model is for multiple countries.

    How do i organize my model so that i can display multiple lines inside a line chart.

    i.e. what will be "Name" and what will be Data0,Data1 ....

    Please let me know.

    Basically i need a sample code for dynamically loading line charts for multiple countries with above structure
    Last edited by Daniil; Jul 29, 2013 at 4:12 AM. Reason: [CLOSED]
  2. #2
    Probably, you need the following sample
    http://examples2.ext.net/#/Chart/Line/Basic/
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by Vladimir View Post
    Probably, you need the following sample
    http://examples2.ext.net/#/Chart/Line/Basic/
    The sample is showing for static 3 data's.
    I want to know how the model structure should be for dynamic countries as in my case.

    It can 2,3 or 10.

    Also need some help understanding what the "GenerateData()" method returns
     Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
  4. #4
    I think you should create an individual LineSeries for each Country. You can do it in code behind according to the data.

    Quote Originally Posted by PriceRightHTML5team View Post
    Also need some help understanding what the "GenerateData()" method returns
     Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
    Just some dummy data, please see:
    http://svn.ext.net/premium/trunk/Ext...d/ChartData.cs
  5. #5
    Quote Originally Posted by Daniil View Post
    I think you should create an individual LineSeries for each Country. You can do it in code behind according to the data.



    Just some dummy data, please see:
    http://svn.ext.net/premium/trunk/Ext...d/ChartData.cs
    It requires Username Password credentials.
    Can you please just copy the sample code in this forum thread.

    Thanks
  6. #6
    Sure.

    ChartData.cs
    using System;
    using System.Collections.Generic;
    using System.Globalization;
    
    namespace Ext.Net.Examples
    {
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double Data1
            {
                get;
                set;
            }
    
            public double Data2
            {
                get;
                set;
            }
    
            public double Data3
            {
                get;
                set;
            }
    
            public double Data4
            {
                get;
                set;
            }
    
            public double Data5
            {
                get;
                set;
            }
    
            public double Data6
            {
                get;
                set;
            }
    
            public double Data7
            {
                get;
                set;
            }
    
            public double Data8
            {
                get;
                set;
            }
    
            public double Data9
            {
                get;
                set;
            }
    
            public static List<ChartData> GenerateData()
            {
                return ChartData.GenerateData(12, 20);
            }
    
            public static List<ChartData> GenerateData(int n)
            {
                return ChartData.GenerateData(n, 20);
            }
    
            public static List<ChartData> GenerateData(int n, int floor)
            {
                List<ChartData> data = new List<ChartData>(n);
                Random random = new Random();
                double p = (random.NextDouble() * 11) + 1;
    
                for (int i = 0; i < n; i++)
                {
                    data.Add(new ChartData
                    {
                        Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthNames[i % 12],
                        Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data7 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data8 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data9 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
                    });
                }
    
                return data;
            }
    
            public static List<ChartData> GenerateDataNegative()
            {
                return ChartData.GenerateDataNegative(12, 20);
            }
    
            public static List<ChartData> GenerateDataNegative(int n, int floor)
            {
                List<ChartData> data = new List<ChartData>(n);
                Random random = new Random();
                double p = (random.NextDouble() * 11) + 1;
    
                for (int i = 0; i < n; i++)
                {
                    data.Add(new ChartData
                    {
                        Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthNames[i % 12],
                        Data1 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data2 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data3 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data4 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data5 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data6 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data7 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data8 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data9 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor))
                    });
                }
    
                return data;
            }
        }
    }
    Just a note, you should have SVN credentials as a premium member.
  7. #7
    Quote Originally Posted by Daniil View Post
    Sure.

    ChartData.cs
    using System;
    using System.Collections.Generic;
    using System.Globalization;
    
    namespace Ext.Net.Examples
    {
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double Data1
            {
                get;
                set;
            }
    
            public double Data2
            {
                get;
                set;
            }
    
            public double Data3
            {
                get;
                set;
            }
    
            public double Data4
            {
                get;
                set;
            }
    
            public double Data5
            {
                get;
                set;
            }
    
            public double Data6
            {
                get;
                set;
            }
    
            public double Data7
            {
                get;
                set;
            }
    
            public double Data8
            {
                get;
                set;
            }
    
            public double Data9
            {
                get;
                set;
            }
    
            public static List<ChartData> GenerateData()
            {
                return ChartData.GenerateData(12, 20);
            }
    
            public static List<ChartData> GenerateData(int n)
            {
                return ChartData.GenerateData(n, 20);
            }
    
            public static List<ChartData> GenerateData(int n, int floor)
            {
                List<ChartData> data = new List<ChartData>(n);
                Random random = new Random();
                double p = (random.NextDouble() * 11) + 1;
    
                for (int i = 0; i < n; i++)
                {
                    data.Add(new ChartData
                    {
                        Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthNames[i % 12],
                        Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data7 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data8 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                        Data9 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
                    });
                }
    
                return data;
            }
    
            public static List<ChartData> GenerateDataNegative()
            {
                return ChartData.GenerateDataNegative(12, 20);
            }
    
            public static List<ChartData> GenerateDataNegative(int n, int floor)
            {
                List<ChartData> data = new List<ChartData>(n);
                Random random = new Random();
                double p = (random.NextDouble() * 11) + 1;
    
                for (int i = 0; i < n; i++)
                {
                    data.Add(new ChartData
                    {
                        Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthNames[i % 12],
                        Data1 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data2 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data3 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data4 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data5 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data6 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data7 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data8 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor)),
                        Data9 = Math.Floor(Math.Max((random.NextDouble() - 0.5) * 100, floor))
                    });
                }
    
                return data;
            }
        }
    }
    Just a note, you should have SVN credentials as a premium member.
    This is for fixed set of lines that is say 9. We have module that we can add / remove countries from admin modules.
    So how do we configure mode for chart in that case

    Any suggestions?
  8. #8
    Well, this is still actual.

    Quote Originally Posted by Daniil View Post
    I think you should create an individual LineSeries for each Country. You can do it in code behind according to the data.
    I mean that you can create as many LineSeries as you need in code behind in the moment when you know how many LineSeries you should create.
  9. #9
    Quote Originally Posted by Daniil View Post
    Well, this is still actual.



    I mean that you can create as many LineSeries as you need in code behind in the moment when you know how many LineSeries you should create.

    I am having confusion on how to bind my model to the line chart attached is my model:

    Please note that the datatable columns "Apr-13","May-13"... and so on are dynamic .
    also the countries are dynamic.

    Click image for larger version. 

Name:	datatable.PNG 
Views:	17 
Size:	19.3 KB 
ID:	6630

    So can you please let me know what will be the model structure for line chart. and how to bind Xfield and Yfield to create line chart series for this model.

    I can change the structure of my model to match with the line chart . But i need some start on how the structure of the model should actually be

    Thanks
    Last edited by PriceRightHTML5team; Jul 26, 2013 at 4:31 AM.
  10. #10
    As far as I can understood.

    Take a table row. It will be an individual LineSeries. You should set up its Title a country name.

    The columns' names will be XField. It will be same for all the countries. For example,
    <ext:ModelField Name="date" />
    Bind "Apr-13", "May-13", etc. to that ModelField. And you should probably pick up a CategoriesAxis for that ModelField.

    Go ahead.

    The columns' values will YField. It will be different for each country.

    For example, create
    <ext:ModelField Name="country1" />
    for the fist country. Bind the columns' values to that field.

    Then
    <ext:ModelField Name="country2" />
    for the second country.

    Then configure LineSeries for each country. The first one:
    <ext:LineSeries XField="date" YField="country1" />
    The second one:
    <ext:LineSeries XField="date" YField="country2" />
    etc.

    Hope this helps.
Page 1 of 2 12 LastLast

Similar Threads

  1. [OPEN] [#262] Dashed/Dotted chart grid lines
    By livehealthierGF in forum 2.x Premium Help
    Replies: 2
    Last Post: May 31, 2013, 9:24 PM
  2. [CLOSED] Need assistance with line chart
    By jpadgett in forum 2.x Premium Help
    Replies: 5
    Last Post: Feb 23, 2013, 4:03 AM
  3. [CLOSED] Line chart with 500 points and more
    By interlev in forum 2.x Premium Help
    Replies: 1
    Last Post: Jan 21, 2013, 2:58 PM
  4. [CLOSED] Chart Line
    By pdcase in forum 2.x Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  5. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM

Tags for this Thread

Posting Permissions