I am new in using Highchart. I am able to create a Stacked Col-line chart. Now I want to create drilldown of it. I am able to get the click event and make a new chart from it in the same position but using that I can not drill back to the previous chart. So I need to use drilldown properties of it.
This is my code for the chart.
The HTML part-
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
Now the script part
Highcharts.chart('container', {
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
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer'
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
drilldown: true,
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: 'Wind',
type: 'column',
yAxis: 1,
drilldown: true,
data: [25, 20, 30, 12, 14, 17, 13, 14, 21, 19, 25.6, 24.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
drilldown: true,
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'
}
}]
});
If you want to drilldown to line chart, just set type in your options.series instead of options.chart.
$(function() {
// Create the chart
$('#container').highcharts({
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
style: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
}
},
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Things',
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
type: 'column',
name: 'Things2',
data: [{
name: 'Animals',
y: 1,
drilldown: 'animals2'
}, {
name: 'Fruits',
y: 5,
drilldown: 'fruits2'
}, {
name: 'Cars',
y: 2,
drilldown: 'cars2'
}]
}],
drilldown: {
activeDataLabelStyle: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
},
series: [{
id: 'animals',
name: 'Animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
name: 'Cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}, {
id: 'animals2',
name: 'Animals2',
data: [
['Cats', 3],
['Dogs', 5],
['Cows', 6],
['Sheep', 2],
['Pigs', 2]
]
}, {
id: 'fruits2',
name: 'Fruits2',
data: [
['Apples', 1],
['Oranges', 5]
]
}, {
id: 'cars2',
name: 'Cars2',
data: [
['Toyota', 2],
['Opel', 3],
['Volkswagen', 2]
]
}]
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Live example: http://jsfiddle.net/wyos2saL/
Related
I am trying a chart that combines two chart types in a one single-chart (spline & polynomial). When I merge both of them the chart stops working. If I them separately they work. Can I merge both chart in one using highchart?
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Polynomial regression - with extrapolation and different style'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
tooltip: {
pointFormatter: pointFormatter
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
},
{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'dash'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
That's a reported bug. Anyway while using a transparent color for the spline it works :
series: [{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, 0)', // transparent color
dashStyle: 'dash'
},
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
}
Updated Fiddle
I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic 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: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic 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: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
I have a column chart which is divided into categories. I'd like to put error bars on every bar, but I'm not sure how to do this (or where to look it up). Here's my code so far:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SIS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Search Inefficiency'
},
xAxis: {
categories: ['Experiment 1', 'Experiment 2', 'Experiment 3', 'Experiment 4'],
},
yAxis: {
reversedStacks: false,
min: 0,
title: {
text: 'Search inefficiency',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
series: [ {
name: '0 degrees',
type: 'column',
data: [0.43,0.36,0.53,0.52]
}, {
name: '45 degrees',
type: 'column',
data: [0.94,1.00,1.22,0.87]
}, {
name: '90 degrees',
type: 'column',
data: [1.01,1.13,1.45,1.08]
}, {
name: '135 degrees',
type: 'column',
data: [0.78,0.95,1.36,1.00]
},{
name: '180 degrees',
type: 'column',
data: ["",0.48,0.83,0.62]
}]
// I want to retain the category clustering and give each column an error bar. Not sure how to do it with the following error bar example:
// series: [{
// name: 'Rainfall',
// color: '#4572A7',
// type: 'column',
// 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: 'Rainfall error',
// type: 'errorbar',
// data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]]
// }]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Question1
you can use plotLine to create error bar
plotLines: [{
label: {
text: 'Error Bar',
x: 1.25
},
color: 'red',
width: 2,
value: 1,
dashStyle: 'longdashdot'
}]
See Updated fiddle here
For next question , to get an image on mousever
See this Answer
First of all: data: ["",0.48,0.83,0.62] - you have string there. If you want to have an empty point, use null, not "".
Now to answer the question: simply put your error bar series after respective column series, for example: http://jsfiddle.net/3ywmg1c7/
series: [{
name: '0 degrees',
type: 'column',
data: [0.43, 0.36, 0.53, 0.52]
}, {
type: 'errorbar',
data: [
[0.4, 0.5],
[0.3, 0.4],
[0.5, 0.6],
[0.5, 0.6]
]
}, {
name: '45 degrees',
type: 'column',
data: [0.94, 1.00, 1.22, 0.87]
}, {
type: 'errorbar',
data: [
[0.9, 1],
[0.9, 1.1],
[1.2, 1.3],
[0.8, 0.9]
]
}]
The line series don't properly match up.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4],
stack: 0
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6],
stack: 0
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
stack: 0
}, {
type: 'line',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'line',
name: 'Total consumption',
data: [3, 2.67, 3, 6.33, 3.33],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
Here's a fiddle to show what I'm doing:
http://jsfiddle.net/tn7b0fb0/
The numbers for the line's are the same, why aren't they on top of eachother?
If you unstack the bar charts, it looks right.
Remove the stacking: 'normal' from plotOptions, and apply it individually at a series level, to the column series only.
Updated Jsfiddle
I'm trying to create line,column and pie chart in a grid with the Highcharts charting API. But i'm getting an error "Uncaught SyntaxError: Unexpected token ILLEGAL". Scratching my head from hours. Referred link : http://www.highcharts.com/demo/com
<apex:page>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin:0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme &&Highcharts.theme.textColor)||'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0]
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2]
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</apex:page>
Really appreciate the help.
You have a HTML special entity character in your JavaScript code (& which stands for &).
Try this way:
<apex:page>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin:0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor)||'black' // remove the HTML-like "&" encoding...
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0]
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2]
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</apex:page>
I included a jQuery CDN reference too. I don't know if it's required for Highcharts or not.