I don't know where I am making an error in this code.
What I need to do is to have a HighCharts drawing with the values from the data base. The values could change at anytime.
- The x-axis should be labeled like " Nov 30 " as the last point down to " Oct 30 " as the first point, that means 30 days ( I want to display the chart on 30 days only ). This is an example , the date can vary in time.
- The JS is sending the request via ajax and the result is returned in json format. This is one of the row : {"time":"2012-08-07 21:15:05","value_1":"1.241110","value_2":"1.241103"}
The graph has two lines ( value_1 and value_2 ) and all correspond to the same Time on the x-axis.
I read somewhere that I have to convert the format of the date to UTC. This is the function
function get_and_display_data(symbol_1,price_1,period_1,bars_1,constraints_1){
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
renderTo: 'graph',
type: 'line',
marginRight: 130,
marginBottom: 25,
reflow: false,
borderWidth: 0
},
title: {
text: 'Data',
x: -20 //center
},
xAxis: {
type:'datetime',
dateTimeLabelFormats: {
year: '%b \'%y'
}
},
yAxis: {
title: {
text: 'This is a text !'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat ('%A, %b %e, %Y', this.point.x) +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [{
name: ''
}, {
name: ''
}]
}
$.ajax({
url: url_base+"show_page/graph_data.do",
type: 'POST',
data: 'symbol='+symbol_1+"&price="+price_1+"&period="+period_1+"&bars="+bars_1+"&constraints="+constraints_1,
cache: false,
dataType: "json",
success: function(html) {
var data_array = [];
var data_1 = [];
var data_2 = [];
var i = 0;
var time_x_axis = [];
var sLegend = [];
try{
data_array = html;
sLegend = price_1.split(',');
if(html == null){
alert('No data was found. Try it again ');
}else{
for(i=0;i<data_array.length;i++)
{
time_x_axis[i] = data_array[i]['time'];
data_1[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_1'])+']';
data_2[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_2'])+']';
}
}
}catch(e){ }
options.series[0].data = '['+data_1+']';
options.series[0].name = sLegend[1];
options.series[1].data = data_2;
options.series[1].name = sLegend[2];
chart = new Highcharts.Chart(options);
}
});}
Here I get result in html variable and affect them to Data_array[] .
Because the series data should be in the format Data:[[],[],[]..[]] , that is why I put *options.series[0].data = '['+data_1+']';* .
For *data_1[i]*, I have to substr the time to get the Year, Month, Day, Hour, Min and Sec.
What am I missing inside the code ?
