Kendo Chart Does not show Data

Question

Im sending my json data through controller like following:i have written the query here just to prevent making it complicated and messy :

My Controller Returning This:

    public JsonResult powerConverter(string regionalManager)


   foreach (DataRow dt in dt_power_conv.Rows)
        {

            _powerConv.turbineName.Add(dt["turbine_name"].ToString());
            _powerConv.duration_hrs.Add(double.Parse(dt["duration_hrs"].ToString()));
            _powerConv.abb_conv.Add(dt["abb_conv"].ToString());
            _powerConv.eei_conv.Add(dt["eei_conv"].ToString());
            _powerConv.leit_drive_conv.Add(dt["leit_drive_conv"].ToString());

        }


        return Json(_powerConv, JsonRequestBehavior.AllowGet);


 }

in my view I get it with an Ajax call and simply bind my chart with it:

       $.ajax({

     dataType: "json",
     type: "POST",
     url: "@Url.Action("powerConverter","Ranking")",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify({ "regionalManager": tmpString }),
     success: function (result) {
 debugger;

           $("#powerChart").kendoChart({

     dataSource: {
     data: result
 },

     chartArea: {
     background: "#fcfcfc",
 },
     series: [{
     axis: "l100km",

     type: "column",
     // name: "DURATION",
     color: "#008080",
         field: "duration_hrs",
         categoryField: "turbineName"
 },


 ],

     categoryAxis: {
     axisCrossingValue: [0, 20],

     majorGridLines: {

     visible: false


 },
     line: {



     visible: true
 },

     labels: {

     rotation: 340

 },


 },

     tooltip: {
     visible: true,

     // majorUnit:10,
     template: " #= value #"
 },

 });


     }

 });

I also posted the screen shot of my json,but still its not working,i set the categoryField and field with the exact name im getting from json but the chart shows nothing

How is tmpString assigned ? It may be that the url is being passed a value that causes no data to be returned. If you are getting data back, what does the browser tools network tab show for request and response ? Likewise, when you debug the controller, is it getting the expected regionalManager argument ? — Richard, Mar 07 '18 at 13:33
@Richard I have the data in json format ,but I think there should be something wrong with my code,do you how can I show my data on chart? — papagallo, Mar 07 '18 at 13:36
Without seeing a sample of the json it would be hard to say. Field names are case-sensitive, so that can be a cause. The data field names also appear to have different naming conventions, another 'fun' feature when coding. Also, check your browse tools console for error messages — Richard, Mar 07 '18 at 13:50
Can you also add the controller code for the powerConverter method. Chop it down if there is a lot to it, only need to see the return statement and how the value being toJson'd is set. — Richard, Mar 07 '18 at 14:52

Richard · Answer 1 · 2018-03-07T17:10:09.917

It looks like the controller is returning two arrays, one for errorDuration and one for turbineName. Try changing the controller to return an array of objects.

You would want a review of returned json to show

[0] = { duration: 1, turbine: "a" }
[1] = { duration: 2, turbine: "b" }
[2] = { duration: 3, turbine: "c" }

In the chart the config settings for the series the field names have to match exactly the property names of the data elements, thus

field: "duration",
categoryField: "turbine",

Added

The controller code appears to be populating a list of a model class whose fields are also lists. Try updating it to return the Json for a list of objects

For quickness this example shows how using anonymous objects. Strongly typed objects are highly recommended for robustness and Visual Studio intellisense. The field names that you use in your kendo chart configuration will be "turbine_name" and "duration_hours"

// This technique copied from @Paul Rouleau answer to 
// https://stackoverflow.com/questions/612689/a-generic-list-of-anonymous-class

// initialize an empty list that will contain objects having two fields
var dataForJson = new List<Tuple<string, double>>()
      .Select(t => new { 
          turbine_name = t.Item1,
          duration_hours = t.Item2 }
       ).ToList();      

// go through data table and move data into the list
foreach (DataRow row in myDataTable.Rows)
{
    dataForJson.Add (new {
      turbine_name = (string)row["turbine_name"],
      duration_hours = (double)row["duration_hours"]
    });
}

return Json(dataForJson, JsonRequestBehavior.AllowGet);

Note, if you do further research you will find numerous other ways to convert a data table into a Json

Richard I have updated my question, still the same result,chart shows nothing — papagallo, Mar 07 '18 at 15:18
You need to shape the data to the layout needed by the component. The answer was updated to show how the controller can be modified. For the cases when the controller can't be changed, the client (the javascript) has to reshape whatever data it gets. — Richard, Mar 07 '18 at 17:14

Kendo Chart Does not show Data

1 Answers1