[CLOSED] Missing Months on Line Chart

  1. #1

    [CLOSED] Missing Months on Line Chart

    Hello Ext Team,

    Below is my code:

    //Model

    public class TestClass
        {
            public string ScenarioName { get; set; }
            public string Country { get; set; }
            public string Date { get; set; }
            public double Value { get; set; }
            public string Name { get; set; }
    
            public static ExpandoObject[] GetRecords()
            {
                List<GrpColumns> list = new List<GrpColumns>();
                
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Aug-2013", Value = null });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Sept-2013", Value = null });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "1", Country = "Albania", Name = "Oct-2013", Value = 5.5 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Nov-2013", Value = 1.1 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Aug-2013", Value = 5.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Sept-2013", Value = 6.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Oct-2013", Value = 7.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Nov-2013", Value = 7.5 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Aug-2013", Value = 8.1 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Sept-2013", Value = 6.2 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Oct-2013", Value = 5.3 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Nov-2013", Value = 4.4 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Aug-2013", Value = 9.7 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Sept-2013", Value = 2.8 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Oct-2013", Value = 5.9 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "1", Country = "India", Name = "Nov-2013", Value = 2.6 });
    
                var data = list.GroupBy(d => d.Name);
                var dataList = new List<ExpandoObject>();
                foreach (var item in data)
                {
                    var exp = new ExpandoObject();
                    (exp as IDictionary<String, Object>).Add("Name", item.Key);
                    foreach (var val in item)
                    {
                        (exp as IDictionary<String, Object>).Add(val.Country, val.Value);
                    }
                    (exp as IDictionary<String, Object>).Add("Data", item);
                    dataList.Add(exp);
                }
    
                return dataList.ToArray();
            }
    
        }
    //Controller
    public ActionResult Index()
            {
                //var chartDataList = getMockChartData();
                return View();
            }
    //View

    @functions{
        private Store CreateStore(List<string> listName)
        {
            Store store = new Store();
            store.ID = "MultiPT";
            var model = new Model();
            model.Fields.Add(new ModelField("Name", ModelFieldType.String));
            
            listName.ForEach(column =>
            {
                model.Fields.Add(new ModelField(column, ModelFieldType.Float)
                {
                    Convert =
                    {
                        Handler = @" 
                        if (typeof value === 'number') {
                            return value;
                        }
    
                        return value !== undefined && value !== null && value !== '' ?
                            parseFloat(String(value).replace(Ext.data.Types.stripRe, ''), 10) : false;"
                    }
                });
            });
            store.Model.Add(model);
            store.DataBound += store_DataBound;
    
            return store;
        }
    
        void store_DataBound(object sender, EventArgs e)
        {
            (sender as Store).Reader.Clear();
        }
    
        private SeriesCollection CreateChartSeries1(List<string> cdata)
        {
            SeriesCollection absSeries = new SeriesCollection();
            absSeries = new SeriesCollection();
            string toolTip = "";
            foreach (var row in cdata)
            {
                var spriteType = SpriteType.Diamond;
                if(row=="Albania" || row=="France")
                    spriteType = SpriteType.Cross;
                absSeries.Add(
                            Html.X().LineSeries()
                                    .Axis(Position.Left)
                                    .XField("Name")
                                    .YField(row)
                                    .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                    .MarkerConfig(new SpriteAttributes { Type = spriteType, Size = 5, Radius = 5, StrokeWidth = 0 })
                                    
    
                            );
    
    
            }
    
            return absSeries;
    
        }//end of create chart series
    
        private void Initchart(Container pnlGrafico)
        {
            var result = TestClass.GetRecords();
            //var dt = GenerateData(result);
    
            Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "LineChart",
                Animate = true,
                Height = 610,
                Shadow = true
            };
    
            chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Bottom };
            List<string> listName = GetColumnNames();
            var store = CreateStore(listName);
    
            //store.DataSource = dt;
            store.DataSource = result;
            chtGrafico.Store.Add(store);
    
    
            CategoryAxis categoryAxis = new CategoryAxis()
            {
                Fields = new string[] { "Name" }
            };
    
            string handlerTips = " var stringValue = EUR Ext.util.Format.number(value, '0.0000'); return stringValue;";
            AxisLabel l = new AxisLabel();
            l.Renderer.Handler = handlerTips;      
    
            NumericAxis numericAxis = new NumericAxis()
            {
                Fields = listName.ToArray(),
                GridConfig = new AxisGrid()
                {
                    Odd = new SpriteAttributes() { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 }
                },
                Title = "Price for Pack",
                Minimum = 1.0,
                Maximum = 10.0015665
            };
    
            numericAxis.Position = Position.Left;
            categoryAxis.Position = Position.Bottom;
    
            chtGrafico.Axes.Add(numericAxis);
            chtGrafico.Axes.Add(categoryAxis);
    
            SeriesCollection series = new SeriesCollection();
            series = CreateChartSeries1(listName);
    
            foreach (var ser in series)
            {
                chtGrafico.Series.Add(ser);
            }
    
            var npvLabel = new Sprite { Type = SpriteType.Text, Text = "NPV = 2.2", X = 82, Y = 640, ZIndex = 7001, Font = "normal 12px Arial", Fill = "#000", SpriteID = "lblNetPresetValue" };
            chtGrafico.Items.Add(npvLabel);
            
            pnlGrafico.Items.Add(chtGrafico);
        }
    
        public List<string> GetColumnNames()
        {
            List<string> lst = new List<string>();
    
            //Here we add ColumnNames to the list i.e. 'Albania1','Albania2','France1','France2'       
            lst.Add("Albania");
            lst.Add("Mexico");
            lst.Add("France");
            lst.Add("India");
    
            return lst;
    
        }//end of function for creating column names
    
        private DataTable GenerateData(IList<GrpColumns> result)
        {
            List<string> countryList = new List<string>();
            countryList.Add("Albania");
            countryList.Add("Mexico");
            countryList.Add("France");
            countryList.Add("India");
    
            DataTable dt = new DataTable();
            var countryColumn = new DataColumn("Name");
            dt.Columns.Add(countryColumn);
            int colCount = 1;
            foreach (var rec in countryList)
            {
                int dtRowsCount = 0;
                var dataList = result.Where(c => c.Country == rec);
    
    
                var CountryName = rec; //For Scenario 1
                var countyCol = new DataColumn(CountryName, typeof(GrpColumns));
                dt.Columns.Add(CountryName);
                if (colCount == 1)
                {
                    foreach (var item in dataList)
                    {
                        var dataRow = dt.NewRow();
                        dataRow["Name"] = item.Name;                   
                        dataRow[CountryName] = new GrpColumns() { Name = item.Name, Country = CountryName, IsScheduled = item.IsScheduled, Value = item.Value };
                        dt.Rows.Add(dataRow);
                    }
                }
                else
                {
    
                    foreach (var data in dataList)
                    {
                        dt.Rows[dtRowsCount][colCount] = new GrpColumns() { Name = data.Name, Country = CountryName, IsScheduled = data.IsScheduled, Value = data.Value };
                        dtRowsCount++;
                    }
                }
                colCount++;
    
            }
    
            return dt;
        }
     
    }
    <div">
      
    
    
        @( Html.X().Container().ID("RevenueTrendContainer").Padding(5).Border(true)
                          .Items(
                            Html.X().TabPanel()
                            .ID("RevenueGraphTab")
                            .ActiveTabIndex(0)
                            .MinHeight(655)
                            .Plain(true)
                            .Margin(0).StyleSpec("padding-bottom:7px;")
                            .Items
                             (
                                    Html.X().Panel()
                                        .Margin(0).Padding(5)
                                        .Title("Cumulative")
                                        .Height(700)
                                        .ID("CumulativePanel")                                   
                                        .Items(                                      
                                            Html.X().Container()
                                              .ID("container_MultiScenarioPriceTrend")
                                              .Height(550)
                                             .DefaultAnchor("100%").Layout(LayoutType.Fit)
                                              .Control(item => this.Initchart(item))
                                            
                                        )
                            )//Tab Panel                        
    
                        )
                        )
    </div>
    The issue is the graph is not getting plotted for months "Aug-2013" and "Sept-2013". Attahced is the screenshot


    Can you please let me know what is wrong.

    Thanks
    Attached Thumbnails Click image for larger version. 

Name:	misisngmonths.PNG 
Views:	25 
Size:	40.7 KB 
ID:	10561  
    Last edited by Daniil; May 13, 2014 at 4:20 PM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    Hard to say what is going wrong. I need to run the code, but I cannot because of compile errors.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @PriceRightHTML5team,

    Hard to say what is going wrong. I need to run the code, but I cannot because of compile errors.
    Can u tell me what are the compile errors. Will send u the updated sample code
  4. #4
    Quote Originally Posted by PriceRightHTML5team View Post
    Can u tell me what are the compile errors. Will send u the updated sample code
    Try running your code in a new project. That should help you narrow down where the compiler errors are being thrown.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by geoffrey.mcgill View Post
    Try running your code in a new project. That should help you narrow down where the compiler errors are being thrown.
    I guess i was missing one class. Please find the updated model:

    //Model
    public class TestClass
        {
            public string ScenarioName { get; set; }
            public string Country { get; set; }
            public string Date { get; set; }
            public double Value { get; set; }
            public string Name { get; set; }
    
            public static ExpandoObject[] GetRecords()
            {
                List<GrpColumns> list = new List<GrpColumns>();
              
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Aug-2013", Value = null });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Sept-2013", Value = null });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "1", Country = "Albania", Name = "Oct-2013", Value = 5.5 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "Albania", Name = "Nov-2013", Value = 1.1 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Aug-2013", Value = 5.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Sept-2013", Value = 6.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Oct-2013", Value = 7.7 });
                list.Add(new GrpColumns() { IsProvisional = "1", IsScheduled = "0", Country = "France", Name = "Nov-2013", Value = 7.5 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Aug-2013", Value = 8.1 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Sept-2013", Value = 6.2 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Oct-2013", Value = 5.3 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "Mexico", Name = "Nov-2013", Value = 4.4 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Aug-2013", Value = 9.7 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Sept-2013", Value = 2.8 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "0", Country = "India", Name = "Oct-2013", Value = 5.9 });
                list.Add(new GrpColumns() { IsProvisional = "0", IsScheduled = "1", Country = "India", Name = "Nov-2013", Value = 2.6 });
    
                var data = list.GroupBy(d => d.Name);
                var dataList = new List<ExpandoObject>();
                foreach (var item in data)
                {
                    var exp = new ExpandoObject();
                    (exp as IDictionary<String, Object>).Add("Name", item.Key);
                    foreach (var val in item)
                    {
                        (exp as IDictionary<String, Object>).Add(val.Country, val.Value);
                    }
                    (exp as IDictionary<String, Object>).Add("Data", item);
                    dataList.Add(exp);
                }
    
                return dataList.ToArray();
            }
    
        }
        public class GrpColumns
        {
            public string Country { get; set; }
            public string IsScheduled { get; set; }
            public string Name { get; set; }
            public double? Value { get; set; }
            public string IsProvisional { get; set; }
        }
    if ExpandoObject is throwing compile error .Please add "using System.Dynamic;" namespace to the project.

    Let me know if its still not running
  6. #6
    Now I can run it, thanks.

    Some Chart points is out of scope because of
    Minimum = 1.0,
    If you set it to
    Minimum = 0,
    it should render all the points.
  7. #7
    Thanks for the Reply.

    But we need minimum and maximum on Numeric Axis,since if we don't provide and we have values range from say: 1.8 and 2.8 then the chart gets displayed as shown below (Note: this is a different chart):

    Click image for larger version. 

Name:	Untitled(1).png 
Views:	21 
Size:	46.6 KB 
ID:	10581

    This chart is not more readable.

    I understand since some of the datapoints has null value and hence due to minimum attribute its not getting displayed. Is there any work around. Since we need to show the months that has null values as well.

    Thanks
  8. #8
    Please try this setting for the NumericAxis.
    Constrain = false

Similar Threads

  1. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM
  2. Replies: 2
    Last Post: Nov 07, 2013, 1:03 PM
  3. [CLOSED] Chart Line
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  4. [CLOSED] NumberField missing the bottom line on IE8 ?
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jul 17, 2012, 4:48 PM
  5. [CLOSED] FieldSet - Bottom border-line missing on IE-8
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 03, 2011, 5:04 PM

Tags for this Thread

Posting Permissions