Add data

Two steps are required to add data:

1. Getting data in your chart.
2. Define data.

1. Getting data in your chart
To add data to the chart, use Series property inside Highcharts object. For example:

…
 @{var chartOptions = new Highcharts
    {
        Title = new Title
        {
            Text = "US and USSR nuclear stockpiles"
        },
        Subtitle = new Subtitle
        {
            Text = "Source: thebulletin.metapress.com"
        },

        XAxis = new List
    {
                new XAxis
                {
                    AllowDecimals = false,
                    Labels = new XAxisLabels
                    {
                        Formatter = "formatXAxis"
                    }

                }
            },
        YAxis = new List
    {
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Nuclear weapon states"
                    },
                    Labels = new YAxisLabels
                    {
                        Formatter = "formatYAxis"
                    }
                }
            },
        Tooltip = new Tooltip
        {
            PointFormat = "{series.name} produced {point.y:,.0f}
warheads in {point.x}"
        },
        PlotOptions = new PlotOptions
        {
            Area = new PlotOptionsArea
            {
                PointStart = 1940,
                Marker = new PlotOptionsAreaMarker
                {
                    Enabled = false,
                    Symbol = "circle",
                    Radius = 2,
                    States = new PlotOptionsAreaMarkerStates
                    {
                        Hover = new PlotOptionsAreaMarkerStatesHover
                        {
                            Enabled = true
                        }
                    }
                }

            }
        },
        Series = new List
    {
                new AreaSeries
                {
                    Name = "USA",
                    Data =  as List

                },
                new AreaSeries
                {
                    Name = "USSR/Russia",
                    Data =  as List
                }
            }
    };


    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())
…

The data defined in the series comes directly from the Controller, using the ViewData ASP.NET MVC mechanism (you can also use ViewBag or define the data directly in the View).

2. Define data
To define data, you can either pass it from the controller to the chart in the view or use a fixed data in the view.

A. Passing data from the controller to the chart view
This step is to get the data and pass it to the View. This is done in the Controller which is responsible for the View using the chart. This process would involve database query, but for the sake of simplicity, fixed data is used.

Go to your controller file and define the Controller for the View and make sure you create a List<AreaSeriesData> with values corresponding to the points you need. If you are using other chart types, e.g. “Line” instead of “Area”, the collection becomes List<LineSeriesData>. You can add any number of points to the collection and then set the ViewData for the respective item to the instance of the collection you need. This will later be used by the View and the chart itself to get the data, for example:

…
public ActionResult AreaBasic()
        {
            List<double?> usaValues = new List<double?> {
                null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 };
            List<double?> russiaValues = new List<double?> {
                null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000 };
            List<AreaSeriesData> usaData = new List<AreaSeriesData>();
            List<AreaSeriesData> russiaData = new List<AreaSeriesData>();
            usaValues.ForEach(p => usaData.Add(new AreaSeriesData { Y = p }));
            russiaValues.ForEach(p => russiaData.Add(new AreaSeriesData { Y = p }));
            ViewData["usaData"] = usaData;
            ViewData["russiaData"] = russiaData;
            return View();
        }
…

The result of this example is:

B. Use a fixed data in the view
The method described above is the most common way to define data. However, you can also define data directly in the View, as shown here:

...
@{var chartOptions = new Highcharts
{
...
    Series = new List<Series>
    {
                new ColumnSeries
                {
                    Name = "Brands",
                    ColorByPoint = true,
                    Data = new List
                    {
                        new ColumnSeriesData { Name = "Microsoft Internet Explorer", Y = 56.3, Drilldown = "Microsoft Internet Explorer" },
                        new ColumnSeriesData { Name = "Chrome", Y = 24.03, Drilldown = "Chrome" },
                        new ColumnSeriesData { Name = "Firefox", Y = 10.3, Drilldown = "Firefox" },
                        new ColumnSeriesData { Name = "Sfari", Y = 4.77, Drilldown = "Safari" },
                        new ColumnSeriesData { Name = "Opera", Y = 0.91, Drilldown = "Opera" },
                        new ColumnSeriesData { Name = "Proprietary or Undetectable", Y = 0.2, Drilldown = null }
                    }
                }
    },
...
}

In this case, we are creating a column chart with six columns, representing browser market share each column with its own name and value.
And this is the chart that is produced by this View: