Current implementation:
Desired implementation:
If you look carefully there is a vertical line connecting threshold with the first point of my displayed chart. Any ideas how to implement it ? What I thought was to get the threshold price (got it)and find a way to insert it a starting point, but I struggle a bit (since i use unix timestamp).Thanks in advance !
I parse the data from Monday to Friday, but I only display Intraday's data (let's say I am o Friday now). So the threshold will be the closing price from Thursday.
You are right. Inserting a starting point seems to be the best solution for that. You can do it as below:
const threshold = 10;
const data = [
[20, 11],
...
];
data.unshift([data[0][0], threshold]);
Highcharts.chart('container', {
series: [{
type: 'area',
threshold,
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/7ynzhmuv/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
I've got a chart with data represented by timestamp/value combination, so I use 'datetime' for xAxis. On line chart it looks all great, but on column it shows empty space for days with no values.
Is there a way to use last value as filler or skip this empty space (e.g. after June 1s show tick for June 3rd)?
You can use breaks:
xAxis: {
breaks: [{
from: 3,
to: 9,
breakSize: 1
}]
}
Live example: http://jsfiddle.net/BlackLabel/xr9j7ybc/
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks
Or oridinal property from Highstock:
xAxis: {
type: 'datetime',
ordinal: true
}
Live example: http://jsfiddle.net/BlackLabel/x0Ljh19v/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I have a series of JSON which starts at 8am and throughout the day it updates my graph as time goes by until 5pm. The problem is I do not want to return data from my api until 5pm. Instead I would like to set my graph to always have from 8am-5pm on the x-axis, I've played around with tickPositioner but to no avail.
So in summary this data displays fine:
{
"d": [
[
1483689600000,
7195.31
],
[
1483689900000,
7188.45
],
[
1483690200000,
7184.38
],
[
1483690500000,
7185.82
]] }
But I do not want to have to return the following in my api [ 1483690500000, null ] etc etc for the remainder of the day, I just want to have the end time (5pm) being set in the javascript if this is possible?
I am developing a chart tat has two series and shows the aggregated(so the number is added to the point before it, so it is always rising) number of enrolled students vs the aggregated number of certified students with each points plotted when then student enrols or is certified.
What I am wanting to do is display in another part of the page is the rate of change between the start and end points displayed at the time and is updated every time the date range changes.
So how do I store the start and end point of each series into a variable for me to use and is automatically updated every time the date range is changed.
Like I said in the comment, you should be able to use chart.series.array for getting all of the values in your chart.
$(function() {
$('#container').highcharts({
series: [{
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
}, function(chart) {
$('.btn').click(function() {
var series = chart.series;
alert('start: ' + series[0].data[0].y + '\nend: ' + series[0].data[series[0].data.length - 1].y)
});
});
});
Here you can see simple example how it can work: http://jsfiddle.net/Luf9bfy0/
I have a chart which displays goals between 1995 and 2030. I need the series to "stop" at the current year.
The x-axis:
xAxis: {
categories: ['1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2015', '2016', '2017','2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' , '2028', '2029', '2030'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
The series:
series: [{
name: 'Consumption',
data: [5020, 4350, 3090, 2500, 2100, 800]
}],
If I do like this, the categories is automatically matched to the number of series data.
Is there any option where I can keep all the categories?
http://jsfiddle.net/zh4yukL8/1/
There are multiple ways to do this, but answer (2) may be the most useful in your case.
1) Using nulls for unknown data
If you have missing data for certain years (and you want to stop the graph intermittently), you can write unknown data as a 'null' in the series data (as #wergeld mentions in his comment above).
This is useful if you are programmatically filling in data for your graph and your program is working through each category in turn. If you only have data up until the year 2000, your program should work up to your end year (or any other end category), placing nulls in the series where there is no data available.
2) Using pointStart & max with a datetime chart
Seeing as you're dealing with years, you can make this chart more effective at displaying your series. You can select the start year (pointStart) and end year (max); with your data starting from the start year, and the series continuing until the end year.
Your xAxis will change to:
xAxis: {
type: 'datetime',
max: Date.UTC(2030, 0, 1)
}
And you'll need some plotOptions*:
plotOptions: {
series: {
pointStart: Date.UTC(1995, 0, 1),
pointIntervalUnit: 'year'
}
}
Example here: http://jsfiddle.net/zh4yukL8/5/ .
If you have missing data for some years, you can fill these with nulls in the series data as method (1) explains, but the graph will continue until the max year anyway.
*While playing around with this example, I discovered that the AngularJS Highcharts library (highcharts-ng) you're using expects plotOptions to be dealt with differently to native Highcharts JS. So the example above works with your library, but for everyone else you will need to have plotOptions outside of the 'options' object.
3) Using a function to work out the length of your series
If your chart doesn't just deal with years and/or you want a discrete series represented, you can use the max property on the xAxis and a clever function to work out how many categories you have. The best way I can see to include this function in Highcharts seems to be on the load event of the chart.
You'll need to adapt your chart* options to include the event:
chart: {
events: {
load: function () {
var totalValues = this.xAxis[0].categories.length;
this.xAxis[0].setExtremes(0 , totalValues - 1 );
}
}
}
Example here: http://jsfiddle.net/zh4yukL8/6/
*As with method (2), the 'chart' options when using the highcharts-ng library for AngularJS are inside the 'options' object.