How to set the legend series dynamically in kendo ui

Question

How can we set the series with same field name having different values. So that the legends can be displayed with different values.

I had tried in this way code:

  $(document).ready(function(){
  var db = new kendo.data.DataSource({
      data: data,
      group: {
          field: "studentmarks"
      }

  });

  db.read();

  $("#Chart").kendoChart({
  theme: $(document).data("kendoSkin") || "silver",
  dataSource: db,
  aggregate: [{ field: "studentmarks", aggregate: "sum"}],
          group: { field: "studentsmarks" },

    title: {
        text: "Studentdetails"
    },
    dateField: "time",
    legend: {
        position: "bottom"
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        type: "line",field:"ID"
    },
    series: [{
        name: "marks",
        data: data,
        filter: "studentmarks",
        color: "#FC0505",
        width: 2,
        visibleInLegend: "studentmarks",

        markers: {
            visible: false
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    }, {
        name: "ID",
        filter: "studentmarks",
        data: data,
         axis: "",
        color: "#2605FC",
        width: 2,

        markers: {
            visible: true
        },
        tooltip: {
            visible: true,
            format: "{0}"
        }
    }, {
        name: "phone",
        filter: "studentmarks",
        data: data,
         axis: "",
        color: "#ED9AA5",
        width: 2,

        markers: {
            visible: true
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }

    },
     {
         name: "cbs",
        filter:"studentmarks",
        data: data,
         axis: "",
         color: "#9AA5ED",
        visible: true,
        opacity: .4,
        width: 2,

        markers: {
            visible: true
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    }],
    valueAxis: [{
        title: { text: "" },
        name: "ID",
            majorUnit: 0.5,
            max: 5.0,
            min: 0
    }, {
        name: "ink",
        title: { text: "" },
        min: 0,
        max: 6727.14,
        majorUnit: 1000,
        minorUnit: 500
    }],


      navigator: {
            series: {
                type: "area",
                color: "red",
                field: "studentmarks",
                //stack: "true",
                //value:"",
                data: data,
                aggregate: "min",
                name: "sai",
                select: {
                    from: "2009-01-01 17:08:04",
                    to: "2013-12-24 20:30:26"
                },
                //labels: { color: "green", visible: false },
                tooltip: { background: "green", format: "{0}", color: "white", visible: true }
            }
        }
});

});

Answer 1

Perhaps this will help?

var checkCookie = function(){
    var chartData1 = [{
                    name: "Hans",
                    color: "black",
                    data: [1,2,3,4,5]
    }]

    var chartData2 = [{
                    name: "Hans",
                    color: "black",
                    data: [1,2,3,4,5]
                }, {
                    name: "Franz",
                    color: "red",
                    data: [6,7,8,9,10]
    }]
    if (cookieThere) {
        return chartData1
    } else {
        return chartData2
    }
}

$("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    chartArea: {
        background: "",
        height: 150
    },
    legend: {position: "bottom"},
    seriesDefaults: {
        type: "column",
        stack: true,
        overlay: {gradient: "none"},
    },
    series: checkCookie(),
    ... 
});