multiple series in datasource (dynamic)

[Valdimar Kristjansson]

Hi,

I have a datasource (json) that is structured like this:

[{"name": "series 1", "value": 1, "date": 2011-12-01},
 {"name": "series 2", "value": 2, "date": 2011-12-01}]

Is there any way to use the chart so that it creates the series from the datasource i.e.

    <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        dataSource: {
                            transport: {
                                read: {
                                    url: "_list/series_list/all_series",
                                    dataType: "json"
                                }
                            }
                        },
                        title: {
                            text: "my series"
                        },
                        legend: {
                            position: "top"
                        },
                        seriesDefaults: {
                            type: "line"
                        },
                        series: //USE A TEMPLATE HERE SO FOR EACH NAME IN THE JSON A SERIES IS CREATED.
                        [{
                            field: "value",
                         }
		                      ],
                        categoryAxis: {
                            field: "date",
                            labels: {
                                rotation: -90
                            }
                        },
                        valueAxis: {
                            labels: {
                                format: "{0:N3}"
                            },
                            majorUnit: 1
                        },
                        tooltip: {
                            visible: true,
                            format: "{0:N3}"
                        }
                    });
                }
                $(document).ready(function() {
                    setTimeout(function() {
                        createChart();


                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                    }, 400);
                });
           </script>

I really don't like having to edit my page each time the database has a new series added.

 thanks,
  nisbus

[T. Tsonev]

Hello,

The Chart doesn't support this type of binding yet. You have to create an external data source, group it by the name column and create the series dynamically.

// Not tested, treat as pseudo-code

var dataSource = new kendo.data.DataSource({
    data: [
        {"name": "series 1", "value": 1, "date": 2011-12-01},
        {"name": "series 2", "value": 2, "date": 2011-12-01}
    ],
    group: {
        field: "name",
        dir: "asc"
    }
});

dataSource.read();
var view = dataSource.view();
var chartSeries = [];

for (var groupIx = 0; groupIx < view.length; groupIx++) {
    var group = view[groupIx];
    chartSeries.push({
        data: group.items,
        field: "value",
        name: group.value
    });
}

I hope this helps. Greetings,
Tsvetomir Tsonev
the Telerik team

[CTI Group]

Using the technique described here, I get the multiple series showing up in the legend and all of the data points are plotted.  However I get one series line connecting all of my datapoints.  I would have expected one line for each series.  Here is a code snippet:

var view;

var chartSeries = [];       

view = AgentTrendDataSource.view();

   

for (var groupIx = 0; groupIx < view.length; groupIx++) {

    var group = view[groupIx];

    chartSeries.push({

        data: group.items,

        field: "Score",

        type: "line",

        name: group.items[0]["Name"]

    });

}

[T. Tsonev]

Hello,

How are the chart series defined? Do you make sure that the series array is overwritten by chartSeries?

Another idea that you might try is to console.log(chartSeries), for example in Chrome, and inspect the produced points.

I hope this helps.

All the best,
Tsvetomir Tsonev
the Telerik team

[Brian Vallelunga]

Here's another vote for more intuitive multi-series data. It seems to me that I should be able to give it multiple arrays of data and a series key name and it should then add multiple lines for me. I'm going to try the suggested approach and see how it works.

[Brian Vallelunga]

This code isn't working for me either. Here's what I have currently:

var dataSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: "/GetData",

            dataType: "json"

        }

    },

    group: {

        field: "Name",

        dir: "asc"

    }

});

dataSource.read();

var view = dataSource.view();

Using Fiddler, I can see that the call to dataSource.read() is successfully getting the JSON. However, dataSource.view() always returns an empty array. I'm not sure why this is the case.

The JSON I'm returning looks like this:

[

    {

      "Name": "Bob",

      "Count": 2762,

      "Date": "2011-11-14 09:00"

    },

    {

      "Name": "Sue",

      "Count": 521,

      "Date": "2011-11-14 09:00"

    },

    {

      "Name": "Bob",

      "Count": 2769,

      "Date": "2011-11-15 09:00"

    },

    {

      "Name": "Sue",

      "Count": 525,

      "Date": "2011-11-14 09:00"

    }

]

[CTI Group]

We have been able to work around the problem.  The problem was that when binding the series dynamically like this, the series array cannot contain complex json objects (i.e. data: group.items) even when specifying the series "Field" property to use for the series value.  The workaround we used was to bind to a newly created array with a simple category and value without having to specify the field name property.  Notice data used to be set as data: group.items but now is set as data: getDataFromArray(group.items, "UTCEpochTime", "Score").

     ...

     for (var groupIx = 0; groupIx < view.length; groupIx++) {

            var group = view[groupIx];

            chartSeries.push({

                data: getDataFromArray(group.items, "UTCEpochTime", "Score"),               

                type: "scatterLine",

                name: group.items[0]["Name"]

            });

        }

       ...

 

 

function getDataFromArray(array, field1, field2) {

       var rv = [];

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

            rv.push([array[i][field1], array[i][field2]]);

        }      

        return rv;

    }

[Brian Vallelunga]

Sid, that works for me, but how are you supporting labels on your x-axis? In my example with the date strings as the desired x-axis markers, I'm getting NaN errors. If I change the dates to simply integer values, the chart works.

[CTI Group]

Use a template on the xAxis.  In this example, I'm passing an EPOCH value as the int (a long actually).  toDate creates the JavaScript Date object based on the EPOCH value.

It's corny, but it gives you a ranged date series.

template:

 

 

'#= kendo.toString(toDate(value), "d")#'

[Brian Vallelunga]

Got it, thanks.

[Brian Vallelunga]

Tsvetomir,

The code you posted above doesn't work for remote data.

dataSource.read();

var view = dataSource.view();

var chartSeries = [];

I believe the reason it doesn't work is that the call to read() is asynchronous and thus there's no data in dataSource when you call view(). This is actually a problem. Can you add a callback to read() so that we can actually perform the above function?

[T. Tsonev]

Hello,

Good point. We need to use the change event to execute our binding after the data has been received.

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/GetData",
            dataType: "json"
        }
    },
    group: {
        field: "Name",
        dir: "asc"
    },
    change: function() {
        var view = dataSource.view();
        // ...
    }
});

dataSource.read();

I hope this helps.

All the best,

Tsvetomir Tsonev
the Telerik team

[Sean]

Another thing you could do is format your json in your .svc method with a Series property and Categories property instead of messing with all of the extra client script:


                

$.ajax({

    type: "GET",

    url: "/Awesomeness.svc/GetMultiLineChartData",

    data: "{}",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function (msg) {

        $("#chart").kendoChart({

        theme: "blueopal",

        title: {

             text: "Chart Title Goes Here"

        },

        legend: {

             position: "bottom"

        },

        chartArea: {

             background: ""

        },

        seriesDefaults: {

           type: "line"

        },

        series: msg.d.Series,

        valueAxis: {

           labels: {

             format: "{0}%"

           }

        },

        categoryAxis: {

            categories: msg.d.Categories

        },

        tooltip: {

           visible: true,

           format: "{0}%"

        }

    });

   }

});

[Sean]

*double post*

[Jeffrey]

I am following all the samples here and I have come up with this:

    var dataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: url,

                dataType: "json"

            }

        },

        group: {

            field: seriesColumn,

            dir: "asc"

        },

        change: function () {

            var view = dataSource.view();

            var chartSeries = [];

 

            for (var groupIx = 0; groupIx < view.length; groupIx++) {

                var group = view[groupIx];

                chartSeries.push({

                    data: GetDataForSeries(group.items, "Month", "Value"),

                    name: group.items[0][seriesColumn]

                });

            }

 

            ShowChart(chartSeries, title);

        }

    });

 

    dataSource.read();

}

 

function GetDataForSeries(items, displayFeld, valueField) {

    var dataArray = [];

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

        dataArray.push([items[i][displayFeld], items[i][valueField]]);

       // dataArray.push([items[i][valueField]]);

      

    return dataArray;

}

But this isn't working for me with the chart below.  It only works when I use the commented out line in the "GetDataForSeries" function.  I can't seem to get the chart to work for a Name, Value pair in the series data.  How do I tell it which one to use as the Value?

Here is my chart:

function ShowChart(chartSeries, title) {

    $("#chart").kendoChart({

        theme: "blueopal",

        title: {

            text: title

        },

        legend: {

            position: "top"

        },

        seriesDefaults: {

            type: "column"

        },

        series: chartSeries,

//        categoryAxis: {

//            //field: "name",

//            labels: {

//                rotation: -90

//                //format: "{0:N0}"

//            }

//        },

        valueAxis: {

            labels: {

                format: "{0:C0}"

            }

        },

        tooltip: {

            visible: true,

            format: "{0:C0}"

        }

    });

}

The image of the chart is attached.  

Seems like alot of hoops to go through.  Any word on getting the "Series" to bind to a column in your data source.

Basically, my data source is, Month, Year, Value.  Each year is a Series, Month is the X Axis, Value is the Y Axis.  I can't get the Months, Jan, Feb Mar to show up as the Category labels on the X Axis.

Thanks for the help

[T. Tsonev]

Hello,

The latest version of KendoUI supports native binding to grouped data source. This renders the need for custom code mostly obsolete.

I've prepared a sample that replicates your scenario. This is the full chart configuration:
$("#chart").kendoChart({
    dataSource: {
      data: costHistory,
      group: {
        field: "year",
        dir: "asc"
      }
    },


    series: [{
      type: "column",
      field: "value"
    }],


    categoryAxis: {
      field: "month"
    }
});

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Jeffrey]

That helps a ton!  Thank you very much.