Passing null in Highcharts line graphs - javascript

So I have to pass an array in javascript to the Highcharts y-axis and there are some cases in which for an x-axis value, there isn't supposed to be a y-axis value. So, the graph should join the previous point to the next point.
From my search, I found this solution on stack overflow -> missing value in highcharts line graph results in no line, just points
From the comments, apparently the null solution should be working but if you open that js fiddle, you'll see a broken line. At-least, that's what I'm seeing. Also, please see my jsfiddle file: Fiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'spline',
yAxis: 1,
data: [49.9, 71.5, null, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You can see, there's a broken line here too if we pass null!

If you need to connect null values as well use connectNull:true
plotOptions: {
series: {
connectNulls: true
}
}
Updated fiddle here

Related

I am using highcharts that give data when I insert in array but I want to insert data dynamically

Is it possible to make this data dynamically added to highcharts instead of the custom array? Is it possible to use each loop to insert data dynamically? Is there any way that we can use table or another array to make it dynamically? As i am new in highcharts so i can't figure out how to use that.
Thanks in advance
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}]
});
You can use update or setData method to add series / data to the already existing chart:
$.getJSON( "...", function( data ) {
chart.series[0].setData(data);
});
// OR
$.getJSON( "...", function( data ) {
chart.update({
series: [{
data: data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4948/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Series#setData
Or create a chart when the data finished loading:
$.getJSON( "...", function( data ) {
Highcharts.chart('container', {
series: [{
data: data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4949/
You can also use Highcharts data module: https://www.highcharts.com/docs/working-with-data/data-intro and get data for example from CSV.

Highcharts Series Margins

Looking since a while to this issue, but I can't find a correct answer.
See attached picture. How can I control/increase the margins of the chart drawing ONLY? Axis and the rest should stay as they are, I would like to make the margin between the Y Axis and the Chart Itself bigger.
Is this somehow possible?
Fiddle code: http://jsfiddle.net/klodoma/ood4vykf/1/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
//type: 'spline',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 18.5, 26.4, 14.1, 195.6, 154.4],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'Rainfall2',
type: 'spline',
yAxis: 1,
data: [19.9, 73.5, 100.4, 111.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}]
});
You can utilize the offset of the yAxis object using the Highcharts API.
jsfiddle: http://jsfiddle.net/mariocatch/d1e6h96y/1/
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
},
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
offset: 50
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
offset: 50
}]
I have found a solution:
The offset property of the xAxis and yAxis from the Highcharts API can be used.
The "trick" is to specify the offset just to the first axis and not to all of them.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
offset: 150
},{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
//offset: 50 //do not set this value
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
},
labels: {
format: '{value} mm',
},
opposite: true,
offset: 50 //set this value, it's an opposite axis!
}],
A full example is here:
http://jsfiddle.net/klodoma/2k4akses/3/

How to scale a Highchart chart ?

I'm trying to develop a timeline feature for a website, and I'm using the multichart API from Highcharts. However, as the data points grows fast, it gets crowded fast and the chart doesn't scale properly, like using a timeline.
Here is a sample from Highcharts:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
This chart is similar with the one I'm working on. And I wanted something similar with This sample: with the possibility of choosing a range from a time period ... How can I accomplish that?

highcharts Cannot read property 'legendBackgroundColor'

I'm trying to create a chart using highcharts to represent some data. However i'm getting the following error upon including the files. I've got the latest release of Highcharts.
Could it be a problem with importing the theme files, if so how could I resolve it?
http://i.imgur.com/ZyWa0.png
Jade Template engine, including the JavaScript code:
script(type="text/javascript", src="javascripts/jquery.min.js")
script(type="text/javascript", src="javascripts/highcharts.js")
script(type="text/javascript", src="javascripts/client-project.js")
Chrome console Error:
Uncaught TypeError: Cannot read property 'legendBackgroundColor' of undefined
(anonymous function)client-project.js:64
f.extend._Deferred.e.resolveWithjquery.min.js:1
e.extend.readyjquery.min.js:1
c.addEventListener.B
JavaScript taken directly from the highcharts demo (unchanged) 'client-project.js':
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +
(this.series.name == 'Rainfall' ? ' mm' : '°C');
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
The theme files are separate from highcharts.js so you need to include one of them them as well. They are located in this folder in the distribution:
Highcharts-2.1.9\js\themes
See step four of the installation instructions

Highcharts Example Modification

Below is a link to the Highcharts example I want to modify. I would like to have the right 2 y-Axes become one. Currently, each line on the graph corresponds with one y-Axis because they have different scales. The chart I want to create will have 1 right Axis, but correspond to the lowest and highest extreme of both lines in the chart. For example, if line A has low value of 5(and is lower than any value in B line), and line B has an extreme value of 90(and is higher than any value in A), these 2 values are used for the axes. The two lines on the chart should correspond to one scale.
Link: http://www.highcharts.com/demo/combo-multi-axes
Curernt code:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: 'Example 1'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Percent Change',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Measure',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value + 'k';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: '',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
series: [{
name: 'Measures', //Button on Graph -- Measures
color: '#363534',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Percentage Change 1', //Button on Graph -- Purple
type: 'spline',
color: '#E17000',
yAxis: 2,
data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
marker: {
enabled: false
},
dashStyle: 'shortdot'
}, {
name: 'Percentage Change 2', //Button on Graph -- Orange
color: '#A31A7E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
}]
});
});
First, perhaps consider another way of representing the data. The multiple scales can be a mental strain.
Second, maybe this helps? I've removed the $(document).ready... wrapper.
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: 'Example 1'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#878787'
}
},
title: {
text: 'Percent Change',
style: {
color: '#878787'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Measure',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value + 'k';
},
style: {
color: '#4572A7'
}
}
}],
series: [{
name: 'Measures', //Button on Graph -- Measures
color: '#363534',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Percentage Change 1', //Button on Graph -- Purple
type: 'spline',
color: '#E17000',
data: [30,40,35,25,14,25,39,28,21,78,23,36,5],
marker: {
enabled: false
},
dashStyle: 'shortdot'
}, {
name: 'Percentage Change 2', //Button on Graph -- Orange
color: '#A31A7E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 35],
}] });
There is an option to set yAxis property for series array. Make yAxis: 0 for both series objects. This should give a single Y axis regardless of number of series items on the chart.

Categories