JavaScript
$(function(){
var data = {
"x" : [
"20111107165732782",
"20111107165732786",
"20111107165731491",
"20111107165731514",
"20111107165732764",
"20111107165732767",
"20111107165730230",
"120111107165731490",
"20111107165732778",
"20111107165732777",
"20111107165732791",
"20111107165731504",
"20111107165731513",
"20111107165731500",
"20111107165730198",
"20111107165730222",
"20111107165730227",
"20111107165730217",
"20111107165730208",
"20111107165731485",
"20111107165731507",
"20111107165730192",
"20111107165730202",
"20111107165730215",
"20111107165732790",
"20111107165730209",
"20111107165731482",
"20111107165731510"
],
"y" : [
{
"data" : [
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"name" : "write_data"
},
{
"data" : [
"null",
"null",
"null",
"null",
"null",
1,
"null",
"null",
"null",
"null",
"null",
2,
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null",
"null"
],
"name" : "other",
"type" : "scatter"
}
]
};
// Create the chart
window.chart = new Highcharts.Chart({chart: {
renderTo: "container",
type: "scatter"
},
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: "demo"
},
subtitle: {
text: "demo"
},
xAxis: {
categories: data['x'],
labels: {
rotation: -45,
style: {
font: 'normal 10px Verdana, sans-serif, black',
display:'none'
}
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
floating: false,
verticalAlign: 'top',
x: 0,
y: 0
},
series: data['y'],
plotOptions: {
column:{
pointPadding: 0,
borderWidth: 0
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';}
}
}},
scatter: {
marker: {
symbol:'diamond',
radius: 6,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
});
});