Using HighCharts and DotNet.HighCharts to “Play” M

Question

I have a set of series that I have created using VB.NET and DotNet.HighCharts:

Dim SeriesList4As New List(Of Series)(stfipsList4.Count)

What I want to have happen is something similar to http://jsfiddle.net/8M2fF/ except I want to be able to pass in multiple series without knowing before hand how many I have.

The VB code that created that example above is this:

        Dim stfipsList4 = (From r In dt4.AsEnumerable() Select r("areaname")).Distinct().ToList()
        Dim SeriesList4 As New List(Of Series)(stfipsList4.Count)
        Dim seriesItem4(stfipsList4.Count) As Series
        Dim xDate4 As DateTime
        Dim fakeDate4 As String
        Dim sX4 As Integer

        sX4 = 1
        For Each state In stfipsList4
            Dim data As New Dictionary(Of DateTime, Decimal)
            Dim stateVal As String = state.ToString
            Dim recCount As Integer = dt4.Rows.Count - 1
            Dim seriesPointCount As Integer = dt4.Compute("Count(population)", "areaname = '" + stateVal + "'")
            Dim chartData As Object(,) = New Object(seriesPointCount - 1, 1) {}
            Dim x As Integer = 0
            For i As Integer = 0 To recCount
                If dt4.Rows(i)("areaname").ToString = stateVal Then
                    fakeDate4 = "1/1/" + dt4.Rows(i)("periodyear").ToString
                    xDate4 = DateTime.Parse(fakeDate4)
                    chartData.SetValue(xDate4.Date, x, 0)
                    chartData.SetValue(dt4.Rows(i)("population"), x, 1)
                    x += 1
                End If

            Next

            seriesItem4(sX4) = New Series With {
                        .Name = state.ToString, _
                        .Data = New Helpers.Data(chartData)
            }

            SeriesList4.Add(seriesItem4(sX4))

            sX4 = sX4 + 1
        Next

        Dim iterateData As String = JsonSerializer.Serialize(seriesItem4(1))

            Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _
                .[Global] = New [Global]() With { _
                        .UseUTC = False _
                    } _
                }).InitChart(New Chart() With { _
                 .DefaultSeriesType = ChartTypes.Column, _
                 .MarginRight = 10, _
                 .Events = New ChartEvents() With { _
                  .Load = "ChartEventsLoad" _
                 } _
                }).SetTitle(New Title() With { _
                 .Text = "Population" _
                }).SetTooltip(New Tooltip() With { _
                    .Formatter = "function() { return '<b>' + this.series.name + '<br/>' + Highcharts.dateFormat('%Y', this.x) +'</b>: '+ Highcharts.numberFormat(this.y, 0, ','); }" _
                }).SetXAxis(New XAxis() With { _
                 .Type = AxisTypes.Datetime, _
                 .TickPixelInterval = 150 _
                }).SetYAxis(New YAxis() With { _
                       .Min = 0, _
                       .Title = New YAxisTitle() With { _
                        .Text = "Population", _
                        .Align = AxisTitleAligns.High _
                        } _
                }).SetSeries(New Series() With { _
                     .Data = New Helpers.Data(New Object() {}) _
                }) _
                .SetOptions(New Helpers.GlobalOptions() With { _
                .Colors = palette_colors _
                }) _
                .AddJavascripVariable("iterated", iterateData.ToString) _
                .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _
                                  " var result = iterated.data;" & vbCr & vbLf & _
                                  " var counter = 0;" & vbCr & vbLf & _
                                  " var series = this.series[0];" & vbCr & vbLf & _
                                  " var loopseries = function() {" & vbCr & vbLf & _
                                  " if (counter <= result.length) {" & vbCr & vbLf & _
                                  " var p = String(result[counter]);" & vbCr & vbLf & _
                                  " var splitp = p.split("","");" & vbCr & vbLf & _
                                  " var x = Number(splitp[0]);" & vbCr & vbLf & _
                                  " var y = Number(splitp[1]);" & vbCr & vbLf & _
                                  " series.addPoint([x, y], true, series.points.length > 10, true);" & vbCr & vbLf & _
                                  " counter++;" & vbCr & vbLf & _
                                  " } else {" & vbCr & vbLf & _
                                  " clearInterval(loopseries);" & vbCr & vbLf & _
                                  " }};" & vbCr & vbLf & _
                                  " setInterval(loopseries, 300);")

        ltrChart4.Text = chart4.ToHtmlString()

This is just for a single series. I would like to pass in a List(Of Series). Things that need to be involved: Creating n number of series Adding points to each series Naming each series

I can handle those items it is just passing in the master series "list" that I cannot accomplish.

EDIT: There seems to be some confusion on what I am asking. I am able to pass N number of series to HighCharts via the DotNet.HighCharts API. What I am not currently able to do is pass this same set of series to the javascript function to loop through and "play" the series. Please see:

            .AddJavascripVariable("iterated", iterateData.ToString) _
            .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _
                              " var result = iterated.data;" & vbCr & vbLf & _
                              " var counter = 0;" & vbCr & vbLf & _
                              " var series = this.series[0];" & vbCr & vbLf & _
                              " var loopseries = function() {" & vbCr & vbLf & _
                              " if (counter <= result.length) {" & vbCr & vbLf & _
                              " var p = String(result[counter]);" & vbCr & vbLf & _
                              " var splitp = p.split("","");" & vbCr & vbLf & _
                              " var x = Number(splitp[0]);" & vbCr & vbLf & _
                              " var y = Number(splitp[1]);" & vbCr & vbLf & _
                              " series.addPoint([x, y], true, series.points.length > 10, true);" & vbCr & vbLf & _
                              " counter++;" & vbCr & vbLf & _
                              " } else {" & vbCr & vbLf & _
                              " clearInterval(loopseries);" & vbCr & vbLf & _
                              " }};" & vbCr & vbLf & _
                              " setInterval(loopseries, 300);")

The .AddJavaScriptVariable expects a string and in-lining the code is giving me invalid object references.

Answer 1

I actually use DotNet.Highcharts to create a chart that has an undefined number of series. To do this I query for the data I need to add to the chart using linq. I use a list of object[] to create the individual points then I take that list and add it to a list of Series. I iterate through the loop as many times as I need to get all of the Series. Then for SetSeries I assign what was contained in the Series list. The code is written in C# but I am sure you can change it to VB.NET. Here is the entire ActionResult I use for creating the chart:

public ActionResult CombinerBarToday(DateTime? utcStartingDate = null,
                                     DateTime? utcEndingDate = null)
{
    //GET THE GENERATED POWER READINGS FOR THE SPECIFIED DATETIME
    var firstQ = from s in db.PowerCombinerHistorys
                 join u in db.PowerCombiners on s.combiner_id equals u.id
                 where s.recordTime >= utcStartingDate
                 where s.recordTime <= utcEndingDate
                 select new
                 {
                     CombinerID = u.name,
                     Current = s.current,
                     RecordTime = s.recordTime,
                     Voltage = s.voltage,
                     Watts = (s.current * s.voltage)
                 };

    //GET A LIST OF THE COMBINERS CONTAINED IN THE QUERY
    var secondQ = (from s in firstQ
                   select new
                   {
                        Combiner = s.CombinerID
                   }).Distinct();

    /* THIS LIST OF SERIES WILL BE USED TO DYNAMICALLY ADD AS MANY SERIES 
     * TO THE HIGHCHARTS AS NEEDED WITHOUT HAVING TO CREATE EACH SERIES INDIVIUALY */
    List<Series> allSeries = new List<Series>();

    TimeZoneInfo easternZone = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

    //LOOP THROUGH EACH COMBINER AND CREATE SERIES
    foreach (var distinctCombiner in secondQ)
    {
        var combinerDetail = from s in db2.PowerCombinerHistorys
                 join u in db2.PowerCombiners on s.combiner_id equals u.id
                 where u.name == distinctCombiner.Combiner
                 where s.recordTime >= utcStartingDate
                 where s.recordTime <= utcEndingDate
                 select new
                 {
                     CombinerID = u.name,
                     Current = s.current,
                     RecordTime = s.recordTime,
                     Voltage = s.voltage,
                     Watts = (s.current * s.voltage) / 1000d
                 };


        var results = new List<object[]>();

        foreach (var detailCombiner in combinerDetail)
        {
            results.Add(new object[] { 
                            TimeZoneInfo.ConvertTimeFromUtc(detailCombiner.RecordTime, easternZone), 
                            detailCombiner.Watts });
        }

        allSeries.Add(new Series
        {
            Name = distinctCombiner.Combiner,
            //Data = new Data(myData)
            Data = new Data(results.ToArray())

        });
    }

    Highcharts chart = new Highcharts("chart")
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Spline, ZoomType = ZoomTypes.X})
    .SetTitle(new Title { Text = "Combiner History" })
    .SetSubtitle(new Subtitle { Text = "Click and drag in the plot area to zoom in" })
    .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })
    .SetPlotOptions(new PlotOptions
    {
        Spline = new PlotOptionsSpline
        {
            LineWidth = 2,
            States = new PlotOptionsSplineStates { Hover = new PlotOptionsSplineStatesHover { LineWidth = 3 } },
            Marker = new PlotOptionsSplineMarker
            {
                Enabled = false,
                States = new PlotOptionsSplineMarkerStates
                {
                    Hover = new PlotOptionsSplineMarkerStatesHover
                    {
                        Enabled = true,
                        Radius = 5,
                        LineWidth = 1
                    }
                }
            }
        }
    })
    .SetXAxis(new XAxis
    {
        Type = AxisTypes.Datetime,
        Labels = new XAxisLabels
        {
            Rotation = -45,
            Align = HorizontalAligns.Right,
            Style = "font: 'normal 10px Verdana, sans-serif'"
        },
        Title = new XAxisTitle { Text = "Time(Hour)" },
    })
    .SetYAxis(new YAxis
    {
        Title = new YAxisTitle { Text = "Kilowatt" }
    })

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

    return PartialView(chart);
}