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);
}
Source: stackoverflow.com
Related Query
- Using HighCharts and DotNet.HighCharts to "Play" Multiple Series
- Strange behavior with highcharts when using "column" type and multiple datetime series
- Highcharts with JSON data and multiple series
- Highcharts problem with xAxis using multiple series
- Change chart type and redraw with multiple series in Highcharts
- Highcharts shared tooltip between charts with multiple series and shared tooltip
- Highcharts show the same yAxis start and end value with multiple data series
- Highcharts - how to create multiple y axis and group the data series
- Charts using Highcharts with multiple series from JSON
- highcharts change chart type using dropdown for multiple series
- How to draw multiple highcharts using highcharts-ng and angularjs
- How could you supply multiple series to a line chart in R shiny using highcharter package and without hardcoding the series?
- Adding multiple series to the spline chart using dotnet high charts in asp.net mvc3
- Basic Highcharts Multiple Series Chart Using JSON
- Highcharts multiple series and axes types overlapping
- Highcharts - three series using left Y axis and the fourth using the right Y axis
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Highcharts : using same div to load a chart multiple times with different series data
- HighCharts setting categories and series using JSON
- How to have multiple highcharts with different series data in vuejs without repeating code
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- Multiple categories and series in Highcharts
- Align second scatter series to the side similar to how column and bar charts do using HighCharts
- Need assistance adding an additional series to a Highcharts graph using a SharePoint list and PSServices
- Is it possible create a Highstock chart using TWO PANES and MULTIPLE SERIES in a pane
- Adding multiple dynamic series and axes via JSON into Highcharts
- Is there a solution to plot 3D multiple time line series in web application using highcharts or any other libraries
- Highcharts: create multiple series grouped my month and year using JSON data
- How to make multiple Y-axis with incoming series of data from database using Highcharts
- Highcharts hover delay and not rendering with multiple series
More Query from same tag
- Highcharts - how can I center labels on a datetime x-axis?
- Highcharts Line - When Y axis min is set to 0, connecting line isn't shown for consecutive 0 values
- how to apply text-align center property to highchart custom label
- Highcharts shared tooltip(for line series) - Change on hover ACCORDING TO PLOTBAND
- How Do I put Multiple Charts on the Same Graph rCharts High Charts
- Aggregate Total with Highcharts Line Chart
- Highcharts downsampling - CSV
- date highstock highchart
- Highchart bar scaling
- Highcharts - how to disable color change on mouseover/hover
- Javascript - Highcharts - input data array of arrays
- How to remove space in between bars in HighCharts bar chart?
- How to change color of single column in Highcharts column graph when data is in CSV form?
- Auto Refreshing Highcharts with PHP/JS
- Is highcharts sparkline with multiple series possible?
- highcharts-react-official rendering issue with React state
- Highcharts Gantt - Set max height and scrollbar on yAxis
- How can I add double related x-axis bar to high chart in zoom
- Highcharts: zero-align y-axes angular 6
- Highcharts backgroundColor for multiple charts is only applied to one chart
- Highcharts get table from range selected only
- Highcharts - Can it do this type of graph?
- HighCharts : How to add click event on colorAxis in heatmap
- Angular Highcharts hideNoData not working dynamically
- Per-cell border colors in a highcharts heat map
- Highcharts Spiderweb chart xAxis labels disappear on long label name
- Override tick interval calculation in Highcharts?
- React Highcharts with export functionality with 'react-highcharts'
- How to limit dataLabels in highcharts?
- Highcharts xAxis Categories not Dsiplaying Properly