How to use dotnet highcharts dll to show HighCharts in MVC3?

Question

I am trying a method to bind data to the Pie chart

  Public ActionResult Charts
  {
      Highcharts chart = new Highcharts("chart")
        .InitChart(new Chart { PlotShadow = false })
        .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
        .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
        .SetPlotOptions(new PlotOptions
        {
            Pie = new PlotOptionsPie
            {
                AllowPointSelect = true,
                Cursor = Cursors.Pointer,
                DataLabels = new PlotOptionsPieDataLabels
                {
                    Color = ColorTranslator.FromHtml("#000000"),
                    ConnectorColor = ColorTranslator.FromHtml("#000000"),
                    Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                }
            }
        })
        .SetSeries(new Series
        {
            Type = ChartTypes.Pie,
            Name = "Browser share",
            Data = new Data(new object[]
                                   {
                                       new object[] { "Firefox", 45.0 },
                                       new object[] { "IE", 26.8 },
                                       new DotNet.Highcharts.Options.Point
                                       {
                                           Name = "Chrome",
                                           Y = 12.8,
                                           Sliced = true,
                                           Selected = true
                                       },
                                       new object[] { "Safari", 8.5 },
                                       new object[] { "Opera", 6.2 },
                                       new object[] { "Others", 0.7 }
                                   })
                             });
        }
    }

    public JsonResult GetData()
    {
        int Param1;
        Param1 = 1;     
        var reports = db.ExecuteStoreQuery<ResourceReports>("ResourceReports @EmployeeID", new SqlParameter("@EmployeeID", Param1)).ToList();
        return Json(reports, JsonRequestBehavior.AllowGet);
    }

i want to replace

    .SetSeries(new Series
    {
        Type = ChartTypes.Pie,
        Name = "Browser share",
        Data = new Data(new object[]
                                   {
                                       new object[] { "Firefox", 45.0 },
                                       new object[] { "IE", 26.8 },
                                       new DotNet.Highcharts.Options.Point
                                       {
                                           Name = "Chrome",
                                           Y = 12.8,
                                           Sliced = true,
                                           Selected = true
                                       },
                                       new object[] { "Safari", 8.5 },
                                       new object[] { "Opera", 6.2 },
                                       new object[] { "Others", 0.7 }
                                   })
        });
    }

with my GetData() how can i do this,the Data in .SetSeries should be my returned data in GetData method

Answer 1

It appears you are using Dotnet.Highcharts. You could create a list of Series and a list of Point.

List<Series> mySeries = new List<Series>();
List<Point> myPoints = new List<Point>();

I would loop through each series you need to create and generate the point data like so:

myPoints.Add(new Point {
    X = (detailRec.RecordTime - new DateTime(1970, 1, 1, 0, 0, 0)).TotalMilliseconds,
    Y = detailRec.TotalCount
});

Then you could create the series itself using the list of points for its data like so:

mySeries.Add(new Series{
  Name = distinctDistrict.Name,
  Data = new Data(myPoints.ToArray())
});

Then to set the Series you could use the following statement:

.SetSeries(mySeries.Select(s => new Series { 
  Name = s.Name, 
  Data = s.Data 
}).ToArray())

If you use the object browser in Visual Studio, you can see the other properties and methods of the Series and Point class. To use the above code you will have to include the the following using statements:

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using Point = DotNet.Highcharts.Options.Point;