stpdevi
stpdevi

Reputation: 1114

How to set the legend series dynamically in kendo ui

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 }
            }
        }
});

});

Upvotes: 3

Views: 7277

Answers (2)

chris
chris

Reputation: 4867

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(),
    ... 
});

Upvotes: 3

user2439722
user2439722

Reputation: 39

 var mydata=checkCookie();
$("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        chartArea: {
            background: "",
            height: 150
        },dataSource:{
    data:mydata,
     serverSorting: false,
    group: {
        field:"name",
    },sort: [{field: "name", dir: "asc"}, 

    schema:{
        model:{
            fields:{
                "name":{"type":"string"},
                "data":{"type":"number"}
            }
        }
    }
},
        legend: {position: "bottom"},

        series: [{type:"column", field:"data", stack:true,colorField: "color"}],

Upvotes: 2

Related Questions