1

Partial View :

var dataa;
    $.ajax({
        url: ServerUrl + '/Dashboard/GetData',
        type: 'POST',
        cache: false,
        dataType: 'text',
        async: true,
        error: function (xhr) {
            //alert('Error: ' + xhr.statusText);
        },
        success: function (result) {
            debugger;
            dataa = result;
            var chart = c3.generate({
                data: {
                    type: 'bar',
                    json: [
                        dataa
                    ],
                    keys: {
                        x: 'indicator',
                        value: ['total']
                    }
                },
                axis: {
                    x: {
                        type: 'category'
                    }
                },
                bar: {
                    width: {
                        ratio: 0.5
                    }
                }
            });
        }
    });

Controller Json code

public string GetData()
{
return "{ 'indicator': 'X', 'total': 100 },{ 'indicator': 'Y', 'total': 200 },{ 'indicator': 'Z', 'total': 300 }";
}

When i use the above code it doesn't work but if I pass json data as specified in this JS Fiddle link, it works. Am I passing the JSON data incorrectly from controller.?

Please help.

4
  • Its not valid (your returning a string, not json) - it would need to be [{indicator: 'X", total: 100}, {...}]. You would be better off creating a collection of objects with properties indicator and total and then return Json(myCollection); so its valid.
    – user3559349
    Commented Mar 18, 2015 at 5:54
  • 1
    @StephenMuecke : is this a valid string return "{ \"indicator\": \"X\", \"total\": \"100\" },{ \"indicator\": \"Y\", \"total\": \"200\" },{ \"indicator\": \"Z\", \"total\": \"300\" }"; Commented Mar 18, 2015 at 6:00
  • @StephenMuecke : I just have to test it with the hardcoded json data passed from controller. Please help me with the same Commented Mar 18, 2015 at 6:03
  • 1
    You would need to test it. But its a string, not json. Use public JsonResult GetData() return Json(....) }` to return valid json data. Also you ajax option needs to be dataType: 'json', (not 'text')
    – user3559349
    Commented Mar 18, 2015 at 6:04

1 Answer 1

4

You are not return JSON from method GetData. Do this way to return JSON

public JsonResult GetData()
   { 
       var data = new[] {
          new { indicator= "X", total = 100 },
          new { indicator= "Y", total = 200 },
          new { indicator= "Z", total = 300 }
       };

           return  Json(data,JsonRequestBehavior.AllowGet);
   }

And make ajax call like:

 $.ajax({
         cache: false,
         type: "GET",
         url:URL,
         dataType: 'json',
         success: function (result)
         {
           console.log(result);
         },
         error: function (xhr, ajaxOptions, thrownError)
         {
          alert('Failed to retrieve data.');                    
         }
       });
4
  • 3 errors to fix: It needs to be return Json(data, JsonRequestBehavior.AllowGet);, the ajax option needs to be dataType: 'json', and in the success callback, it needs to be data: { type: 'bar', json: dataa, ...
    – user3559349
    Commented Mar 18, 2015 at 6:10
  • @StephenMuecke : Thanks a lot ... You both are life savers Commented Mar 18, 2015 at 6:21
  • @111 : How can fill the above data array dynamically from a type of Dictonary<string,int>. I need to fetch data from DB and display. Commented Mar 18, 2015 at 8:52
  • You can use JavaScriptSerializer for that. Reference: msdn.microsoft.com/en-us/library/…. var jsSerializer = new JavaScriptSerializer(); var serialized = jsSerializer.Serialize(data);
    – 111
    Commented Mar 18, 2015 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.