Remote Data JSON retrieval

[Alexander]

  Hi,

I'm hoping you can help me I am trying to create a chart pulling data from the Entity Framework and passing it as JSON. My JSON output is as below:

	a	[ ""KPIColumnName":"Time T...ColumnValue":"3.579831"" , ""KPIColumnName":"Comple...ColumnValue":"3.359243"" , ""KPIColumnName":"Opinio...ColumnValue":"3.720588"" , 4 more...]

I have tried to setup my remote data source:

var customerSatisfactionDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '../Test/GetData',
            dataType: "json"
        }
    }
});

And then setup my chart to use this data source:

function createkpiBreakdownChart(labelPosition) {
    $("#kpiBreakdownChart").kendoChart({
        theme: $(document).data("kendoSkin") || "metro",
        dataSource: customerSatisfactionDataSource,
        schema: {
            a: "a"
        },
        series: [{
            field: "KPIColumnValue"
        }],
        categoryAxis: {
            field: "KPIColumnName"
        },
        title: {
            text: "Customer Satisfaction"
        },
        legend: {
            position: "bottom",
            visible: false,
        },
        chartArea: {
            background: "#ffffff"
        },
        seriesDefaults: {
            type: "bar"
        },
        //series: [{
        //    name: "Performance Metrics",
        //    data: [4.552162849872774, 4.391752577319588, 4.215633423180593, 4.345108695652174, 4.4728682170542635, 4.387005649717514, 4.351351351351352]
        //},],
        valueAxis: {
            minorUnit: .25,
            majorUnit: 1,
            min: 0,
            max: 5,
            plotBands: [{
                from: 4,
                to: 5,
                color: '#000000',
                opacity: .1
            }],
            labels: {
                labels: {
                    format: "N0"
                },
 
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        },
        //categoryAxis: {
        //    categories: ['Ease of requesting help', 'Time to reach qualified technician', 'Time to provide a solution', 'Completeness of solution', 'Technical ability & product knowledge', 'How well we kept you informed', 'Overall opinion of service'],
        //},
        tooltip: {
            visible: true,
            format: "#.##"
        }
    });
}

However currently I get nothing rendered on my chart just an empty outline.

If I do a jquery ajax call in firebug like this:

    $.ajax({
        type: 'GET',
        url: '../Test/GetData',
    }).done(function (data) {
        var customerSatisfactionChartData = data;
    }).fail(function (jqXHR, textStatus) {
    })

I get the JSON response from above, so I'm getting the JSON however it's not getting rendered in the chart. My series should be the ColumnValue and my categories the ColumnNames. Can you please help me understand what part I have missed or improperly formatted? Thanks.

[Alexander]

I've reformatted my JSON to output as such:


a: [

		"{"KPIColumnName":"Time To Reach Qualified Tech","KPIColumnValue":"3.579831"},",
		"{"KPIColumnName":"Completeness Of Solution","KPIColumnValue":"3.359243"},",
		"{"KPIColumnName":"Opinion Of Overall Service","KPIColumnValue":"3.720588"},",
		"{"KPIColumnName":"Tech Ability And Prod Knowledge","KPIColumnValue":"3.636554"},",
		"{"KPIColumnName":"Time To Provide Solution","KPIColumnValue":"3.285714"},",
		"{"KPIColumnName":"Ease Of Requesting Help","KPIColumnValue":"3.758403"},",
		"{"KPIColumnName":"How Well Are You Kept Informed","KPIColumnValue":"3.262605"},"

]

I am formatting this in MVC using:

        public FactSurveyResultsViewModel GetAverages()
        {
 
            var groupedresults = new FactSurveyResultsViewModel();
 
            using (var db = new ATSNavigatorDBEntities())
            {
                var results = db.CustomerSatisfactionSurveyResults().ToList();
                foreach (var d in results)
                {
    
                    groupedresults.a.Add("{\"KPIColumnName\":\"" + d.ColumnName + "\"," + "\"KPIColumnValue\":\"" + d.ColumnValue + "\"},");

                }
 
 
            }
            return groupedresults;

[Alexander]

Does anybody know why this setup for dataSource wouldn't work:

{"customerSatisfactionChart":[{"KPIColumnName":"Time To Reach Qualified Tech","KPIColumnValue":3.579831},{"KPIColumnName":"Completeness Of Solution","KPIColumnValue":3.359243},{"KPIColumnName":"Opinion Of Overall Service","KPIColumnValue":3.720588},{"KPIColumnName":"Tech Ability And Prod Knowledge","KPIColumnValue":3.636554},{"KPIColumnName":"Time To Provide Solution","KPIColumnValue":3.285714},{"KPIColumnName":"Ease Of Requesting Help","KPIColumnValue":3.758403},{"KPIColumnName":"How Well Are You Kept Informed","KPIColumnValue":3.262605}]}

        dataSource: {
            transport: {
                read: {
                    url: '../Test/GetData',
                    dataType: "json"
                }
            }
        },
        schema: {
            data: "customerSatisfactionChart"
        },
        series: [{
            field: "KPIColumnValue"
        }],
        categoryAxis: {
            field: "KPIColumnName"
        },

Thanks.

[Iliana Dyankova]

Hello Alexander,

I have already replied in your support ticket with the same question, however I am pasting my reply here so the other users who are following this thread can read it: 

 I believe the observed issue is due to the following:

• The schema is part from the dataSource, not from the Chart's configuration. I.e. the correct syntax should be: Copy Code

  $("#kpiBreakdownChart").kendoChart({
     theme: $(document).data("kendoSkin") || "metro",
     dataSource: {
         transport: {
             read: {
                url: 'data.json',
                dataType: "json"
             }
         },
         schema: {
             data: "customerSatisfactionChart"
         }
     },
    //....
  });

• The customerSatisfactionChart data should be passed as an object. For example: Copy Code

  {"customerSatisfactionChart":[
      {
          "KPIColumnName": "TimeToReachQualifiedTech",
          "KPIColumnValue": 3.579831
      },
      //....
  ]}

For your convenience I used the provided code and prepared a simple HTML page - please check it and let me know if this helps or in case you have any further questions. 

Regards,
Iliana Nikolova
the Telerik team