Highcharts: Getting x-axis to display legend - javascript

firstly here is my code
http://jsfiddle.net/woon123/5t2gpyx7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'venue_chart',
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: "Chicken Up # Jurong East",
data: [{
name: "Chicken Up # Jurong East",
y: 30,
drilldown: "Chicken Up # Jurong East"
}]
}, {
name: "Chicken Up # Tanjong Pagar",
data: [{
name: "Chicken Up # Tanjong Pagar",
y: 50,
drilldown: "Chicken Up # Tanjong Pagar"
}]
}, {
name: "Chicken Up # Tampines",
data: [{
name: "Chicken Up # Tampines",
y: 60,
drilldown: "Chicken Up # Tampines"
}]
}, ],
drilldown: {
series: [{
name: "Redemption Count",
id: "Chicken Up # Jurong East",
data: [
[
"Yangpa Bomb Introductory Promo", 5],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 4],
[
"Soju Cocktails at $17.00", 1],
[
"12345678", 10],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tanjong Pagar",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 10],
[
"12345678", 10],
[
"Early Bird 20% Off Bill", 3],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tampines",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 15],
[
"12345678", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, ]
}
});
});
My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up # Tampines.
I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.
Another issue is after I drill down.
In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.
I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.
I would like some advice on how to make both the legend and x-axis be the same.
Thank you!

i give you two fiddles,these can be a clue !
first: fiddle
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
plotOptions: {
column: {
grouping: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: [ { name: "Description" },
{ name: "Description1" },
{ name: "Description2" },
{ name: "Description3" },
{ name: "Description4" },
{ name: "Description5" } ]
});
});
second:fiddle
$(function () {
// Create the chart
$('#container').highcharts({
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: [
['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]
]
}]
}
});
});
happy coding !

Related

Highcharts age pyramid stacked bar (grouping)

I would like to use the highcharts age pyramid for men and women. Men and women can fall into three different categories. For example a, b and c. I would like to have a stacked bar for the three groups for men and women separately per age. Hopefully you can help me with this.
I have created the following age pyramid example, but as you can see, it has not yet been possible to add more than two groups.
JavaScript
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#3F7EBF'],
[1, '#1F3F5F']
]
},
}, {
data: [2, 5],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#980061'],
[1, '#4C0030']
]
},
yAxis: 1
}]
});
This is what i want to achieve in the end:
This chart type is not supported by Highcharts library out of the box.
However, something similar can be created using two charts next to each other with one axis reversed. Check demo and code posted below.
Code:
Highcharts.chart('container1', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
enabled: false
}
},
yAxis: {
min: 0,
reversed: true,
title: {
text: 'males',
align: 'high'
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [5, 3, 4]
}, {
name: 'B',
data: [2, 2, 3]
}, {
name: 'C',
data: [3, 4, 4]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
align: 'center'
}
},
yAxis: {
min: 0,
title: {
text: 'females',
align: 'low'
}
},
credits: {
enabled: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [2, 4, 1]
}, {
name: 'B',
data: [5, 2, 1]
}, {
name: 'C',
data: [4, 1, 2]
}]
});
#container1 {
width: 45%;
float: left;
}
#container2 {
width: 55%;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
Demo:
https://jsfiddle.net/BlackLabel/cg5af2dz/
Just a multiple series of data
series: [{
name: 'A (m)',
data: [6, 2],
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
yAxis: 1
},
...
]
and stacking: 'normal'
series: {
stacking: 'normal'
}
solves the problem
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
height: 170,
marginLeft: 10
},
title: '',
plotOptions: {
bar: {
dataLabels: {
enabled: false,
}
},
series: {
stacking: 'normal'
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
offset: 0,
labels: {
enabled: true,
align: 'left',
x: -18
},
stackLabels: {
enabled: true,
align: 'right',
x: 20
},
title: {
text: 'age group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: -210,
text: 'males'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 210,
text: 'females'
},
stackLabels: {
enabled: true,
align: 'left',
x: -20
},
gridLineWidth: 0
}],
series: [{
name: 'A (m)',
data: [6, 2],
color: '#000',
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
color: '#02aff1',
yAxis: 1
}, {
name: 'C (m)',
data: [2, 2],
color: '#e0301e',
yAxis: 1
}, {
name: 'A (f)',
data: [2, 2],
color: '#000',
}, {
name: 'B (f)',
data: [2, 2],
color: '#02aff1',
}, {
name: 'C (f)',
data: [6, 2],
color: '#e0301e',
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>

Draw vertical lines and horizontal bands

Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});

add a bar Highcharts series

I want to add another bar to a category. for example I want to put another bar in Category 1 keeping my structure. but I'm adding data without an array. I do not want to use this structure for example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
}]
I must use this:
series: [{
"data": [{
"name": "number1",
"y": 10,
"color": "#FF0000"
}, {
"name": "number2",
"y": 42,
"color": "#FFFF00"
}, {
"name": "number3",
"y": 60
}]
}]
I do it because I want to customize the name of each bar. but I do not know
   how to put another bar in the same category as show in the picture
this is my file...
http://jsfiddle.net/v51dxpLn/
I want every bar is assigned a different name and can put it in the same category. so far as I have my exampe I can only have one bar by category. I need to put n bars in a bar every category but still retains its different name.
Solution is to use multiple series, like here: http://jsfiddle.net/awe4abwk/1/
$('#container').highcharts({
chart: {
type: 'bar',
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
y: 10,
x: 0,
name: 'Bar 1'
}, {
y: 10,
x: 1,
name: 'Bar 2'
}, {
y: 10,
x: 2,
name: 'Bar 3'
}]
}, {
data: [{
y: 20,
x: 0,
name: 'Bar X'
}, {
y: 20,
x: 1,
name: 'Bar Y'
}, {
y: 20,
x: 2,
name: 'Bar Z'
}]
}]
});

Add a gap between the second and third series in a Highcharts column plot with four series displayed

I have a Highcharts column plot that shows four series.
I would like series one and two to be touching each another (the two blue ones), then have a small gap, and then have series three and four touching each another (the orange ones). Can this be done?
I haven't found a way to do it myself, and can't find an example on here or by searching on Google. Is anyone able to offer any suggestions?
$(function() {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({
text: ''
});
chart.yAxis[0].setTitle({
text: 'Number'
});
if (parentSeriesName.indexOf('DLP') != -1) {
chart.xAxis[0].setTitle({
text: 'DLP range (mGy.cm)'
});
}
if (parentSeriesName.indexOf('CTDI') != -1) {
chart.xAxis[1].setTitle({
text: 'CTDI range (mGy)'
});
}
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
if (this.series.name.indexOf('DLP') != -1) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
} else {
returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
}
return returnValue;
};
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.setTitle({
text: defaultTitle
}, {
text: ''
});
chart.yAxis[0].setTitle({
text: 'DLP (mGy.cm)'
});
chart.yAxis[1].setTitle({
text: 'CTDIvol (mGy)'
});
chart.xAxis[0].setTitle({
text: ''
});
chart.xAxis[1].setTitle({
text: ''
});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({
labels: {
rotation: 90
}
});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: 'CTDIvol (mGy)'
}
});
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
labels: {
useHTML: true,
rotation: 90
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
labels: {
useHTML: true,
rotation: 90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}, {
title: {
text: 'CTDIvol (mGy)'
},
opposite: true
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 70
},
tooltip: {},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0.2,
pointPadding: 0
}
},
series: [{
name: 'Mean DLP',
color: '#2b8cbe',
data: [{
name: 'Abdomen',
y: 150,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 73,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 20,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Median DLP',
color: '#7bccc4',
data: [{
name: 'Abdomen',
y: 140,
drilldown: 'AbdomenDLP'
}, {
name: 'Chest',
y: 63,
drilldown: 'ChestDLP'
}, {
name: 'Sinus',
y: 15,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}, {
name: 'Mean CTDI',
color: '#d7301f',
data: [{
name: 'Abdomen',
y: 57.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 25.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 43.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}, {
name: 'Median CTDI',
color: '#fdcc8a',
data: [{
name: 'Abdomen',
y: 52.2,
drilldown: 'AbdomenCTDI'
}, {
name: 'Chest',
y: 20.8,
drilldown: 'ChestCTDI'
}, {
name: 'Sinus',
y: 38.4,
drilldown: 'SinusCTDI'
}],
tooltip: {
valueSuffix: ' mGy'
},
yAxis: 1
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Chest DLP',
id: 'ChestDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}, {
name: 'Abdomen CTDI',
id: 'AbdomenCTDI',
xAxis: 1,
data: [
['up to 20', 4],
['up to 22', 9],
['up to 24', 12],
['up to 26', 8],
['up to 28', 2]
]
}, {
name: 'Chest CTDI',
id: 'ChestCTDI',
xAxis: 1,
data: [
['up to 10', 4],
['up to 12', 9],
['up to 14', 12],
['up to 16', 8],
['up to 18', 2]
]
}, {
name: 'Sinus CTDI',
id: 'SinusCTDI',
xAxis: 1,
data: [
['up to 14', 4],
['up to 16', 9],
['up to 18', 12],
['up to 20', 8],
['up to 22', 2]
]
}]
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/
Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position.

How to set an option in Highchart inactive by default

I have this code here from this page: http://www.highcharts.com/demo/combo
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: '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] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
And it produces this statistic here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
I would like to be able to set "John" and "Joe" inactive by default. Is there a way to make this? It should be possible to activate them though.
You want to initially draw in an "invisible" state?
{
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0],
visible: false // <-- set visibility to false
},
Fiddle here.

Categories