HighChart dateTimeLabelFormats Issues

Aug 22, 2014 at 3:05 AM
The x-axis on my AreaChart is not formatting correctly even after I specify the dateTimeLabelFormats (see code behind). When the .asp page renders it appears to specify the correct syntax(see JavaScript below). I would like the date to be like, "8/21/2014" instead it appears "21.Aug".. Any suggestions?

I've tried many things with no luck. Any light you can shed would be much appreciated!



JavaScript
legend: {"enabled":true},
exporting: {"enabled":true},
xAxis: [{"dateTimeLabelFormats":{"month":"%m","year":"%Y"},"labels":{"enabled":true},"title":{"text":"Date"},"type":"datetime"}],
yAxis: [{"lineWidth":2,"title":{"text":"Count"}}],
tooltip: {"formatter":function(event){ var tmp = '<b>'+ this.series.name + ((typeof(this.point.name) != 'undefined') ? '->'  +this.point.name : '' )+ ' </b><br/>'+ this.x +': '+ this.y; if(typeof(tmp) == 'function'){return tmp(this);}else{ return tmp;} }} ,
series: [{"type":"area","data":[{"marker":{"enabled":false},"x":1406927158000,"y":1498.0},{"marker":{"enabled":false},"x":1406928927000,"y":1444.0},{"marker":{"enabled":false},"x":1406930757000,"y":1478.0},{"marker":{"enabled":false},"x":1406932526000,"y":1395.0},{"marker":{"enabled":false},"x":1406934357000,"y":1369.0},{"marker":{"enabled":false},"x":1406936126000,"y":1469.0},{"marker":{"enabled":false},"x":1406937956000,"y":1388.0},{"marker":{"enabled":false},"x":1406939725000,"y":1340.0},{"marker":{"enabled":false},"x":1406941555000,"y":1424.0},{"marker":{"enabled":false},"x":1406943324000,"y":1591.0},{"marker":{"enabled":false},"x":1406945154000,"y":1641.0},{"marker":{"enabled":false},"x":1406946923000,"y":1425.0},{"marker":{"enabled":false},"x":1406948753000,"y":1453.0},{"marker":{"enabled":false},"x":1406950522000,"y":1404.0},{"marker":

Code Behind
  Dim varYAxisItem As New Highchart.Core.YAxisItem
    Dim varXAxisItem As New Highchart.Core.XAxisItem
    Dim varxaxis As New Highchart.Core.XAxis
    Dim theYtitle As New Title("Count")
    Dim thextitle As New Title("Date")
    Dim thedateformat As New Highchart.Core.Appearance.DateTimeLabelFormats
    Dim thePointCollection As New PointCollection()
    Dim thepoint As New Highchart.Core.Point
    thedateformat.year = "%Y"
    thedateformat.month = "%m"
    For Each Row In dt1.Rows
        thepoint = New Highchart.Core.Point(Convert.ToInt64((DateTime.Parse(Row(1)).Subtract(New DateTime(1970, 1, 1))).TotalMilliseconds), Convert.ToDouble(Row(0)))
        thepoint.marker = New Highchart.Core.Marker With {.enabled = False}
        thePointCollection.Add(thepoint)
    Next

    Dim serie As New Highchart.Core.Data.Chart.Serie
    Dim series As New Collection()
    serie = New Highchart.Core.Data.Chart.Serie With {.type = RenderType.area, .data = thePointCollection.ToArray()}

    series.Add(serie)
    varYAxisItem = New Highchart.Core.YAxisItem With {.title = theYtitle, .lineWidth = 2}
    varXAxisItem = New Highchart.Core.XAxisItem With {.title = thextitle, .type = AxisDataType.datetime}
    varXAxisItem.labels = New Highchart.Core.Labels With {.enabled = True}
    varXAxisItem.dateTimeLabelFormats = thedateformat

    Me.chart1.YAxis.Add(varYAxisItem)
    Me.chart1.XAxis.Add(varXAxisItem)


    chart1.DataSource = series
    chart1.DataBind()
    chart1.PlotOptions = New Highchart.Core.PlotOptions.PlotOptionsArea With {.lineWidth = 1}
    chart1.Exporting = New Highchart.Core.Exporting With {.enabled = True}