Using Json in HighCharts

Question

I am using a ViewModel to create the series as follows:

namespace AESSmart.ViewModels
{
  public class HighChartsPoint
  {
    public double x { set; get; }
    public double y { set; get; }
    public string color { set; get; }
    public string id { set; get; }
    public string name { set; get; }
  }

  public class HighChartsSeries
  {
    public List<HighChartsPoint> data { set; get; }
    public string name { set; get; }
    public string type { set; get; }
  }

  public class HomeIndexViewModel
  {
    public string HCSeries {get;set;}

    public void setChartData()
    {
      List<HighChartsSeries> allSeries = new List<HighChartsSeries>();
      List<HighChartsPoint> allPoint = new List<HighChartsPoint>();

      allPoint.Add(new HighChartsPoint { x = 49.9, y = 1 });
      allPoint.Add(new HighChartsPoint { x = 71.5, y = 2 });
      allPoint.Add(new HighChartsPoint { x = 106.4, y = 3 });
      allPoint.Add(new HighChartsPoint { x = 129.2, y = 4 });

      allSeries.Add(new HighChartsSeries { 
        data = new List<HighChartsPoint>(allPoint), 
        name = "Series 1", 
        type = "column" 
      });

      JavaScriptSerializer oSerializer = new JavaScriptSerializer();
      HCSeries = oSerializer.Serialize(allSeries);
    }
  }
}

Then in my view I am setting the series: @Model.HCSeries like so:

@section HeadContent {
  <script type="text/javascript">
    var chart;
    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: {
          renderTo: "container4",
          type: "column",
        },
        series: @Model.HCSeries
      });
    });
  </script>
}

When I run the program it is not displaying the HighChart. If I look at the view source it looks like the following:

<script type="text/javascript">
  (function ($) { // encapsulate jQuery
    var chart;
      $(document).ready(function () {
        chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container4',
            type: 'column'
          },
          series: [[{&quot;data&quot;:[
            {&quot;x&quot;:49.9,&quot;y&quot;:1,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:71.5,&quot;y&quot;:2,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:106.4,&quot;y&quot;:3,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null},
            {&quot;x&quot;:129.2,&quot;y&quot;:4,&quot;color&quot;:null,&quot;id&quot;:null,&quot;name&quot;:null}],
            &quot;name&quot;:&quot;Series 1&quot;,
            &quot;type&quot;:&quot;column&quot;}]]
        });
      });
  })(jQuery);
</script>

If I manually enter the data directly into the view then the chart does display. However, I will be needing to create the series dynamically. What do I need to do to fix my code so that the chart will display?

Answer 1

I think this is because your serialized JSON contains " instead of ".

Try this:

HCSeries = @Html.Raw(oSerializer.Serialize(allSeries));