I want to represent data include dates on highcharts dynamically(get from database) how can I do this?
assume this is my static data
series: [{
data: [[Date.parse('7/7/2017'),222],[Date.parse('9/9/2019'),333]],
pointStart: Date.parse('7/7/2017'),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
how can I create this array([[Date.parse('7/7/2017'),222],[Date.parse('9/9/2019'),333]]) in java script dynamically and how can I pass it to series element in highcharts.
Here you go, i have prepare chart for you, from your data.
var initialData = [{
"name": "sales",
pointStart: Date.parse('7/7/2017'),
pointInterval: 24 * 3600 * 1000,
tickInterval: 24 * 3600 * 1000,
data: [[Date.parse('8/7/2017'),222],[Date.parse('9/7/2017'),333],[Date.parse('11/7/2017'),333]]}];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
showFirstLabel: true,
showLastLabel: true,
endOnTick: true,
// second: '%H:%M:%S',
dateTimeLabelFormats: {
day: '%d. %b',
month: '%b \'%y',
year: '%Y'
},
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
//,tickInterval : null
},
yAxis: {
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillOpacity: .5,
marker: {
radius: 4
},
stacking: 'normal'
}
},
series: initialData
});
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container" style="height: 400px"></div>
Related
I'm trying to add data to a chart, series by series. However, the columns are not centralized, and the initial and final columns are outside the charting area: https://jsfiddle.net/L28q3z7u/
Highcharts.chart('container', {
chart: {
type: "column",
},
xAxis: {
type: "datetime",
minTickInterval: 60000 * 60 * 24 * 365,
crosshair: true
},
series: [{
data: [1],
color: "blue",
pointStart: 1640995200000
},
{
data: [2],
color: "blue",
pointStart: 1672531200000
},
{
data: [3],
color: "blue",
pointStart: 1704067200000
},
{
data: [4],
color: "blue",
pointStart: 1735689600000
}]
});
If I try to add the data at once, it works: https://jsfiddle.net/263Lh4bu/
Highcharts.chart('container', {
chart: {
type: "column",
},
xAxis: {
type: "datetime",
minTickInterval: 60000 * 60 * 24 * 365,
crosshair: true
},
series: [{
data: [1,2,3,4],
color: "blue",
pointStart: 1640995200000
}]
});
Does anyone know how I can do it by adding series by series?
In that case, you need to disable column.grouping and set column.pointRange as the same value as xAxis.minTickInterval
plotOptions: {
column: {
grouping: false,
pointRange: 60000 * 60 * 24 * 365
}
},
Demo:
https://jsfiddle.net/BlackLabel/pzb9jwnm/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.grouping
My chart is not showing the correct month. I know that javascript 0 means January. How can I do increment the month directly in the query? Or should I do additional function in the highcharts?
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'RCM Dashboard Philippines'
},
xAxis: {
type: 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
year: '%Y'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Number of Usage (m)'
},
min: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} Visit</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'line',
name: 'RCM Dashboard Philippines',
data: [
<?php
$sql=mysql_query("SELECT DATE_FORMAT(date_accessed,'%Y,%m,%d') as dates, COUNT(date_accessed) as counts
FROM anreference WHERE date_accessed between '2015-01-01' AND '2015-06-03' group by date(date_accessed) order by date(date_accessed) limit 1000;");
while($res=mysql_fetch_array($sql)) {
?>
[Date.UTC(<?php echo $res['dates']; ?>), <?php echo $res['counts']; ?>],
<?php
}
?>
]
}]
});
});
Already got some workaround with this. I used MySQL query DATE_SUB to subtract the date by one month in order to compensate with the javascript value of 0 as January.
SELECT DATE_FORMAT(DATE_SUB(date_accessed,INTERVAL 1 MONTH), '%Y,%m,%d') as dates, COUNT(date_accessed) as counts
FROM anreference WHERE date_accessed between '2015-01-01' AND '2015-06-03' group by date(date_accessed) order by date(date_accessed) limit 1000;
my highcharts code is as follow: pretty much this is always starting from 01, and its displaying january and february
I did look up highcharts documentation I couldn't figure out how to make this thing work the days need to be +1 everytime. meaning if it starts the 5th, it will show 5 6 7 8 9
based on the number of values in series.
the chart displays total pageviews for each day. anyway you point me in the right direction ?
$('#arpv').highcharts({exporting: { enabled: false } ,
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d. '
},pointInterval: 24 * 3600 * 1000
},
yAxis: {
floor: 0,
title: {
text: 'Pageviews'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
title: {
text: 'Pagesviews Summary',
x: -20 //center
},
subtitle: {
// text: 'pageviews over time',
x: -20
},
tooltip: {
valueSuffix: ' Pageviews',
crosshairs: true,
formatter: function() {
var date = new Date(this.x);
var year = date.getFullYear();
return '<span style="color:'+this.series.color+'">'+ this.series.name +'</span>: '+ this.y + ' pageviews';
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [ { name: 'Pageviews', data: [ 26562,5793,26585,2203,1444,2150,2833,2416,10114,13564,16234,15253,5415,10340,18184,12830,14340,21520,18883,41571,23913,16013,16681,10499,18557,18692,14550,6655,17490,46258,26671,5739,26585,49114,30038,25998,19076,26577,10231,24110 ],pointInterval: 24 * 3600 * 1000 } ]
});
</script>
In the xAxis config, you are using pointInterval, it should be tickInterval.
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d. '
},
tickInterval: 24 * 3600 * 1000
}
Example fiddle.
The pointInterval parameter should be placed in the plotOptions.series, not on xAxis.
I cannot get highcharts to recognize my timestamps, they are in javascript date format.
Tried many different approaches, but cannot get it to work when both the data and time array's are seperate.
Fiddle: http://jsfiddle.net/SjL6F/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ''
}
});
$('#container').highcharts({
title: {
text: 'Temperature - Last 24 hours',
},
credits: {
enabled: false
},
subtitle: {
text: "Test Site",
x: -20
},
xAxis: {
type: 'datetime',
labels: {
enabled: true
},
categories: time,
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: [{
title: {
text: 'Temperature (\u00b0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
tooltip: {
valueSuffix: ' C'
},
marker: {
enabled: false
}
}]
});
});
Highcharts just shows the raw javascript date value.
You are setting categories, which isn't datetime type for xAxis. Remove them, then concat time and temp arrays.
For example:
var concatenatedData = [];
$.each(time, function(i, e){
concatenatedData.push([parseInt(e), temp[i]]);
});
Demo:
http://jsfiddle.net/SjL6F/1/
Note: I have added parseInt, because Highcharts requires timestamps to be numbers, not strings.
I cannot seem to figure out how to set my tick interval correctly.
Need to have an hourly tick on the X axis.
The data is minute based.
Javascript:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: "datetime",
categories: time,
dateTimeLabelFormats: {
day: '%h'
},
minTickInterval: 24 * 36000000 * 1000,
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Asen',
data: temp
}]
,
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
Data arrays:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
use this config for the xAxis.
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
See here for a working demo on JS Bin.
You should use tickInterval with value: 3600 * 1000