score:5

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);
}

Related Query

More Query from same tag