CODEWITHSUNDEEP
kendo-uikendo-datavizkendo-chart
user3234428
user3234428

Reputation: 83

Adding multiple series to Chart

I'm currently trying to build a chart showing number of downloads of a product per date. A sample of the current code is as follows:

var downloads = [  
  { value: 48, date: new Date("2013/11/01") },
  { value: 50, date: new Date("2013/11/02") },
  { value: 55, date: new Date("2013/11/03") },
  { value: 35, date: new Date("2013/11/04") }
];

$("#chart").kendoChart({
  dataSource: {
    data: downloads
  },
  series: [{
    type: "line",
    aggregate: "avg",
    field: "value",
    categoryField: "date"
  }],
  categoryAxis: {
    baseUnit: "days",
    min: new Date("2013/10/31"),
    max: new Date("2013/11/10"),
    labels: {
      dateFormats: {
        days: "dd/MM"
      }
    }
  }  
});

It works fine if I have to display data for one product only. How would I proceed to display download data for another product, i.e. adding another series to the chart?

Upvotes: 1

Views: 3600

Answers (1)

user3234428
user3234428

Reputation: 83

Right! I figured it out myself. Here it is:

$("#chart").kendoChart({ 
 seriesDefaults: {
     tooltip: {
         visible: true,
     },
     type:"line",
     aggregate:"avg",
     field:"value",
     categoryField:"date"
 }, 
  series: [{
    name: "Product 1",
    data: [{ value: 48, date: new Date("2013/11/01") }, { value: 50, date: new Date("2013/11/02") }]
    },
{
    name: "Product 2",
    data: [{ value: 55, date: new Date("2013/11/03") }, { value: 35, date: new Date("2013/11/04") }]
    }],
  categoryAxis: {
    baseUnit: "days",
    min: new Date("2013/10/31"),
    max: new Date("2013/11/10"),
    labels: {
      dateFormats: {
        days: "dd/MM"
      }
    }
  }  
});

Upvotes: 4

Related Questions