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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add multiple series from json data

Thread ID:





129686 Mar 28,2017 07:00 PM UTC Mar 29,2017 07:32 AM UTC JavaScript 1
Tags: ejChart
Roimer Machacón Otero
Asked On March 28, 2017 07:00 PM UTC

Hi, we're syncfusion chart and bring the data for this that we're need have multiple series.

Actually we've a problem and is that the chart is receiving the data as a single serie.

In this image can observe our problem, in the x name have the month names, the values (2005, 2010, 2011, ...)  need to be the names of the series, with their respective values.

This datatable is obtained of a sql query and converted to json.

Our definition of the chart is this:

                    series: [{
                        type: 'line',
                        dataSource: data,
                        xName: 'Mes',
                        yName: 'Produccion',
                        name: 'Siembras',

Anandaraj T [Syncfusion]
Replied On March 29, 2017 07:32 AM UTC

Hi Roimer, 

Thanks for using Syncfusion products. 

We have analyzed the format of JSON data provided by you and found that it supports only one series. To support multiple series, JSON data should be present in the following format 

        //JSON data format for n number of series sharing a common x value 
        var jsonData = [ 
            { commonXValueFieldForAllSeries : xValueForAllSeries , yValueFieldForSeries1 : yValueForSeries1 , yValueFieldForSeries2 : yValueForSeries2 ,   . . . .       yValueFieldForSeriesN : yValueForSeriesN }, 
            { commonXValueFieldForAllSeries : xValueForAllSeries , yValueFieldForSeries1 : yValueForSeries1 , yValueFieldForSeries2 : yValueForSeries2 ,     . . . .     yValueFieldForSeriesN: yValueForSeriesN }, 
            . . . . 
            . . . . 
            . . . . 

If changing the data table to above format is not an option, then we suggest you to create data source for required number of series, from the JSON data corresponding to data table. 

We have prepared a simple sample using the code snippet provided by you to create a chart based on your requirement. The sample is available in the following link 

[Chart with multiple series] 

In the above sample, we are deriving required number of data source from the JSON data as per your requirement. After creating the data source, series are created and bounded with each data source and finally all the series are added to chart. 

Please refer the following code snippet to achieve this 

        //Function to split json data based on specified requirements 
        function prepareChartData() { 
            var i, j, seriesCount; 
            //Find the number of series present in JSON data 
            for (i = 1; i < jsonData.length; i++) { 
                if (jsonData[0].NameSeries == jsonData[i].NameSeries) { 
                    seriesCount = i + 1; 
            //Derive the data for each series from jsonData 
            for (i = 0; i < seriesCount - 1; i++) { 
                chartData[i] = []; 
                for (j = seriesCount + i - 1; j < jsonData.length; j++) 
                    if (jsonData[j].NameSeries == jsonData[i].NameSeries) 
        $(function () { 
            var series = [], i, seriesOption; 
            //Create a new series for each data source split from JSON data 
            for (i = 0; i < chartData.length; i++) { 
                seriesOption = { 
                    type: 'line', 
                    dataSource: chartData[i], 
                    //Name of a field with data for x-value of series (data along x-axis) 
                    xName: 'XName', 
                    //Name of a field with data for y-value of series (data along y-axis) 
                    yName: 'ValueSeries', 
                    //Series name 
                    name: chartData[i][0].NameSeries.toString(), 
                    //Enable marker for the series 
                    marker: { visible: true, size: { width: 10, height: 10 } } 
            //Add all the series to chart 
                series: series 

Please let us know if you have any concern. 



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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