Setting the Series to an Array of Series

Jan 23, 2012 at 3:15 PM

Maybe I'm missing something here but I cannont figure out how to set the series to an array of series.  For example, this code snippet is taken from the "column basic" example on the HighCharts demo page (http://www.highcharts.com/demo/column-basic):

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         defaultSeriesType: 'column'
      },
//Config options removed for sake of brevity
 series: [{
         name: 'Tokyo',
         data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }, {
         name: 'New York',
         data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
      }, {
         name: 'London',
         data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
      }, {
         name: 'Berlin',
         data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
      }]
   });
});

The series is an array of series objects, but I cannot figure out how to do this with DotNet.HighCharts.  I can use .SetSeries, but that only sets one series, I need to add multiple series.  I tried to loop through adding series 1 by 1, but as I expected it just kept over writing the last series; there is no .AddSeries function.

I finally got it to work like I wanted but had to kind of hack it.  Below is a snippet of my code in VB (you can convert it to C# here - http://www.developerfusion.com/tools/convert/vb-to-csharp/):

Dim sql = "SELECT [pg] As [Page Name], Count([pg]) as [Page Visits] FROM [tblPageTracking] Group by [pg]"
Dim dt As New DataTable
Dim da As New SqlDataAdapter(sql, conn)
da.Fill(dt)
da.Dispose()
conn.Close()

'initChart() is a function the returns a chart with the options configured but no series set.
Dim chart As Highcharts = initChart()
Dim seriesArray(dt.Rows.Count - 1) As Object
Dim i As Integer = 0

For Each drow As DataRow In dt.Rows
    Dim s As New Series
    s.Name = drow("Page Name")
    s.Data = New Data(New Object() {drow("Page Visits")})
    seriesArray(i) = s
    i = i + 1
Next

Dim ser As New Series
ser.Data = New Data(seriesArray)

chart.SetSeries(ser)
'The "hack" to get it to work...
Dim str As String = chart.ToHtmlString().Replace("series: [{ data:", "series:").Replace("}] }]", "}]")

litChart.Text = str

I understand why I have to do that, but I cannot figure out a way around it.

By the way, great project and I appreciate all of your hard work.

 

Coordinator
Jan 23, 2012 at 7:16 PM

Hi,

To add data to the charts you have possibility to add single serie: SetSeries(Series series) or array of series: SetSeries(Series[] seriesArray)

If for example this is your data table:

 

DataTable dt = new DataTable();

dt.Columns.Add("PageName", typeof(string));
dt.Columns.Add("PageVisits", typeof(object[]));


dt.Rows.Add("Page 1", new object[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 });
dt.Rows.Add("Page 2", new object[] { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 });
dt.Rows.Add("Page 3", new object[] { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 });

 

You can get the series like this: 

 

Dim series As Series() = New Series(dt.Rows.Count - 1) {}
For i As Integer = 0 To dt.Rows.Count - 1
	series(i) = New Series() With { _
		Key .Name = dt.Rows(i)("PageName").ToString(), _
		Key .Data = New Data(DirectCast(dt.Rows(i)("PageVisits"), Object())) _
	}
Next

 

Then you can create the chart with the series:

Dim chart As New Highcharts("chart")
chart.SetSeries(series)
I hope the code will work because I used the online converter.

Regards,

Vangi

Marked as answer by Vangi on 10/24/2013 at 2:54 AM
Jan 23, 2012 at 8:13 PM
Edited Jan 24, 2012 at 5:58 PM

Thanks!

That worked great. I knew I was missing something - I didn't know you could declare a Series as an array:

 

Dim series As Series() = New Series(dt.Rows.Count - 1) {}
For anyone who is using VB here is the refined code that worked (those online converters don't always work perfectly):
sql = "SELECT [pg] As [Page Name], Count([pg]) as [Page Visits] FROM [tblPageTracking] Group by [pg]"
Dim dt As New DataTable
Dim da As New SqlDataAdapter(sql, conn)
da.Fill(dt)
da.Dispose()
conn.Close()

Dim chart As Highcharts = initChart()

Dim series As Series() = New Series(dt.Rows.Count - 1) {}
For i As Integer = 0 To dt.Rows.Count - 1
    series(i) = New Series() With { _
        .Name = dt.Rows(i)("Page Name").ToString(), _
        .Data = New Data(New Object() {dt.Rows(i)("Page Visits")})}
 Next

 chart.SetSeries(series)
 litChart.Text = chart.ToHtmlString()

Thanks again!
Mar 12, 2012 at 7:35 PM

Hi zgood,

With the vb code block you posted, how do you actually get the chart to group by "pg" (i.e page1, page2, page3). Can't find where that happens anywhere within the codeblock.

 

Please revert.

 

Thanks

 

Ayodeji Lawrence

Mar 12, 2012 at 7:35 PM

Hi zgood,

With the vb code block you posted, how do you actually get the chart to group by "pg" (i.e page1, page2, page3). Can't find where that happens anywhere within the codeblock.

 

Please revert.

 

Thanks

 

Ayodeji Lawrence