How to bind dynamic data to highcharts in Windows Phone 8.1 application

Question

I'm developing an Windows Phone 8.1 application. I need to bind data from database to highcharts in this application. Quick help will be very helpful.

Thanks in advance. Vikrant

Answer 1

You can use JSON objects to populate the data in Highcharts, but a way that always worked for me was creating the highchart js with data source in the code behind, and then writing it to the page. I don't have a sample with me but it has worked for me in the past.

Answer 2

Place a literal in the HEAD section of your HTML page.

And in your code-behind (sorry this is in VB)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim stringBuilder = New StringBuilder()



    stringBuilder.Append("$(function () {")

    stringBuilder.Append("$('#container').highcharts({")

    stringBuilder.Append("title: {")

    stringBuilder.Append("text:   'Monthly Average Temperature',")

    stringBuilder.Append("x: -20 //center")

    stringBuilder.Append("},")

    stringBuilder.Append("subtitle: {")

    stringBuilder.Append("text:   'Source: WorldClimate.com',")

    stringBuilder.Append("x: -20")

    stringBuilder.Append(" },")

    stringBuilder.Append("xAxis: {")

    stringBuilder.Append("categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',")

    stringBuilder.Append("'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']")

    stringBuilder.Append("},")

    stringBuilder.Append("yAxis: {")

    stringBuilder.Append("title: {")

    stringBuilder.Append("text:   'Temperature (°C)'")

    stringBuilder.Append("},")

    stringBuilder.Append("plotLines: [{")

    stringBuilder.Append("value: 0,")

    stringBuilder.Append("width: 1,")

    stringBuilder.Append("color:  '#808080'")

    stringBuilder.Append("}]")

    stringBuilder.Append("},")

    stringBuilder.Append("tooltip: {")

    stringBuilder.Append("valueSuffix:  '°C'")

    stringBuilder.Append("},")

    stringBuilder.Append("legend: {")

    stringBuilder.Append("layout:  'vertical',")

    stringBuilder.Append("align:  'right',")

    stringBuilder.Append("verticalAlign:  'middle',")

    stringBuilder.Append("borderWidth: 0")

    stringBuilder.Append("},")

    stringBuilder.Append("series: [{")

    stringBuilder.Append("name:   'Tokyo',")

    stringBuilder.Append("data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]")

    stringBuilder.Append("}, {")

    stringBuilder.Append("name:   'New York',")

    stringBuilder.Append("data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]")

    stringBuilder.Append("}, {")

    stringBuilder.Append("name:   'Berlin',")

    stringBuilder.Append("data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]")

    stringBuilder.Append("}, {")

    stringBuilder.Append("name:   'London',")

    stringBuilder.Append("data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]")

    stringBuilder.Append("}]")

    stringBuilder.Append("});")

    stringBuilder.Append("});")



    ltHighchartsCode.Text = stringBuilder.ToString



End Sub