[CLOSED] Configure Legend of Line Chart Series

[PriceRightHTML5team]

So, is a chart rendered without the Legend override?

Legend does get override. In my script i trim the last charcter i.e. 1 &2 from Albania1 and Albania2 and only update the series.yField to "Albania".
But i don't see the line on the graph

[Daniil]

I am not sure how the Legend override can affect on the chart.

Please provide a test case. I will investigate.

[PriceRightHTML5team]

Below is the test case:

@functions{
   private void Initchart(Container pnlGrafico)
    {
     var result =svc.GetRecords();
      var dt = GenerateData(result);

     Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
        {
            ID = "LineChart",
            Animate = true,
            Height = 300,
            Shadow = true,
        };
    
     chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Right };
     List<string> listName = GetColumnNames(result);
      var store = CreateStore(listName);
     store.DataSource = dt;
      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 }
            },
            Label = l,
            Title = "Price for Pack",
            Minimum = 0.0
        };

        numericAxis.Position = Position.Left;
        categoryAxis.Position = Position.Bottom;

        chtGrafico.Axes.Add(numericAxis);
        chtGrafico.Axes.Add(categoryAxis);

        SeriesCollection series = new SeriesCollection();
        series = CreateChartSeries1(dt, listName);

   foreach (var ser in series)
        {
            chtGrafico.Series.Add(ser);
        }

 pnlGrafico.Items.Add(chtGrafico);
}


private DataTable GenerateData(IList<TestClass> result)
{
DataTable dt= new dataTable();
  //Here we format the result and create a dataTable with following structure
/*Name Albania1 Albania2 France1 France2

Aug-13   1.1   1.2  3.1  2.2
Sept-13  2.1   2.2   4.1  4.2
Oct-13   2.1  2.2  5.1   3.3
*/
return dt;
}

public List<string> GetColumns(IList<TestClass> result)    {
List<string> lst = new List<string>();
 
//Here we add ColumnNames to the list i.e. 'Albania1','Albania2','France1','France2'
 lst.Add("Albania1");
 lst.Add("Albania2");
 lst.Add("France1");
 lst.Add("France2");

return lst;

}//end of function for creating column names

private SeriesCollection CreateChartSeries1(DataTable dt, List<string> cdata)
    {
        SeriesCollection absSeries = new SeriesCollection();
        absSeries = new SeriesCollection();    
        foreach (var row in cdata)
        {

              if (row.Contains("1"))
            {

                absSeries.Add(
                          Html.X().LineSeries()
                                  .Axis(Position.Left)
                                  .XField("Name")
                                  .YField(row)
                                  .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                  .MarkerConfig(new SpriteAttributes { Type = SpriteType.Diamond, Size = 5, Radius = 5, StrokeWidth = 0 })
                                  .Tips(Html.X().ChartTip()
                                      .TrackMouse(true)
                                      .Width(480)
                                      .Height(28)
                                  )
                          );
            }
            else if (row.Contains("2"))
            {

                absSeries.Add(
                          Html.X().LineSeries()
                                  .Axis(Position.Left)
                                  .XField("Name")
                                  .YField(row)
                                  .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                  .MarkerConfig(new SpriteAttributes { Type = SpriteType.Cross, Size = 5, Radius = 5, StrokeWidth = 0 })
                                  .Tips(Html.X().ChartTip()
                                      .TrackMouse(true)
                                      .Width(480)
                                      .Height(28)
                                  )
                          );
            }

        }

        return absSeries;

    }//end of create chart series

   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));
}
  store.Model.Add(model);

        return store;
}//end of create store
}//end of Function

<div style="margin-top: -34%">
    @(Html.X().Container()
      .ID("container_MultiScenarioPriceTrend")
      .Height(400)
      .DefaultAnchor("100%")
      .Layout(LayoutType.Fit)
      .Control(item => this.Initchart(item))
)
</div>

<script type="text/javascript">

    Ext.override(Ext.chart.Legend, {
        createItems: function () {
            var me = this,
            seriesItems = me.chart.series.items,
			 items = me.items,
            fields, i, li, j, lj, series, item;
            var tempVar = '';;
            var trimmedField = '';
            me.removeItems();
            for (i = 0, li = seriesItems.length; i < li; i++) {
                series = seriesItems[i];

                if (series.yField.indexOf("1") != -1 || series.yField.indexOf("2") != -1) {
                    trimmedField = series.yField.substring(0, series.yField.length - 1);
                    if (tempVar != trimmedField) {
                        tempVar = trimmedField;
                        var a = series;
                        a.yField = tempVar;
                        if (a.showInLegend) {
                            fields = [].concat(a.yField);

                            for (j = 0, lj = fields.length; j < lj; j++) {
                                item = me.createLegendItem(a, j);
                                items.push(item);
                            }
                        }
                    }
                    trimmedField = '';
                }

            }
            me.alignItems();
        }
    });

</script>

Please let me know if you need any more information

[Daniil]

Thank you. Unfortunately, I cannot run it. I have no "TestClass" definition.

Also could you, please, realize it in the test case?

//Here we format the result and create a dataTable with following structure
/*Name Albania1 Albania2 France1 France2

[PriceRightHTML5team]

Thank you. Unfortunately, I cannot run it. I have no "TestClass" definition.

Also could you, please, realize it in the test case?

//Here we format the result and create a dataTable with following structure
/*Name Albania1 Albania2 France1 France2

You can create a list of testclass with any data .
Below is the strucutre.

public class TestClass
{
public string  ScenarioName {get;set;}
public string Country {get;set;}
public string Date {get;set;}
}

Below is the sample on how the TestClass is populated through service

List<TestClass> list = new List<TestClass>();
list.add( new TestClass() { ScenarioName = " A" , Country = "albania" , Date = "Aug-2013" Value= "2.2" });
list.add( new TestClass() { ScenarioName = " A" , Country = "albania" , Date = "Sept-2013" Value= "2.3" });
list.add( new TestClass() { ScenarioName = " A" , Country = "France" , Date = "Aug-2013" Value= "2.1" });
list.add( new TestClass() { ScenarioName = " A" , Country = "France" , Date = "Sept-2013" Value= "3.3" });
list.add( new TestClass() { ScenarioName = " B" , Country = "albania" , Date = "Aug-2013" Value= "2.2" });
list.add( new TestClass() { ScenarioName = " B" , Country = "albania" , Date = "Sept-2013" Value= "2.3" });
list.add( new TestClass() { ScenarioName = " B" , Country = "France" , Date = "Aug-2013" Value= "2.1" });
list.add( new TestClass() { ScenarioName = " B" , Country = "France" , Date = "Sept-2013" Value= "3.3" });

We then generate the data table using the above list and convert it to dataTable as expalined in the before posts

[Daniil]

Ok, new "undefined" things:

var result = svc.GetRecords();

List<string> listName = GetColumnNames(result);

We then generate the data table  using the above list and convert it to dataTable as expalined in the before posts

Please implement it in your test case as well. We just need a runnable test case to have a chance to help you.

Sometimes a test case is not required to help. This case it is required.

[PriceRightHTML5team]

ok instead of svc.GetRecords use

TestClass.GetRecords()

public class TestClass
{
public string  ScenarioName {get;set;}
public string Country {get;set;}
public string Date {get;set;}

public List<TestClass> static GetRecords()
{
List<TestClass> list = new List<TestClass>();
list.add( new TestClass() { ScenarioName = " A" , Country = "albania" , Date = "Aug-2013" Value= "2.2" });
list.add( new TestClass() { ScenarioName = " A" , Country = "albania" , Date = "Sept-2013" Value= "2.3" });
list.add( new TestClass() { ScenarioName = " A" , Country = "France" , Date = "Aug-2013" Value= "2.1" });
list.add( new TestClass() { ScenarioName = " A" , Country = "France" , Date = "Sept-2013" Value= "3.3" });
list.add( new TestClass() { ScenarioName = " B" , Country = "albania" , Date = "Aug-2013" Value= "2.2" });
list.add( new TestClass() { ScenarioName = " B" , Country = "albania" , Date = "Sept-2013" Value= "2.3" });
list.add( new TestClass() { ScenarioName = " B" , Country = "France" , Date = "Aug-2013" Value= "2.1" });
list.add( new TestClass() { ScenarioName = " B" , Country = "France" , Date = "Sept-2013" Value= "3.3" });

return list;
}

}

ColumnNames method implementation

public List<string> GetColumnNames (IList<TestClass> result)    {
List<string> lst = new List<string>();
  
//Here we add ColumnNames to the list i.e. 'Albania1','Albania2','France1','France2'
 lst.Add("Albania1");
 lst.Add("Albania2");
 lst.Add("France1");
 lst.Add("France2");
 
return lst;
 
}//end of function for creating column names

Implementation of GenerateData Method

private DataTable GenerateData(IList<TestClass> result)
{
DataTable dt= new dataTable();
  //Here we format the result and create a dataTable with following structure
/*Name Albania1 Albania2 France1 France2
 
Aug-13   1.1   1.2  3.1  2.2
Sept-13  2.1   2.2   4.1  4.2
Oct-13   2.1  2.2  5.1   3.3
*/

 var countryColumn = new DataColumn("Name");
        dataTable.Columns.Add(countryColumn);
int colCount = 1;
foreach(var rec in result)
{
   if(rec.ScenarioName == "A")
{
             CountryName = rec.Country  + "1"; //For Scenario A
             var countyCol = new DataColumn(CountryName);
                dataTable.Columns.Add(CountryName);
                   var dataRow = dataTable.NewRow();
                        dataRow["Name"] = data.Date;
                        dataRow[CountryName] = data.Value;
                        dataTable.Rows.Add(dataRow);
colCount++;
           
}
}

foreach(var rec in result)
{ int dtRowsCount1 = 0;
   if(rec.ScenarioName == "B")
{
            var CountryName2 = rec.Country  + "2"; //For Scenario B
             var countyCol = new DataColumn(CountryName2);
                dataTable.Columns.Add(CountryName2);
                   
                dataTable.Rows[dtRowsCount1][colCount] = data.Value;
                        dtRowsCount1++;
           
}
}


return dt;
}

The above code is very basic used to fill the dataTable final structure of dataTable would be
Name Albania1 Albania2 France1 France2
Aug-2013 1.1 1.2 2.1 2.2
.... and so on

Let me know if you need anything else

[PriceRightHTML5team]

Hi Daniil,

any resolution for the issue. Or do you need anything else from my side.

[Daniil]

I applied the changes you described. Unfortunately, it still throws syntax and compile errors.

[Baidaly]

Hello!

Could you provide a full and independent sample to reproduce in one post? It will be very helpful to us.