title: How to set the legend series dynamically in kendo ui
body: <p>How can we set the series with same field name having different values. So that the legends can be displayed with different values.</p>
  
  <p>I had tried in this way code:</p>
  
  <pre><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 }
              }
          }
  });
  
  });
  </code></pre>