I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.
When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:
mainChart = new Highcharts.StockChart({
chart: {
renderTo: 'linegraph'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 d'
}, {
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'month',
count: 1,
text: '1 mo'
}, {
type: 'year',
count: 1,
text: '1 yr'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
series: [{
name: 'Electricity usage (kWh)',
data: graphData,
tooltip: {
valueDecimals: 2,
valueSuffix: "kWh"
}
}],
});
I had the same issue, but it was everything normal with timestamps on X axis.
Resolved it by sorting data by ascending (provided firstly in reversed order).
It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.
Related
I have a chart with two yAxis. And I want both to be grouped by date. But in my chart the last value of both series are ending up in differnt xAxis line. I assume this is because of the time differences. I need to group these points based on the date so that the last points of both series will align in the same line of xAxis. This is my javascript code.
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'y axis 1',
},
opposite: false,
showEmpty: false,
},
{
title: {
text: 'y axis 2',
},
opposite: true,
showEmpty: false,
},
],
series: [{
yAxis: 0,
data: series1,
},
{
yAxis: 1,
data: series2,
},
],
});
And this is my jsfiddle. Can anyone please help me?
You can loop through your data and round timestamps to the nearest date:
function roundDate(timeStamp) {
timeStamp -= timeStamp % (24 * 60 * 60 * 1000); //subtract amount of time since midnight
return new Date(timeStamp).getTime();
}
function loopThroughData(data) {
data.forEach(function(el) {
el[0] = roundDate(el[0])
});
}
loopThroughData(series1);
loopThroughData(series2);
Live demo: https://jsfiddle.net/BlackLabel/zhbt4gmw/
Useful thread: Round a timestamp to the nearest date
I want to show multiple lines on a chart plotting numbers and dates. I want to X Axis to always show all the months, starting at January through to December, even if there is only data for, say, february and march. I have created a fiddle here. How can I do this? You can see in the fiddle that only the months I have data for show.
I would also like the X axis to show 'Jan', 'Feb' etc, and no numbers. Is this possible?
My code so far is:
$('#container').highcharts({
title: {
text: 'Chart reflow is set to true'
},
subtitle: {
text: 'When resizing the window or the frame, the chart should resize'
},
xAxis: {
type: "datetime"
},
series: [{
data:[[1456444800000,173682],[1456531200000,21136],[1457049600000,21136],[1457395200000,199158],[1457913600000,413265],[1458777600000,21136],[1459209600000,199158],[1459987200000,413265],[1460505600000,21136],[1461024000000,199158],[1461715200000,413265],[1462406400000,199158]]
}]
});
Set a min and max value for your x axis:
xAxis: {
type: "datetime",
tickInterval:86400000 * 30,
min: Date.UTC(2016,0,1),
max: Date.UTC(2016,11,31)
}
Example:
http://jsfiddle.net/jlbriggs/ejjtc73h/2/
I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
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'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.
What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);
when the values of y axis are all 0, the 0 line runs at the middle of the chart which is not very good-looking. I want to push the 0 line to the bottom of the chart. I tried the solution on this post but not working
Highcharts: Ensure y-Axis 0 value is at chart bottom
http://jsfiddle.net/tZayD/58/
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['mon','tue','wed','thu','fri','sat']
},
yAxis: {
title: {text: ''},
min:0
},
series: [{
name: 'Total Appts',
data: [0,0,0,0,0,0]
}, {
name: 'Confirmed',
data: [0,0,0,0,0,0]
}, {
name: 'no-shows',
data: [0,0,0,0,0,0]
}]
});
})
To make the 0 "yValue" appear at the bottom of a chart instead of floating in the middle of the chart space you need to set the yAxis.max value as well. Set it to some arbitrary value that is within you expected value range.
To remove the gridlines and just have the 0 "yValue" grid you can set the gridLineWidth to 0.
Sample:
yAxis: {
title: {text: ''},
min:0,
max: 10,
gridLineWidth: 0
},
i want to make graph of stock quotes (downloaded from yahoo finance as csv and changed to json array), but date is in standard format(mm/dd/yyyy) but highstocks works only in unix timestamp (i guess). please give me the whole code on how to change the time's format. i know about date.parse() but i don't know how to apply this to whole data.
please help me with the code please
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: [ // Y: [Open, High ,Low, Close]
/* May 2006 */
[Date.parse("8/2/2012"), 602.84, 610.69, 600.25, 607.79, 83039600],
[Date.parse("8/3/2012"), 613.63, 617.98, 611.56, 615.7, 86230200],
[Date.parse("8/6/2012"), 617.29, 624.87, 615.26, 622.55, 75525800],
[Date.parse("8/7/2012"), 622.77, 625, 618.04, 620.91, 72611700]
["8/7/2012", 622.77, 625, 618.04, 620.91, 72611700],
["8/6/2012", 617.29, 624.87, 615.26, 622.55, 75525800],
["8/3/2012", 613.63, 617.98, 611.56, 615.7, 86230200],
["8/2/2012", 602.84, 610.69, 600.25, 607.79, 83039600],
["8/1/2012", 615.91, 616.4, 603, 606.81, 96125400]
],
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
}
}]
});
});
});
i'm inputting the data manually,still i don't know the use of sample data
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
When you get data from json, you need to use map your dates to timestamps, in the preprocessing. Use any loop / condition to prepare new array with series, including correct values.