Highcharts Timeline xAxis - charts

Question

I've been round and round with this one and I can't seem to drop on an answer.
I've essentially done all I need except for the XAxis as the bottom - This is a timeline chart and I can't get it to render dates at all. (for each point of data for the delivered line, I have a sql datatime entry).
I have tried the various options, UTC, converting to millieseconds etc. but to no avail. Can anyone tell me how I can advance this?
My goal is to have a chart that can display in minutes (up to 2 hours worth = 160 points across) and to automatically scale to hours and days if need be - if poss).
My current setup is as follows :
(asp.net / vb.net / SQL) - although I am happy to receive c# help and I will convert)
Markup :
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: { useUTC: true } });
$('#container').highcharts({
chart: { type: 'spline' },
title: { text: 'Delivered vs CTR' },
subtitle: {text: 'Source: Campaign Name'},
xAxis: [{
type:'datetime',
tickInterval: 20,
dateTimeLabelFormats:{
hour: '%H:%M<br>%p',
minute: '%l%M<br>%p',
second: '%H:%M:%S'
}
}],
yAxis: [{ // Primary yAxis
max: 20,
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#DE4527'
}
},
title: {
text: 'Clicked',
style: {
color: '#DE4527'
}
},
opposite: true
}, { // Secondary yAxis
lineWidth: 1,
gridLineWidth: 0,
title: {
text: 'Delivered',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value ;
},
style: {
color: '#4572A7'
}
}
}],
tooltip: {
shared: true
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Delivered',
data: <%= DeliveredChartData%>,
color: '#4572A7',
lineWidth: 1,
yAxis: 1,
marker: { radius: 2, symbol:'circle'}
}, {
name: 'Clicked',
color: '#DE4527',
marker: { radius: 2},
data: <%= ClickedChartData%>,
}]
});
});
</script>
Code behind :
Dim dt As DataTable = dsAreaChart.Tables(0)
Dim _dataDelivered As New List(Of Integer)()
Dim _dataClicked As New List(Of Integer)()
Dim sb As New StringBuilder
For Each row As DataRow In dt.Rows
Dim tmil As DateTime = CDate(row("campTableTimeStamp"))
'need to somehow add campTableTimeStamp as XAxis timeline
_dataDelivered.Add(CInt(row("campQtyDelivered")))
_dataClicked.Add(CInt(row("campQtyClicked")))
Next
Dim jss As New JavaScriptSerializer()
DeliveredChartData = jss.Serialize(_dataDelivered)
ClickedChartData = jss.Serialize(_dataClicked)
As you can see I have the campTableTimeStamp field in sql already to go - but how to pass it in with the other.
Can anyone advise ?
Many thanks for any assistance.
Peter

Answer 1

This would be easier to answer with a fiddle, or with an example of the data that results from your function.
One thing you will need to do: remove the 'tickInterval:20' - this is telling the chart to add a label every 20 milliseconds.
Next, make sure your data is structured properly.
should look like data:[[timestamp, numeric value],[timestamp,numerica value],[timestamp,numerica value]...]
or, if your timestamps are at regular intervals, you can set the pointStart and pointInterval properties, and skip providing the timestamp values in the data array, so you would have only data:[y value, yvalue, yvalue...]
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
If that doesn't help, please clarify, and add data output sample.