Dynamic Categories and Data

Apr 6, 2012 at 4:16 PM

Following along with the demo package I am trying to create a Bar chart that will have Occupation titles and their respective median wage.

This is in a non-MVC ASP.NET 4.0 website.

I have verified that I am returning the occupation title and wage data correctly from the database. What I see in the chart is the categories as one entire string on each "bar" and also linear values on each bar item (1, 2, 3, 4, etc). The text is really jumbled up. When I hover over the bar to get the tooltip the occupation title is the entire chartCategories2 string instead of just the one for that value. Here is my attempt so far:

        Dim data2 As New Dictionary(Of String, Integer)
        For i As Integer = 0 To dt2.Rows.Count - 1
            data2.Add("""" + dt2.Rows(i)("soctitle") + """", dt2.Rows(i)("median"))

        'Dim chartData2 As Object() = New Object(data2.Count - 1) {}
        Dim chartCategories2 As String = String.Empty
        Dim chartData2 As String = String.Empty
        chartCategories2 = String.Join(",", data2.Keys)
        chartData2 = String.Join(",", data2.Values)
        'Dim x2 As Integer = 0
        'For Each pair2 As KeyValuePair(Of String, Integer) In data2
        '    chartData2.SetValue(pair2.Value, x2)
        '    x2 += 1

        Dim chart2 As Highcharts = New Highcharts("chart2").InitChart(New Chart() With { _
         .Type = ChartTypes.Bar _
        }).SetTitle(New Title() With { _
         .Text = "MS Top Occupations By Median Annual Wage" _
        }).SetTooltip(New Tooltip() With { _
         .Formatter = "function() { return ''+ this.x +': $'+ this.y ; }" _
        }).SetXAxis(New XAxis() With { _
          .Categories = New String() {chartCategories2}, _
          .Title = New XAxisTitle() With { _
           .Text = String.Empty _
          } _
        }).SetSeries(New Series() With { _
         .Data = New Helpers.Data(New Object() {chartData2}), _
         .Name = "Mississipi"
        ltrChart2.Text = chart2.ToHtmlString()

Apr 6, 2012 at 6:33 PM
Edited Apr 6, 2012 at 6:34 PM

It appears as though the chartCategories string is being encapsulated in single quotes such that it looks like:

'"Aerospace Engineers","Electrical Engineers","Civil Engineers","Materials Engineers","Petroleum Engineers","Chemical Engineers","Electronics Engineers, Except Computer","Mechanical Engineers","Environmental Engineers","Industrial Engineers","Architects, Except Landscape and Naval","Health and Safety Engineers, Except Mining Safety","Landscape Architects","Electrical and Electronic Engineering Technicians","Mechanical Drafters","Mechanical Engineering Technicians","Cartographers and Photogrammetrists","Electrical and Electronics Drafters","Industrial Engineering Technicians","Environmental Engineering Technicians","Architectural and Civil Drafters","Surveyors","Civil Engineering Technicians","Surveying and Mapping Technicians"'

This is forcing HighCharts to think of it as one label. If I hard code in the above string as the xAxis categories (but without the encapuslating single quotes) the chart renders as desired.
I am not sure how to fix this "in-code" however. I will not know what categories I am going to receive so I cannot hardcode (hardcoding is bad anyway).

Jun 6, 2012 at 11:23 AM

Im having a similar problem in that when I have null values in my data (to indicate no data is present in a timeseries) it wraps the word null with single quotes... did you get this resolved?


Jun 6, 2012 at 11:40 AM

sorted it by converting my data list of type string to a data list of type object (ie using a null object rather than a null string)