using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult Renderer()
        {
            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();
        }      
    }
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering

<script type="text/javascript">

    function renderChart() {

        // Draw the flow chart
        var ren = this.renderer,
            colors = Highcharts.getOptions().colors,
            rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
            leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];



        // Separator, client from service
        ren.path(['M', 120, 40, 'L', 120, 330])
            .attr({
                'stroke-width': 2,
                stroke: 'silver',
                dashstyle: 'dash'
            })
            .add();

        // Separator, CLI from service
        ren.path(['M', 420, 40, 'L', 420, 330])
            .attr({
                'stroke-width': 2,
                stroke: 'silver',
                dashstyle: 'dash'
            })
            .add();

        // Headers
        ren.label('Web client', 20, 40)
            .css({
                fontWeight: 'bold'
            })
            .add();
        ren.label('Web service / CLI', 220, 40)
            .css({
                fontWeight: 'bold'
            })
            .add();
        ren.label('Command line client', 440, 40)
            .css({
                fontWeight: 'bold'
            })
            .add();

        // SaaS client label
        ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
            .attr({
                fill: colors[0],
                stroke: 'white',
                'stroke-width': 2,
                padding: 5,
                r: 5
            })
            .css({
                color: 'white'
            })
            .add()
            .shadow(true);

        // Arrow from SaaS client to Phantom JS
        ren.path(rightArrow)
            .attr({
                'stroke-width': 2,
                stroke: colors[3]
            })
            .translate(95, 95)
            .add();

        ren.label('POST options in JSON', 90, 75)
            .css({
                fontSize: '10px',
                color: colors[3]
            })
            .add();

        ren.label('PhantomJS', 210, 82)
            .attr({
                r: 5,
                width: 100,
                fill: colors[1]
            })
            .css({
                color: 'white',
                fontWeight: 'bold'
            })
            .add();

        // Arrow from Phantom JS to Batik
        ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
            .attr({
                'stroke-width': 2,
                stroke: colors[3]
            })
            .add();

        ren.label('SVG', 255, 120)
            .css({
                color: colors[3],
                fontSize: '10px'
            })
            .add();

        ren.label('Batik', 210, 200)
            .attr({
                r: 5,
                width: 100,
                fill: colors[1]
            })
            .css({
                color: 'white',
                fontWeight: 'bold'
            })
            .add();

        // Arrow from Batik to SaaS client
        ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
            'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
            .attr({
                'stroke-width': 2,
                stroke: colors[3]
            })
            .add();

        ren.label('Rasterized image', 100, 110)
            .css({
                color: colors[3],
                fontSize: '10px'
            })
            .add();

        // Browser label
        ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
            .attr({
                fill: colors[0],
                stroke: 'white',
                'stroke-width': 2,
                padding: 5,
                r: 5
            })
            .css({
                color: 'white',
                width: '100px'
            })
            .add()
            .shadow(true);



        // Arrow from Browser to Batik
        ren.path(rightArrow)
            .attr({
                'stroke-width': 2,
                stroke: colors[1]
            })
            .translate(95, 205)
            .add();

        ren.label('POST SVG', 110, 185)
            .css({
                color: colors[1],
                fontSize: '10px'
            })
            .add();

        // Arrow from Batik to Browser
        ren.path(leftArrow)
            .attr({
                'stroke-width': 2,
                stroke: colors[1]
            })
            .translate(95, 215)
            .add();

        ren.label('Rasterized image', 100, 215)
            .css({
                color: colors[1],
                fontSize: '10px'
            })
            .add();

        // Script label
        ren.label('Script', 450, 82)
            .attr({
                fill: colors[2],
                stroke: 'white',
                'stroke-width': 2,
                padding: 5,
                r: 5
            })
            .css({
                color: 'white',
                width: '100px'
            })
            .add()
            .shadow(true);

        // Arrow from Script to PhantomJS
        ren.path(leftArrow)
            .attr({
                'stroke-width': 2,
                stroke: colors[2]
            })
            .translate(330, 90)
            .add();

        ren.label('Command', 340, 70)
            .css({
                color: colors[2],
                fontSize: '10px'
            })
            .add();

        // Arrow from PhantomJS to Script
        ren.path(rightArrow)
            .attr({
                'stroke-width': 2,
                stroke: colors[2]
            })
            .translate(330, 100)
            .add();

        ren.label('Rasterized image', 330, 100)
            .css({
                color: colors[2],
                fontSize: '10px'
            })
            .add();


    }


</script>

@{ var chartOptions =
      new Highcharts
      {
          Chart = new Highsoft.Web.Mvc.Charts.Chart
          {
              Events = new ChartEvents
              {
                  Load = "renderChart"
              }
          },
          Title = new Title
          {
              Text = "Highcharts export server overview"
          }

      };

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

@Html.Raw(renderer.RenderHtml())