Highchar display wrong month in date chart - javascript

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.

Related

Not showing 2.5 K, show instead 2500 in the line chart [duplicate]

I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)

use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

hightchart tickinterval between two xaxis

I have the code to display two data on line chart :
$(function () {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth atasfsa Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
tickInterval: 24 * 3600 * 1000,
day: '%a'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
pointInterval: 10,
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'A',
// Define the data points. All series have a dummy year
// of 2016/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2016, 11, 1), 0],
[Date.UTC(2016, 11, 2), 0.28],
[Date.UTC(2016, 11, 3), 0.25],
[Date.UTC(2016, 11, 4), 0.2],
[Date.UTC(2016, 11, 5), 0.28],
[Date.UTC(2016, 11, 6), 0.28],
[Date.UTC(2016, 11, 7), 0.47],
[Date.UTC(2016, 11, 8), 0.47],
[Date.UTC(2016, 11, 9), 0.47],
[Date.UTC(2016, 11, 10), 0.47],
[Date.UTC(2016, 11, 11), 0.47],
[Date.UTC(2016, 11, 12), 0.47]
]
}, {
name: 'B',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 2), 0.4],
[Date.UTC(2017, 0, 3), 0.25],
[Date.UTC(2017, 0, 4), 1.66],
[Date.UTC(2017, 0, 5), 1.8],
[Date.UTC(2017, 0, 6), 1.76],
[Date.UTC(2017, 0, 7), 2.62],
[Date.UTC(2017, 0, 8), 2.41],
[Date.UTC(2017, 0, 9), 2.05],
[Date.UTC(2017, 0, 10), 1.7],
[Date.UTC(2017, 0, 11), 1.1],
[Date.UTC(2017, 0, 12), 0]
]
}]
});
});
output:
i wonder how to make B xAxis start from 'sun' at A xAxis ?
i have been googling but a can't found anything and I do not know what to look for....

Y-Axis format on Google Charts dual Y-Axis Line

I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)

use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

highcharts.js how to force x-Axis label to display all months regardless of chart size

i am working on a area charts.
http://jsfiddle.net/b8eoszt0/
my example is a bit complex or different from the ones we usually see.
for the data structure, i have 4 weeks aggregated data for each month
eg: Sep1-7: 0, Sep8-15: 20 and so on.
the chart works fine, it displays all data points (5 points each month)
However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
opposite: true,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
week: '%b %e',
month: '%b'
},
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0
},
series:[
{
showInLegend: false,
data: [
[Date.UTC(2015, 8, 1), 0],
[Date.UTC(2015, 8, 8), 30],
[Date.UTC(2015, 8, 15), 20],
[Date.UTC(2015, 8, 22), 50],
[Date.UTC(2015, 8, 29), 20],
[Date.UTC(2015, 9, 1), 0],
[Date.UTC(2015, 9, 8), 30],
[Date.UTC(2015, 9, 15), 20],
[Date.UTC(2015, 9, 22), 50],
[Date.UTC(2015, 9, 29), 20],
[Date.UTC(2015, 10, 1), 0],
[Date.UTC(2015, 10, 8), 30],
[Date.UTC(2015, 10, 15), 20],
[Date.UTC(2015, 10, 22), 50],
[Date.UTC(2015, 10, 29), 20],
[Date.UTC(2015, 11, 1), 0],
[Date.UTC(2015, 11, 8), 30],
[Date.UTC(2015, 11, 15), 20],
[Date.UTC(2015, 11, 22), 50],
[Date.UTC(2015, 11, 29), 20],
[Date.UTC(2016, 0, 1), 0],
[Date.UTC(2016, 0, 8), 30],
[Date.UTC(2016, 0, 15), 20],
[Date.UTC(2016, 0, 22), 50],
[Date.UTC(2016, 0, 29), 20],
]
}
],
});
});
i have tried pointinterval, but it doesn't allow Month.
i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.

You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.
type: 'datetime',
units: [
[
'month', [1, 3, 6]
]
]
The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.

You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/
tickPositioner: function(min, max) {
var ticks = this.tickPositions, // original ticks
newTicks = [], // container for a new ticks
start = new Date(ticks[0]); // first tick
// render tick in a first day of the month
start.setDate(1);
// add labels, one for every month:
while (min <= max) {
start.setMonth(start.getMonth() + 1);
min = start.getTime();
newTicks.push(min);
}
// store original info of labels:
newTicks.info = ticks.info;
return newTicks;
},

Chart Date Bug because of JS month interval 0-11

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";
}

Categories