I am working on updating HighCharts stack bar charts dynamically along with their drilldown charts but I am stick to one problem that async drilldown not getting updated.
In my scenario series data is completely dynamic and also
corresponding drilldown columns.
There one more small issue because of color:null of drilldown series, each time series color are different and because it's dynamic so I can't set static colors is there any way to make color same like default color scheme of simple column chart
Here is issue reproducible JSFiddle
I have used following methods (second method is commented in JSFiddle)
First method use chart.update API
Second method use
chart.options.merge API
// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals',
data: [2, 3],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits',
data: [7, 3],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
},
drillup: function() {
var newOptions = {
legend: {
enabled: true
}
};
this.update(newOptions);
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}]
});
$('#update').click(function() {
// First Method
chart.update({
drilldown: {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}
});
// Second Method
/* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}); */
});
You can dynamically set color to your drilldown series:
series.forEach(function(serie, i) {
serie.color = chart.options.colors[i];
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
Live demo: https://jsfiddle.net/BlackLabel/mb7dhxc4/
I have found a workaround for above mention problem that async drilldown charts not getting updated I just updated the drilldown event from chart.events with the updated series of drilldown here is updated button code
$('#update').click(function() {
chart.hcEvents.drilldown[0] = function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals2',
data: [1, 6],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits2',
data: [7, 4],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();
}
};
});
Related
So I have an area stacked chart:
chart: {
type: 'area',
},
plotOptions: {
series: {
stacking: 'normal',
},
area: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
},
},
},
},
title: {
text: title,
},
xAxis: {
type: 'datetime',
min: startDateInMS,
max: endDateInMS,
},
yAxis: {
title: {
text: yLabel,
},
},
series: data,
credits: {
enabled: false,
},
};
How do I add a line item/chart to what I already have? I have looked through the docs and they don't really have an example of combining a line with an area chart.
Thanks!
Highcharts support combining different kinds of charts like so:
http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
series: [{
type: 'area',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'line',
name: 'John',
data: [2, 3, 5, 7, 6]
},
Combining area and line would look something like this:
http://jsfiddle.net/henrikskar/ateje82r/
I trying to use highchart's ajax functionality to draw this graph
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/
Here is my javascript code
$(document).ready(function() {
$.getJSON('http://localhost/dashboard/graphdata', function(data) {
console.log(data);
var options = $('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: data
});
});
});
This is the response of http://localhost/dashboard/graphdata
"\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\""
However instead of a graph I'm getting this
First you need to intialize your high charts then you need to get the value from ajax.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'column'
},
title: {
text: 'Voting Results'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'votes'
}
},
series: [{}]
};
$.getJSON('http://localhost/dashboard/graphdata', function(data) {
options.series[0].name = "Votes";
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Just add this line below console.log() in your code. It will convert string to json format
//data = "\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\"";
data = data.replace(/\\+n\s*/g,'');
data = data.replace(/.*?\[/,'[');
data = data.replace(/\}\][\\\"]+$/,'}]');
data = data.replace(/'/g,'"');
data = data.replace(/([a-z\_\-0-9]+)\:/g,'"$1":');
data = JSON.parse(data);
We have to make little clean up with the string. Also reference: http://api.jquery.com/jquery.parsejson/
I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});
This JSFiddle demo shows an example of a Highcharts drilldown. When you click on one of the columns in the chart, the series is replaced with a drilldown series corresponding to the column that was clicked on
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
For example, if you click on the fruits column, this data will be displayed
data: [
['Apples', 4],
['Oranges', 2]
]
Notice that all the drilldown series have to be created up front. In this particular case, there are only 3 drilldown series, so this isn't a big issue. However, in my case, there are about 30 drilldown series and creating each one requires a few queries to be executed. Is there a way to have the drilldown series loaded lazily instead, i.e. the drilldown series data is only requested at the point when a user clicks on one of the columns?
For that level of functionality, I'd just go ahead and create it yourself. Use the point.events.click callback to make the ajax call and replace the series:
plotOptions: {
series: {
point: {
events: {
click: function(event) {
var chart = this.series.chart;
var name = this.name;
$.ajax({
url: name + ".json",
success: function(data) {
swapSeries(chart,name,data);
},
dataType: "json"
});
}
}
}
}
},
Where swapSeries is:
function swapSeries(chart, name, data) {
chart.series[0].remove();
chart.addSeries({
data: data,
name: name,
colorByPoint: true
});
}
Here's a working example.
Lazy drilldowns are supported by Highcharts, though it uses the term "async drilldown".
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
<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/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$(function () {
var data = {
animal: [2, 3, 1, 6],
vehicle: [03, 15, 14],
fruits: [20, 50, 100]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
bar: {
point: {
events: {
click: secondChart
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 34,
name: 'vehicle'
}, {
y: 67,
name: 'fruits'
}]
}]
});
function secondChart(e) {
var point = this;
$("#detail").highcharts({
chart: {
type: 'column'
},
plotOptions: {
series: {
point: {
events: {
click: thirdChart
}
}
}
},
title: {
text: point.name + ':' + point.y
},
series: [{
name: 'Chart 2',
data: data[point.name]
}]
});
}
function thirdChart(e) {
var data = {
animal: [1, 6, 3, 5],
vehicle: [01, 19, 24],
fruits: [30, 80, 100],
birds: [20, 40, 80]
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'sub_detail',
type: 'column'
},
plotOptions: {
bar: {
point: {
events: {
click: function () {
alert('Category: ');
}
}
}
}
},
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
});
}
});
When I click the second bar I want different graph values to populate the third graph. I can't get figure out the problem. On clicking the second graph I am getting the same values on third graph.
I have three divs:
div id container
div id detail
div id sub_detail
This is how you add data for a second chart:
series: [{
name: 'Chart 2',
data: data[point.name]
}]
And this is code for third chart:
series: [{
data: [{
y: 100,
name: 'animal'
}, {
y: 50,
name: 'vehicle'
}, {
y: 167,
name: 'fruits'
}, {
y: 128,
name: 'birds'
}]
}]
I hope, that you can see the difference?
Should be:
series: [{
name: 'Chart 3',
data: data[this.name]
}]