I have a Json Data which i am retrieving from Database for populating the highcharts series
the series data retrieving from DB looks like this.
'series_data' => string '[
{name:'Hyderabad',data:[
[Date.UTC(2013, 05, 01),311328],[Date.UTC(2013, 05, 02),363780],
[Date.UTC(2013, 04, 03),364062],[Date.UTC(2013, 04, 04),283128],
[Date.UTC(2013, 04, 05),322608]] },
{name:'Vijayawada',data:[
[Date.UTC(2013, 06, 01),363216],[Date.UTC(2013, 06, 02),404670],
[Date.UTC(2013, 06, 03),370783],[Date.UTC(2013, 06, 04),459942],
[Date.UTC(2013, 07, 05),569499]] }]'
There is a problem with the javascript Date while showing in the chart, It is showing One month ahead.
I know javascipt Date will accept the month value 0 - 11... 0 is the january and 11 is the December,
So, here my question is, while showing in the highchart how to format the date to show the correct month. I cant format the date in DB side.
You don't have to format dates in database, but you can format it before sending to Highcharts.
Simple instead of:
Date.UTC(2013, 05, 01)
Use:
Date.UTC(2013, 04, 01)
Or even better:
Date.UTC(2013, 4, 1)
Solution in JS:
function subtractMonth(a) {
var date = new Date(a[0]),
month = date.getMonth();
date.setMonth(month - 1);
return [date.getTime(), a[1]];
}
function sorter(a, b) {
return a[0] - b[0];
}
var data = [{
name: 'Hyderabad',
data: [
[Date.UTC(2013, 05, 01), 311328],
[Date.UTC(2013, 05, 02), 363780],
[Date.UTC(2013, 04, 03), 364062],
[Date.UTC(2013, 04, 04), 283128],
[Date.UTC(2013, 04, 05), 322608]
]
}, {
name: 'Vijayawada',
data: [
[Date.UTC(2013, 06, 01), 363216],
[Date.UTC(2013, 06, 02), 404670],
[Date.UTC(2013, 06, 03), 370783],
[Date.UTC(2013, 06, 04), 459942],
[Date.UTC(2013, 07, 05), 569499]
]
}];
$.each(data, function (i, s) {
s.data = s.data.map(subtractMonth);
s.data.sort(sorter);
})
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: data
});
jsFiddle: http://jsfiddle.net/n9nR2/
Usually you do not need to format the date within the data itself. Highcharts has specific configurations for formatting the dates, called dateFormat. They have them for labels and tooltips. Then if you were doing something custom after the chart was created, you might need to do it yourself, but usually not they way you are doing it. Please see these Highcharts API links for examples:
http://api.highcharts.com/highcharts#plotOptions.area.tooltip.dateTimeLabelFormats
http://api.highcharts.com/highcharts#Highcharts.dateFormat
Related
The Following Chart suppose to show the September month but instead its showing the October, what's wrong here. in the date series its clearly showing the month 9 which is September but its showing October. ? Thanks in Advance.
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Wahab Jaan Chart'
},
yAxis: {
title: {
text: 'Profi / Loss'
},
tickInterval: 5
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2016, 09, 13), 1110],
[Date.UTC(2016, 09, 29), 1100.02],
[Date.UTC(2016, 09, 29), 4110.02],
[Date.UTC(2016, 09, 29), 8304.02],
[Date.UTC(2016, 09, 30), 8314.36],
[Date.UTC(2016, 09, 30), 8324.64],
[Date.UTC(2016, 09, 30), 8334.66],
[Date.UTC(2016, 09, 30), 8324.38],
[Date.UTC(2016, 09, 30), 8334.3],
[Date.UTC(2016, 09, 30), 8344.18],
[Date.UTC(2016, 09, 30), 7334.18],
]
}]
});
In Javascript Date, month 0 is Jannuary, 1 is February, etc...
So month 9 is indeed October.
The configuration has been pre-tested on Fiddler and it's all working, but somehow it stopped working when i implemented it in Android's webview.
In my web interface class, I have a method which returns the data, and so I called the method in the HTML file in the script section as follow
var glucose = Android.getGlucoseData();
The debug console shows the following output of the glucose var (please don't mind the fake data)
[
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00,
00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016,
4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55,
00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00),
3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
And when I passed it into the chart
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
}...
It does not render the data at all. HOWEVER if i do the following, which is essentially the same as the above, it WORKS.
var glucose = [
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55, 00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00), 3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
From the above, you can realise i'm just literally hardcoding the data produced by Android.getGlucoseData(); into the variable.
May I know what did I do wrong?
The issue can be caused by using Date.UTC() in JSON, which is not evaluated when you load data. In other words, you cannot use functiosn in JSON. At the beginning, try to hardcode the timestamps (onyl for testing) and check if chart is printed or not.
i would like a suggest...
i have Time series charts (without event to zoom it), my data is this:
data: [
[Date.UTC(2013, 5, 14), 0.7695],
[Date.UTC(2013, 5, 21), 0.7574],
[Date.UTC(2013, 5, 28), 0.7480],
[Date.UTC(2013, 6, 5), 0.7685],
[Date.UTC(2013, 6, 12), 0.7744],
[Date.UTC(2013, 6, 19), 0.7652],
[Date.UTC(2013, 6, 26), 0.7609],
[Date.UTC(2013, 7, 2), 0.7526],
[Date.UTC(2013, 7, 9), 0.7542],
[Date.UTC(2013, 7, 16), 0.7540],
[Date.UTC(2013, 7, 23), 0.7487],
[Date.UTC(2013, 7, 30), 0.7562],
[Date.UTC(2013, 8, 6), 0.7591],
[Date.UTC(2013, 8, 13), 0.7486],
[Date.UTC(2013, 8, 20), 0.7411],
[Date.UTC(2013, 8, 27), 0.7393]
]
These are the starts of weeks.
i enabled scrollbar of x-axis in my chart and i set range:
xAxis: {
type: 'datetime',
range: 28 * (24 * 3600000) // 4 weeks
},
in this way when the chart is ready, it show me last 4 week (and if i want to see other data, i will use the scrollbar)...
The problem is that the values of x-axis aren't my data :/
How i can to do ?
http://jsfiddle.net/k4ayprz4/
Besides i will insert a button under the chart with event onclick() that will reload the chart but with a new range
xAxis: {
type: 'datetime',
range: 3*(30 * (24 * 3600000)) // 3 months
},
the problem is that the values of x-axis in this case they should be names of months :/
Exist a way to do this ?
Thanks!
EDIT: I corrected the link jsfiddle and the array
The script sums download data by day from mysql and displays it as a chart, But as far as I understand the JS(highcharts) month interval is from 0 to 11 insead of what PHP outputs 1-12, making the current month May -> June(UTC 2015, 05), 31 June does not exist and causing a visual bug having both data from 31 May and 1 June, The data is there but does not show.
[Date.UTC(2015, 05, 31), 4],
[Date.UTC(2015, 06, 01), 8],
I'm trying to fix the date offset.
Offsetting the date by one month will cause the php to query data from April (because UTC month 04 = May ) and also causing 31 May(UTC format 2015, 04, 31) to be 1 June(UTC format 2015, 05, 01)
[Date.UTC(2015, 04, 25), 3],
[Date.UTC(2015, 04, 26), 4],
[Date.UTC(2015, 04, 27), 8],
[Date.UTC(2015, 04, 28), 9],
[Date.UTC(2015, 04, 29), 5],
[Date.UTC(2015, 04, 30), 8],
[Date.UTC(2015, 05, 01), 4],
[Date.UTC(2015, 05, 01), 8],
$date_download = date("Y, m, d", strtotime($row["date"]." -1 month"));
Full code :
<?php
$sql_download = "SELECT date, SUM(quantity) FROM downloads GROUP BY DATE(`Date`)";
?>
<script type="text/javascript">
$('#container_downloads').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Unity Downloads'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e. %b. %Y'
},
minRange: 14 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: 'Downloads'
},
allowDecimals: false,
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Downloads',
data: [
<?php
$result_download = $mysqli->query($sql_download);
while($row = $result_download->fetch_assoc()){
$quantity_download = $row["SUM(quantity)"];
$date_download = date("Y, m, d", strtotime($row["date"]));
$ans_download = "[Date.UTC(" . $date_download . "), " . $quantity_download . "]";
echo $ans_download . ",\r\n";
}
?>
]
}]
});
while($row = $result_download->fetch_assoc()){
$quantity_download = $row["SUM(quantity)"];
$date_str = strtotime($row["date"]);
$year = date('Y', $date_str);
$month = date('n', $date_str) - 1;
$day = date('j', $date_str);
$ans_download = "[Date.UTC(" . sprintf('%s, %s, %s',$year,$month,$day) . "), " . $quantity_download . "]";
echo $ans_download . ",\r\n";
}
I have a problem on a Google Chart line graph. I'm trying to use a continuous axis, but I obtain this:
As you can see, I'm not able to connecting dots using the X (date), but the dots are connect using the Y. How can I change this graph and obtain a "normal" graph?
The code that I've used is this one:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Data');
data.addColumn('number', 'Prestazione');
data.addRows([
[new Date(2005, 05, 01), 9.17],
[new Date(2005, 07, 01), 9.2],
[new Date(2006, 07, 07), 8.7],
[new Date(2006, 04, 08), 8.84],
[new Date(2005, 10, 08), 9.09],
[new Date(2006, 06, 10), 8.58],
[new Date(2006, 06, 10), 8.66],
[new Date(2005, 07, 13), 9.2],
[new Date(2006, 09, 13), 8.8],
[new Date(2006, 07, 14), 8.71],
[new Date(2005, 07, 15), 8.7],
[new Date(2008, 01, 20), 8.50],
[new Date(2005, 05, 21), 9.0],
[new Date(2006, 05, 27), 8.6],
[new Date(2006, 06, 28), 8.7],
]);
var options = {
title: '',
pointSize: 5,
curveType: 'function',
legend: 'none',
explorer: {}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div01'));
chart.draw(data, options);
}
This is because line chart in Google chart doesnt order the data by itself based on the x axis values.
If you want to have a continuous graph, you should sort the data based on x-axis value (timestamp in your case) and then pass it to Google charts.
You can use data.sort([{column: 0}]); for sorting it based on x-axis, Here column:0 indicates x-axis.https://developers.google.com/chart/interactive/docs/reference#DataTable_getSortedRows
If the value you are trying to pass is through some xml or json and it has null values inside it will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.