How to show 2 data series in one chart

[Christoph Zöttl]

Hi!

Using Syncfustion the first time and I am quite happy for now. Really happy that I am able to use the community license!

But I stuck now in showing two line charts. What I have is the following:

   @(Html.EJ().Chart("IncomeVsExpenseLineChart")

        .PrimaryYAxis(pr => pr.ValueType(AxisValueType.Category))

        .Axes(ax => ax.Name("yAxis"))

        .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Woche")))

        .CommonSeriesOptions(o => o.Type(SeriesType.Line))

        .Series(sr =>

        {

            sr.Name("Income").Type(SeriesType.Line).EnableAnimation(true).DataSource(x => x.URL(Url.Action("IncomeVsExpenseAsJson", "Statistics", new

            {

                incomeVsExpenseGroupBy = Model.IncomeVsExpenseGroupBy

            }))).XName("DatePart").YName("Income");

            sr.Name("Expense").Type(SeriesType.Line).EnableAnimation(true).YAxisName("yAxis").DataSource(x => x.URL(Url.Action("IncomeVsExpenseAsJson", "Statistics", new

            {

                incomeVsExpenseGroupBy = Model.IncomeVsExpenseGroupBy

            }))).XName("DatePart").YName("Expense");

        })

        .CanResize(true)

        .Locale("DE-at")

        .Size(sz => sz.Height("600")))    

How can I use two series in one chart.

Additionally I would get the color via json which I would like to use as the line color. Is this possible too?

Thanks for any hints!

[Saravana Kumar Kanagavel]

Hi Christoph,

Thanks for contacting syncfusion support.

We have analyzed your query and we suspect that the problem is with binding the data source to series. So we wish to let you know the various types of binding data to the chart.

1.Binding IEnumerable object:

·       Create a model and process the data.

·       In controller, get the data by calling the function in model.

·       And pass the data to the view page using Viewbag.

·       In view, assign the data get from the controller to the Data source in chart.

Please find the below code snippet of model

[CS]

public class data{

        public int xValue { get; set; }

        public int yValue1 { get; set; }

        public int yValue2 { get; set; }

        }

        public List<data> getData

        {

            get

            {

                List<data> details = new List<data>();

                int[] xvalue={1,2,3,4,5,6,7,8,9,10};

                Random rand = new Random();

                for (var i = 0; i <xvalue.Length; i++)

                {

                    var val = rand.Next(3, 8);

                    details.Add(new data()

                    {

                        xValue = xvalue[i],

                        yValue1 = val

                       

                    });

                }

                return details;

            }

        }

        public List<data> getData1

        {

            get

            {

                List<data> details = new List<data>();

                int[] xvalue = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };

                Random rand = new Random();

                for (var i = 0; i < xvalue.Length; i++)

                {

                    var val = rand.Next(3, 8);

                    details.Add(new data()

                    {

                        xValue = xvalue[i],

                        yValue2 =val

                    });

                }

                return details;

            }

        }

And find the below code snippet of controller

[CS]

    public ActionResult Databind()

        {

            var DataSource1 = new Databind().getData;

            ViewBag.datasource1 = DataSource1;

            var DataSource2 = new Databind().getData1;

            ViewBag.datasource2 = DataSource2;

            return View();

        }

And also find the below code snippet of view

[CSHTML]

@(Html.EJ().Chart("container")

       .Series(ser =>

                 {

                    ser.Name("Income").DataSource((IEnumerable<object>)ViewBag.datasource1).XName("xValue").YName("yValue1") .Add();

                    ser.Name("Expense").DataSource((IEnumerable<object>)ViewBag.datasource2).XName("xValue").YName("yValue2") Add();

                 })

)

Please find output of the sample below

2.Binding by triggering load event:

·       We have triggered the load event in chart.

·       On Load event, we are generating the data and bind the data to the DataSource.

·       And xName and yName fields are binding to the series in chart.

Please find the below code snippet

[CSHTML]

  @(Html.EJ().Chart("container")

          .Load("onchartload")

)

[JS]

function onchartload(sender) { //Load event triggerd

        var data = GetData();

        var length = sender.model.series.length;

        for (var i = 0; i < length; i++) {

            var data = GetData();

            sender.model.series[i].dataSource = data.Open; //Bind the data to the Data source

            sender.model.series[i].xName = "XValue";      //xName field binding to the series

            sender.model.series[i].yName = "YValue";      //yName field binding to the series

        }

    }

    function GetData() {

        var series1 = [];

        var value = 10;

        for (var i = 1; i < 25; i++) {

            if (Math.random() > .5) {

                value += Math.random();

            } else {

                value -= Math.random();

            }

            var point = { XValue: new Date(1970, i + 2, i), YValue: value };

            series1.push(point);

        }

        var data = { Open: series1 };

        return data;

    }

And also we have made sample for your reference and attached in the below location

Sample Link: http://www.syncfusion.com/downloads/support/forum/123483/ze/sample376340626

 

1.Load event sample coded in view named “index.cshtml” in the Home folder.

2.IEnumerable object sample coded in view named “Databind.cshtml” in the Databind folder.

Find the output of the sample below

Query : Additionally I would get the color via json which I would like to use as the line color. 

      This can be done by using palette property in chart. This property takes list of colors as input and will bind those to the fill color of the series.

Please find the below code snippet

[CSHTML]

@(Html.EJ().Chart("container")

      .Load("onchartload")

)

[JS]

function onchartload(sender) { //Load event triggerd

       var color = [{ "color": "green" }, { "color": "blue" }];

       var length = sender.model.series.length, fillColor=[];      

       for (var i = 0; i < length; i++) {

          fillColor[i] = color[i].color;

       }

         sender.model.palette = color;

    }

In the above code, we were triggering load event. On the event, we have created Json data with colors and converted it to array and bind to the series color using the palette property.

Please let us know if you have any concern.

Regards,

Saravana Kumar K