This project is read-only.

Multiple Series With Odd Behavior

May 7, 2012 at 10:02 PM

I am creating a simple chart that contains 3 series that are all linked by their X-value such that I can get a stacked bar + a scatter plot.

I am creating these series by looping over a DataTable like so:

        Dim chartData1 As String = String.Empty
        Dim chartData2 As String = String.Empty
        Dim chartData3 As String = String.Empty
        Dim Data1 As New Dictionary(Of String, Integer)
        Dim Data2 As New Dictionary(Of String, Integer)
        Dim Data3 As New Dictionary(Of String, Decimal)
        For i As Integer = 0 To dt.Rows.Count - 1
            Data1.Add(dt.Rows(i)("areaname"), dt.Rows(i)("unemp"))
            Data2.Add(dt.Rows(i)("areaname"), dt.Rows(i)("emplab"))
            Data3.Add(dt.Rows(i)("areaname"), dt.Rows(i)("unemprate"))
        Next

        Dim chartCategories2 = Data2.Keys.ToArray()

        Dim chartSeriesName1 As String = "Unemp"
        chartData1 = String.Join(",", Data1.Values)

        Dim chartSeriesName2 As String = "Emplab"
        chartData2 = String.Join(",", Data2.Values)

        Dim chartSeriesName3 As String = "Unemprate"
        chartData3 = String.Join(",", Data3.Values)

I am then setting the series points like:

        .SetSeries(New Series() {New Series() With { _
                  .Type = ChartTypes.Bar, _
                  .Name = chartSeriesName1, _
                  .Data = New Helpers.Data(New Object() {chartData1}) _
                 }, New Series() With { _
                  .Type = ChartTypes.Bar, _
                  .Name = chartSeriesName2, _
                  .Data = New Helpers.Data(New Object() {chartData2}) _
                 }, New Series() With { _
                  .Type = ChartTypes.Scatter, _
                  .YAxis = 1, _
                  .Name = chartSeriesName3, _
                  .Data = New Helpers.Data(New Object() {chartData3}) _
                 }})

What I get is the first series added that shows up correctly. But the 2nd and 3rd series data elements are actually just one long string. If I flip which series is first then the first one is correct and again the 2nd and 3rd are just a long single string. Here is the resulting JS that is produced:

 

Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });
var chart1;
$(document).ready(function() {
	chart1 = new Highcharts.Chart({
		chart: { renderTo:'chart1_container', height: 600, resetZoomButton: { position: { align: 'right', verticalAlign: 'top', x: 0, y: -30 } }, width: 590, zoomType: 'x' }, 
		legend: { enabled: false, layout: 'horizontal' }, 
		plotOptions: { bar: { stacking: 'normal' }, series: { shadow: true }, spline: { marker: { enabled: false } } }, 
		title: { text: 'Annual Unemployment Rate' }, 
		tooltip: { formatter: function() { var s = '<b>February 2008</b>';$.each(this.points, function(i, point) { s += '<br/>' + point.series.name + ': '+ point.y;}); return s; }, shared: true }, 
		xAxis: { categories: ['Alachua County', 'Baker County', 'Bay County', 'Bradford County', 'Brevard County', 'Broward County', 'Calhoun County', 'Charlotte County', 'Citrus County', 'Clay County', 'Collier County', 'Columbia County', 'DeSoto County', 'Dixie County', 'Duval County', 'Escambia County', 'Flagler County', 'Franklin County', 'Gadsden County', 'Gilchrist County', 'Glades County', 'Gulf County', 'Hamilton County', 'Hardee County', 'Hendry County', 'Hernando County', 'Highlands County', 'Hillsborough County', 'Holmes County', 'Indian River County', 'Jackson County', 'Jefferson County', 'Lafayette County', 'Lake County', 'Lee County', 'Leon County', 'Levy County', 'Liberty County', 'Madison County', 'Manatee County', 'Marion County', 'Martin County', 'Miami-Dade County', 'Monroe County', 'Nassau County', 'Okaloosa County', 'Okeechobee County', 'Orange County', 'Osceola County', 'Palm Beach County', 'Pasco County', 'Pinellas County', 'Polk County', 'Putnam County', 'Santa Rosa County', 'Sarasota County', 'Seminole County', 'St. Johns County', 'St. Lucie County', 'Sumter County', 'Suwannee County', 'Taylor County', 'Union County', 'Volusia County', 'Wakulla County', 'Walton County', 'Washington County'] }, 
		yAxis: [{ labels: { style: { color: '#89A54E' } }, title: { style: { color: '#89A54E' }, text: 'Labor Force' } }, { labels: { style: { color: '#4572A7' } }, opposite: true, title: { style: { color: '#4572A7' }, text: 'Unemployment Rate' } }], 
		exporting: { buttons: { exportButton: { x: 75, align: 'left' }, printButton: { x: 50, align: 'left' } }, filename: 'UnempRate', url: 'HighchartsExport.axd', width: 590 }, 
		series: [{ data: [4092,570,3896,473,13651,40830,221,4538,3641,4002,7504,1329,711,327,20790,6267,2466,189,994,328,216,314,247,509,1254,4399,2179,29091,353,3761,869,250,96,6664,18508,4773,864,116,359,7453,8227,3371,58368,1386,1474,3607,963,25735,6521,30869,11580,22039,13331,1794,2978,9318,10533,3743,8017,1347,747,454,193,12747,540,1220,490], name: 'Unemp', type: 'bar' },
{ data: ['125055,11410,80895,11696,250934,959044,5424,64997,52244,89756,143419,29621,14313,5069,414057,128343,28940,4351,19653,7351,4496,5790,4351,11419,16760,57821,39374,562415,8334,58814,20800,6448,2848,128141,270804,139444,15835,3605,6388,135635,128859,60013,1146119,45756,33902,89156,16340,568298,129423,589521,183242,419977,255720,29952,65700,156793,227783,90409,115055,28923,16177,8556,4926,239496,15077,27965,9053'], name: 'Emplab', type: 'bar' },
{ data: ['3.20,4.80,4.60,3.90,5.20,4.10,3.90,6.50,6.50,4.30,5.00,4.30,4.70,6.10,4.80,4.70,7.90,4.20,4.80,4.30,4.60,5.10,5.40,4.30,7.00,7.10,5.20,4.90,4.10,6.00,4.00,3.70,3.30,4.90,6.40,3.30,5.20,3.10,5.30,5.20,6.00,5.30,4.80,2.90,4.20,3.90,5.60,4.30,4.80,5.00,5.90,5.00,5.00,5.70,4.30,5.60,4.40,4.00,6.50,4.40,4.40,5.00,3.80,5.10,3.50,4.20,5.10'], name: 'Unemprate', type: 'scatter', yAxis: 1 }] }); });

How can I get all the series data points to show up just like the first one (as a list of numbers, not a string of numbers)?

I have tried to do something like:
 
        Dim chartData1 As New List(Of Integer)
        Dim chartData2 As New List(Of Integer)
        Dim chartData3 As New List(Of Decimal)
        Dim chartCategories2 As New List(Of String)
        For i As Integer = 0 To dt.Rows.Count - 1
            chartData1.Add(dt.Rows(i)("unemp"))
            chartData2.Add(dt.Rows(i)("emplab"))
            chartData3.Add(dt.Rows(i)("unemprate"))
            chartCategories2.Add(dt.Rows(i)("areaname"))
        Next
        Dim chartSeriesName1 As String = "Unemp"
        Dim chartSeriesName2 As String = "Emplab"
        Dim chartSeriesName3 As String = "Unemprate"
But I get an error about Parameter Mismatch.