We Keep Coding

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.

Click events on highcharts with multiple series

When I have multiple series that have intersecting points on my chart the click events don't seem to fire at all. Here is an example:
http://jsfiddle.net/agnHV/22/
If you take a look at April where all 3 series intersect and try to click on the point it won't do the alert but if you check any of the points that don't intersect they alert properly.
$(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'
},
plotOptions:{
column:{
point:{
events:{
click:function(){
alert('aaa');
}
}
}
}
},
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'
},
index: 1,
zIndex: 99,
events: {
click: function(e) {
alert('boom');
console.log("CLICKY");
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
I've tried adding index/zIndex to give priority to certain points but it doesn't seem to help.

Came up with a nice solution for you. Because the individual line events were not reliable I created an event for any point on the graph that was clicked, and then used the event information to pull the name of the series and run a check to see if it is the one that I wanted.
Here is the Javascript that I added: http://jsfiddle.net/agnHV/24/
plotOptions: {
series: {
point: {
events: {
click: function(e){
var seriesName = e.point.series.name;
if(seriesName == "Temperature") {
console.log("Clicked Temperature Line");
}
else if(seriesName == "Sea-Level Pressure") {
console.log("Clicked Sea-Level Line");
}
else if(seriesName == "Rainfall") {
console.log("Clicked Rainfall Bar");
}
}
}
}
}
}
$(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'
}
/*events: {
click: function(e) {
alert('boom');
console.log("CLICKY");
}
}*/
}],
plotOptions: {
series: {
point: {
events: {
click: function(e){
var seriesName = e.point.series.name;
if(seriesName == "Temperature") {
console.log("Clicked Temperature Line");
}
else if(seriesName == "Sea-Level Pressure") {
console.log("Clicked Sea-Level Line");
}
else if(seriesName == "Rainfall") {
console.log("Clicked Rainfall Bar");
}
}
}
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Passing null in Highcharts line graphs

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

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 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.