Question

Given the following JSON

{
   "ApprovalsSeries":{
      "Items":[
         {
            "Date":"2014-03-01T00:00:00",
            "Value":430
         },
         {
            "Date":"2014-03-02T00:00:00",
            "Value":173
         }
      ],
      "SeriesName":"Place Approvals"
   },
   "RequestsSeries":{
      "Items":[
         {
            "Date":"2014-03-01T00:00:00",
            "Value":143
         },
         {
            "Date":"2014-03-02T00:00:00",
            "Value":19
         }
      ],
      "SeriesName":"Place Requests"
   }
}

I am trying to create a simple bar chart with 2 series, and a category axis using the date. However I cant seem to manage it, and cannot find any examples online of binding to complex json data.

Was it helpful?

Solution

Figured it, the following is a line graph, but the concept is the same as a bar graph.

        $("#approvalschart").kendoChart({
            title: {
                text: "Place Requests / Approvals by Date"
            },
            legend: {
                visible: true,
                position: "bottom"
            },
            valueAxis: {
                labels: {
                    format: "N0"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                labels: {
                    rotation: -90,
                    template: "#= formatApprovalDate(value) #"
                }

            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            series: [
                {
                    field: "Value",
                    categoryField: "Date",
                    name: chartData.SeriesOne.SeriesName,
                    data: chartData.SeriesOne.Items
                },
                {
                    field: "Value",
                    categoryField: "Date",
                    name: chartData.SeriesTwo.SeriesName,
                    data: chartData.SeriesTwo.Items
                }]
        });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top