I really don't get it working.
the page loads but not the data.
I did try other things but i can't get it going
Trying to use a csv file with highstocks, but there seems to be an issue I am able to use csv files in highstocks using the csv fine, but it does not dynamically update the csv data, Can anyone please advise what I'm doing wrong?
here is what i have :
the csv is like this :
2018-02-25 16:26:48;21.7;33
$.ajax({
url: '/data/woonkamer/woonkamer2019.csv',
success: function (csv) {
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, false);
}, 1000);
}
}
},
data: {
csv: csv.replace(/\n\n/g, '\n')
},
title: {
text: 'Daily Temperature And humidity'
},
subtitle: {
text: 'Malosa'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %B',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
tickInterval: 3600 * 1000
},
yAxis: [{ // left y axis
title: {
text: 'Temp + Humid',
},
labels: {
align: 'temp',
x: 3,
y: 16,
format: '',
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: "humid "
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A-%e%b-%Y at %H:%M', this.x) + '<br/> ' +
'</b><br/>'+ this.series.name +': '+ this.y + this.series.tooltipOptions.valueSuffix +'',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'Temperature',
data:[],
tooltip: {
valueSuffix: 'c'
}
},
{
name: 'Humidity',
data:[],
tooltip: {
valueSuffix: ' %'
}
}]
});
}
});
Check screenshot here
csv file local updated :
2018-03-01 09:25:34;22.1;29
2018-03-01 09:25:35;22.1;29
2018-03-01 09:25:36;22.1;29
2018-03-01 09:25:37;22.1;29
2018-03-01 09:25:38;22.1;29
2018-03-01 09:25:39;22.1;29
2018-03-01 09:25:40;22.1;29
2018-03-01 09:25:41;22.1;29
2018-03-01 09:25:42;22.1;29
2018-03-01 09:25:43;22.1;29
So i hope someone can help me with this so i can change it to all the charts:D
Related
I have a dropdown on month. What I want is when select current month, the data will display and when select previous month or incoming month, the data should display 'N/A'. Currently, the data is display in a solid gauge (speedometer).Below is the code
//Dropdown
<h3 class="box-title">
Month:
<input type="month" name="month" id="month" value="<?=date('Y-m')?>" class="onchange">
</h3>
//Script
$(function () {
$("body").on( "change",'.onchange', function( event ) {
$("#loading1").show();
$("#loading2").show();
$("#loading3").show();
$("#loading4").show();
$("#loading5").show();
$('#generation').DataTable().ajax.reload();
$.ajax({
url: "/lookup/getPlantLoading/",
data: {
campus: $('#campus').val(),
month: $('#month').val()
},
success: function(data){
chartPlantLoading(data);
$("#loading1").hide();
}
});
//Chart 1
function chartPlantLoading(data) {
var gaugeOptions = {
chart: { type: 'solidgauge' },
title: null,
pane: {
center: ['50%', '65%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: true
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#DF5353'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#55BF3B'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
if(data.data != 0.0){
Highcharts.chart('plant_loading', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
credits: { enabled: false },
series: [{
name: 'Plant Loading',
// data: [80],
data: data.data,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">N/A</span><br/>' +
'<span style="font-size:12px;opacity:0.4">%</span>' +
'</div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
}
else{
Highcharts.chart('plant_loading', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
credits: { enabled: false },
series: [{
name: 'Plant Loading',
// data: [80],
data: data.data,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">%</span>' +
'</div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
}
}
The data is already show a correct data, but how do I check whether the selected month is the current month and set when user choose previous month or incoming month, the meter will display 'N/A'?
Below is the current look of the speedometer
I've a problem using highchart.
in yaxis dateformat it doesn't problem , but in tooltip dateformat, it is give me different for 1 hour.
JS :
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Report Due Date vs Surat Jalan',
x: -20 //center
},
subtitle: {
text: 'PT BKA',
x: -20
},
xAxis: {
categories: [],
title: {
text: 'So No'
},
labels :{
rotation: -45
}
},
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d/%m/%Y %H:%M:%S' },
labels :{
formatter:function() {return Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br><b>' + this.series.name +'</b> : ' +
Highcharts.dateFormat('%d/%m/%Y %H:%M:%S',this.y);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: []
};
JSON data form PHP :
1: {name: "SODate", data: [1457910000000]}
data: [1457910000000]
name: "SODate"
2: {name: "DeliverDate1", data: [1457996400000]}
data: [1457996400000]
name: "DeliverDate1"
3: {name: "DeliverDate2", data: [1458169200000]}
data: [1458169200000]
name: "DeliverDate2"
4: {name: "DeliverDate3", data: [1458255600000]}
data: [1458255600000]
name: "DeliverDate3"
ToolTip :
SODate : 1 457 910 000 000
DeliverDate1 : 1 457 996 400 000
but when using formatter like first script , it's showing different 1 hour different
SODate in yaxis : 14/03/2016 00:00:00
SODate in Tooltip : 13/03/2016 23:00:00
I am already using
Highcharts.setOptions({
global: { useUTC: false }
});
but it just make more big different.
Why this can happen?
UPDATE 15 March 2016 :
After using global: { timezoneOffset: 7 * 60, useUTC: false }
its not make different, because yaxis is not problem.
After using global: { timezoneOffset: -60, useUTC: true}
it works, but it is right?
I am working on highchart column chart. But I got stuck in series adding part. This is my code
function renderChart(series_data){
$("#container").height(400);
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 80
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,chartcount]);
});
chart.addSeries({
name : cat_name,
data : parseFloat(toSeries)
});
});
}
If I am adding constant series data like
chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});
some graph is displaying. But while coming to dynamic data it doesn't show up. Also I am using Date.UTC function to display the
I sending the json data through the variable, series_data to the function renderChart that is the result of another ajax function . The sample json result is this.
{"Ferrari April
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"1.00"},{"date":"2013-06-15","month":"June-2013","count":"1.00"},{"date":"2013-06-16","month":"June-2013","count":"1.00"}],"Ferrari
May
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"2.00"},{"date":"2013-06-09","month":"June-2013","count":"3.00"}],"Ferrari
March
2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari
June
2013":[{"date":"2013-06-10","month":"June-2013","count":"1.00"},{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month":"June-2013","count":"3.00"},{"date":"2013-06-14","month":"June-2013","count":"2.00"},{"date":"2013-06-16","month":"June-2013","count":"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"2.00"}],"Ferrari
February
2013":[{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}
The problem comes in the Date.UTC part i guess . Because when I do a console.log() it is showing NaN .
Please help to fix this issue.
I am excepting a result like this.
Demo Jsfiddle
var series_data = {"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"}],"Ferrari January 2013":[{"date":"2013-06-02","month":"June-2013","count":"1.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-02","month":"June-2013","count":"2.00"},{"date":"2013-06-03","month":"June-2013","count":"2.00"},{"date":"2013-06-04","month":"June-2013","count":"1.00"},{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"}]};
renderChart(series_data)
function renderChart(series_data){
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 40
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
}
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,parseInt(chartcount)]); // Parse your data here!
});
chart.addSeries({
name : cat_name,
data : toSeries
});
});
}
Hope it works!
You are setting the chart before putting data inside it. First data series and then call Highcharts.Chart. Then your program will run for dynamic data also.
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
Live Demo
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
I'm using HighStock.js to build the graph of a stock ticker, and i need to display 2 days data into a graph , and i don't have data when stock market closes , so i'm getting straight line from Nov 27 11:20 to Nov 28 5:19 . I should not get any line when stock closes, that line should be trimmed along with x-axis. I'm having prices in the interval of every 20 mins for 2 days. Below is my code,
$.each(names, function(i, name) {
if(i==0)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data0, ',') ?>],
};
}
else if(i==1)
{
date3:[<?php echo $date1 ?>];
seriesOptions[i] = {
name: name,
data: [<?php echo join($data1, ',') ?>],
};
}
else if(i==2)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data2, ',') ?>]
};
}
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
function createChart() {
var date_new1 ;
var date_new2 ;
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
dataLabels: {
enabled: true
},
yAxis: {
title: {
text: 'PRICE',
},
},
xAxis: {
title: {
text: 'PERIOD',
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
navigator: {
enabled: false,
},
rangeSelector: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: seriesOptions
});
}
});
The feature to automatically collapse weekends is not completely implemented yet. It is scheduled for the next release of highstock (the one after 1.0.2). Here is the corresponding feature request: on uservoice