Send JSON data to highcharts pie from asp.net MVC controller in C#

Question

I want to send json data from my asp.net MVC controller in C# and use those datas to draw a highcharts pie chart.

So for the moment I use this:

Dictionary<string, double> result = new Dictionary<string, double>();
result.Add("test1", 45);
result.Add("test2", 64);

var jsonResult = Json(new
{
    graphDivId = "divGraph",
    legend = "A legend",
    stats = result ,
});

jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return jsonResult;

but when I received data by an ajax call in jquery I have this:

stats:[{"Key":"test1","Value":45},{"Key":"test2","Value":64}]

but I need this:

stats:[["test1",45],["test2",64]]

Any ideas?

Answer 1

I was playing with this a little this morning and I came up with what i have below-- but it won't work because you'll get [{x:"testx", y:60}....]. So that's no good. You might be able to use it though and override a ToJSON method on the SimpleClass.

One other thought I had (and I'm not sure it would work) is to have a collection of ArrayList's. Since ArrayList's are not strongly type, you can add a string and double property to them.

Let me know how this turns out.

What if you used a list of Simple objects. You might be able to use a key value pair or some other existing class. But you could create a simple class which will hold your data.

   class SimpleClass{
       public int x{set; get;}
       public double y{set; get;}
   } 

    var results = new List<SimpleClass>();
    results.Add(new SimpleClass{x="test3", y=42});        
    results.Add(new SimpleClass{x="test2", y=99});

Answer 2

perfect ek_ny !

Thanks to your help I found how to do also without a specific class:

var results = new List<List<object>>();
results.Add(new List<object>(new object[]{"test1", 45}));
results.Add(new List<object>(new object[]{"test2", 99}));

Answer 3

Another thing nice to know.

highcharts series.data is a point object which you can represent by this in C#:

class HighChartsPoint
{
    public double x {set; get;}
    public double y {set; get;}
    public string color {set; get;}
    //public HighChartsEvent events{set; get;}
    public string id {set; get;}
    //public HighChartsMarker marker {set; get;}
    public string name {set; get;}
    public bool sliced {set; get;}
} 

reference: http://www.highcharts.com/ref/#point

ek_ny class is a part of point object representation. events and marker is commented because it's another class to write. Representation of it is there:

events: http://www.highcharts.com/ref/#point-events

marker: http://www.highcharts.com/ref/#point-marker

So now you can use it like that:

var results = new List<HighChartsPoint>();
results.Add(new HighChartsPoint {
          name="test3", 
          y=42, 
          color="red", 
          id="someid", 
          sliced=false 
        });

var jsonResult = Json(results);
jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
return jsonResult;

Hope it help...

Answer 4

Just in case. Highcharts can't display chart if value are set to null. And Json method of asp.net mvc controler class can't filter null value.

For that you can use json.net library and create, for example, a JsonNetResult (inherit from ActionResult):

public class JsonNetResult : ActionResult
    {

        public Encoding ContentEncoding { get; set; }
        public string ContentType { get; set; }
        public object Data { get; set; }        
        public JsonSerializerSettings SerializerSettings { get; set; }
        public Formatting Formatting { get; set; }

        public JsonNetResult()
        {
            SerializerSettings = new JsonSerializerSettings();
        }

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
                throw new ArgumentNullException("context");
            HttpResponseBase response = context.HttpContext.Response;
            response.ContentType = !string.IsNullOrEmpty(ContentType)
              ? ContentType
              : "application/json";

            if (ContentEncoding != null)
                response.ContentEncoding = ContentEncoding;

            if (Data != null)
            {
                JsonTextWriter writer = new JsonTextWriter(response.Output) { Formatting = Formatting };
                JsonSerializer serializer = JsonSerializer.Create(SerializerSettings);
                serializer.Serialize(writer, Data);
                writer.Flush();
            }
        }
    }

and then add this method to your controler to replace Json method of asp.net mvc:

protected JsonNetResult JsonNet(object data, bool needDefaultSettings)
        {
            var result = new JsonNetResult();
            result.Data = data;

            if (needDefaultSettings)
            {
                var defaultSettings = new JsonSerializerSettings
                {
                    NullValueHandling = NullValueHandling.Ignore,
                    DefaultValueHandling = DefaultValueHandling.Ignore
                };
                result.SerializerSettings = defaultSettings;
            }

            return result;
        }

So now you can use it in your controler action like that:

public JsonNetResult MyAction()
{
    MyClass myObject = new MyClass();
    return JsonNet(myObject);
}

Ah and an other thing, don't hesitate to use Json.Net DefaultValue attribute on MyClass properties:

[DefaultValue(null)]