We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show 2 data series in one chart

Thread ID:

Created:

Updated:

Platform:

Replies:

123483 Mar 21,2016 09:23 PM UTC Mar 22,2016 12:26 PM UTC ASP.NET MVC 1
loading
Tags: Chart
Christoph Zöttl
Asked On March 21, 2016 09:23 PM UTC

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 [Syncfusion]
Replied On March 22, 2016 12:26 PM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;