Chart Date Bug because of JS month interval 0-11 - javascript

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

Related

How to connect null values with dotted lines in highcharts

I want to connect null values with dotted lines in the chart.
Below is the url to JS fiddle where my code resides -
data: [
[Date.UTC(2016, 1, 1),null],
[Date.UTC(2016, 2, 1),null],
[Date.UTC(2016, 3, 1),500],
[Date.UTC(2016, 4, 1),600],
[Date.UTC(2016, 5, 1),null],
[Date.UTC(2016, 6, 1),700],
[Date.UTC(2016, 7, 1),null],
[Date.UTC(2016, 8, 1),null],
[Date.UTC(2016, 9, 1),null],
[Date.UTC(2016, 10, 1),null],
[Date.UTC(2016, 11, 1),null],
[Date.UTC(2017, 0, 1),500]
],
http://jsfiddle.net/Ashish_developer/ue0wb8w0/

You can use series.zones to define which part of the graph will be dashed.
Based on your data, the algorithm for building the zones array could be sth like this (feel free to adjust it the way you want):
function buildZones(data) {
var zones = [],
i = -1, len = data.length, current, previous, dashStyle, value;
while (data[++i] === null);
zones.push({
value: i
});
while (++i < len) {
previous = data[i - 1];
current = data[i];
dashStyle = '';
if (previous !== null && current === null) {
dashStyle = 'solid';
value = i - 1;
} else if (previous === null && current !== null) {
dashStyle = 'dot';
value = i;
}
if (dashStyle) {
zones.push({
dashStyle: dashStyle,
value: value
});
}
}
return zones;
}
Series config:
series: [{
zones: buildZones(data),
zoneAxis: 'x',
data: data,
connectNulls: true
}]
example: http://jsfiddle.net/asf52ft8/

I Think Its Fine For You.. This Graph Suitable For Irregular Intervals
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Kerala, India'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
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: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2017',
data: [
[Date.UTC(2017,01,01), 0],
[Date.UTC(2017,04,01), 6],
[Date.UTC(2017,05,01), 3],
[Date.UTC(2017,06,01), 7],
[Date.UTC(2017,07,01), 5],
[Date.UTC(2017,12,01), 6],
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Try this One too
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
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: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/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(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></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....

Highchar display wrong month in date chart

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.

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

HighCharts - timeseries area and column series on same chart - irregular datetime on xAxis

I have to fill a chart with two series: timeseries area and column. both series are filled with date Date values with irregualr intervals, I need to keep the values on xAxis of the area series, while reprsenting bot series.
here's the code:
Highcharts.setOptions({
lang: {
months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio',
'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
weekdays: ['Lunedì', 'Martedì', 'Martedì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
shortMonths: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu',
'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
downloadJPEG : "Scarica come JPEG",
downloadPDF: "Scarica come PDF",
downloadPNG: "Scarica come PNG",
downloadSVG: "Scarica come SVG",
printChart: "Stampa grafico",
contextButtonTitle: "Opzioni"
}
});
$(function () {
$('#chart1').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Entrate/Uscite'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
title: {
text: null
}
//tickInterval: 31 * 24 * 3600 * 1000
},
yAxis: {
title: {
text: 'Euro(€)'
}
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[9]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
//lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
type: 'column',
name: "Entrate mensili",
pointStart: Date.UTC(2014, 0, 01),
data: [[Date.UTC(2014, 0, 31), 4830.55], [Date.UTC(2014, 1, 28), 8429.28],
[Date.UTC(2014, 2, 31), 515.6], ]
},
{
type: 'area',
name: "Entrate",
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2014, 0, 01),
data: [[Date.UTC(2014, 0, 9), 494.8], [Date.UTC(2014, 0, 20), 137.2], [Date.UTC(2014, 0, 22), 210.0],
[Date.UTC(2014, 0, 23), 220.4], [Date.UTC(2014, 0, 24), 871.0], [Date.UTC(2014, 0, 28), 420.0],
[Date.UTC(2014, 0, 30), 420.0], [Date.UTC(2014, 0, 31), 2057.15], [Date.UTC(2014, 1, 5), 191.2],
[Date.UTC(2014, 1, 6), 81.6], [Date.UTC(2014, 1, 7), 295.2], [Date.UTC(2014, 1, 11), 135.12],
[Date.UTC(2014, 1, 12), 189.2], [Date.UTC(2014, 1, 13), 210.0], [Date.UTC(2014, 1, 14), 315.2],
[Date.UTC(2014, 1, 17), 462.8], [Date.UTC(2014, 1, 18), 544.4], [Date.UTC(2014, 1, 19), 715.44],
[Date.UTC(2014, 1, 20), 971.2], [Date.UTC(2014, 1, 21), 418.0], [Date.UTC(2014, 1, 24), 1122.0],
[Date.UTC(2014, 1, 25), 151.76], [Date.UTC(2014, 1, 26), 851.12], [Date.UTC(2014, 1, 27), 670.8],
[Date.UTC(2014, 1, 28), 1104.24], [Date.UTC(2014, 2, 3), 305.6], [Date.UTC(2014, 2, 6), 210.0], ]
}
]
});
});
It seems that the column series mess up the chart. Here's the code on jsfiddle. If I comment out the column series, I obtain the expected behaviour: I need to represent both series with the time interval of the first (area).
Some suggestion for that?

Categories