I want to create a chart with different series data. I have a poll with several question and every question has different options.
I tried to use this code :
$(function () {
$('#c_chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Question 1',
'Question 2',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: [['Option1', 'Option2']],
data: [49.9, 56]
}, {
name: 'Option3',
data: [83.6]
}
]
});});
How can I create this chart like following image:
Chart
my english is basic but, i try to splain rigth?
try to look this links, im not very sure if you need to move something in plotOptions:{} or chart:{}
the other options not draw the chart. i found this links, i'll hope help you
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels
grettins, from mexico :)
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Questions Answers'
},
xAxis: {
categories: ['Question1', 'Question2', 'Question3', 'Question4', 'Question5']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Option Ticked'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: false
}
},
series: [{
name: 'Option1',
data: [5, 3, 4, 7, 2]
}, {
name: 'Option2',
data: [3, 4, 4, 2, 5]
}, {
name: 'Option3',
data: [2, 5, 6, 2, 1]
}, {
name: 'Option4',
data: [3, 0, 4, 4, 3]
}]
});
});
Related
I am using the basic column chart example here:
Highchart Example from JSFiddle via HC docs
This is fine for a single xAxis series but I need one with double grouping like so:
I have the following HC script code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
['Jan', '2020'],
['Feb', '2020']
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [[49.9, 2020], [71.5, 2020]]
}, {
name: 'New York',
data: [[83.6, 2020], [78.8, 2020]]
}]
});
I need to figure out a way to make this work. I can use other JS charting libraries if they would be easier as I'm investigating a bunch of them.
I think that you can use the grouped categories highcharts module in this case.
Docs: https://github.com/blacklabel/grouped_categories
Highcharts.chart('container', {
chart: {
type: "column"
},
series: [{
data: [4, 14, 18, 5, 6, 5]
}, {
data: [4, 14, 18, 5, 6, 5].reverse()
}],
xAxis: {
categories: [{
name: "2020",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "2021",
categories: ["Carrot", "Potato", "Tomato"]
}]
}
});
Demo: https://jsfiddle.net/BlackLabel/tzkq2hjp/
I am using highcharts to render a column chart. Since its a Grouped-Stacked column chart, currently im getting legend names duplicated as you can see here in the fiddle:
http://jsfiddle.net/z7aLr6cu/
I am trying to render only unique names in the legends; in my case:
john fem
I'm basically trying to sup up all the legends together (john= > blue colum series + green + purple)
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: "Confirmed",
stack: "ACTIVE",
data: [4740, 1378, 8]
}, {
data: [2932, 141],
name: "Potential",
stack: "ACTIVE"
}, {
data: [1752, 11],
name: "Confirmed",
stack: "REOPENED"
},{
data: [1089, 2],
name: "Potential",
stack: "REOPENED"
},{
data: [2332, 1960, 42],
name: "Potential",
stack: "NEW"
},{
data:[480, 4684, 2258],
name: "Confirmed",
stack: "NEW"
}]
});
});
is this possible
Use linkedTo property:
series: [{
...,
id: 'john'
}, {
...,
id: 'fem'
}, {
...,
linkedTo: 'john'
}, {
...,
linkedTo: 'fem'
}, {
...,
linkedTo: 'john'
}, {
...,
linkedTo: 'fem'
}]
Live demo: http://jsfiddle.net/BlackLabel/a4sog5xb/
API Reference: https://api.highcharts.com/highcharts/series.bubble.linkedTo
I would like to place 2nd series of data in the middle of the X axis (inverted line chart).
Here is the fiddle and this is the result I would like to get:
https://jsfiddle.net/r03bvcj1/
https://i.imgur.com/Irqt4hi.png
I’ve managed to get it working partially for Y axis.However Impact Tolerance line has disappeared for some reason and I would like to have it against X axis.
https://jsfiddle.net/r03bvcj1/2/
Any help/pointers will be much appraciated.
var chart;
chart= Highcharts.chart('div-impactTolerance', {
chart: {
type: 'line',
inverted: true,
events: {
load: function() {
var check = $('#div-impactTolerance').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
tooltip: {
formatter: function () {
var formatter = this.y >1 ? ' days':' day';
var header ='<span style="font-size: 10px">' + this.key + '</span><br/>';
var point = this.series.name + ': <b>' + this.y + formatter + '</b><br/>';
return header + point;
}
},
credits: {
enabled: false
},
title: {
text: 'Impact Tolerance'
},
xAxis: [{
title: {
text: "Severity"
},
gridLineWidth: 1,
categories: ['Very High','High','Medium','Low']
},
{
visible: true,
title: {
text: "T"
},
gridLineWidth: 1,
categories: [1,2,3,4],
opposite: true
},
],
yAxis: {
tickInterval: 1,
allowDecimals:false,
title: {
text: "Time (days)"
},
min: 0,
gridLineWidth: 0,
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 6,
dashStyle: 'longdashdot',
label: {
text: 'Impact Tolerance ' ,
verticalAlign: 'middle',
textAlign: 'center',
x: -15
},
}]
},
series: [
{
name: 'Scenario Testing',
states: {
hover: {
enabled: false
}
},
data: [5,7,9,11,12,14,17,18],
xAxis: 1,
lineWidth: 0,
showInLegend: true,
marker: {
radius: 10
},
threshold: 6,
negativeColor: 'green',
color: 'red',
tooltip: {
valueDecimals: 2
}
},
{
name: 'Outage Duration',
states: {
hover: {
enabled: false
}
},
data: [1,2,3,4],
xAxis: 0,
lineWidth: 0,
showInLegend: true,
marker: {
radius: 10
},
threshold: 6,
negativeColor: 'green',
color: 'red',
tooltip: {
valueDecimals: 2
}
}
]
});
Currently there are two categories on the right on one category on the left. You should adjust your data in such a way that the x value does not exceed the number of categories:
xAxis: [{
...,
categories: ['Very High', 'High', 'Medium', 'Low']
},
{
...,
categories: [1, 2, 3, 4]
},
],
...,
series: [{
...,
data: [
[0, 5],
[0, 7],
[1, 9],
[1, 11],
[2, 12],
[2, 14],
[3, 17],
[3, 18]
]
},
{
...,
data: [1, 2, 3, 4]
}
]
Live demo: https://jsfiddle.net/BlackLabel/Lhpt2zdb/
Docs: https://www.highcharts.com/docs/chart-concepts/axes
Here is the basic demo for Highcharts Stacked & Grouped column layout. The tooltip shows the total for the stack using this call...
this.point.stackTotal
...however, there are 2 stacks in the group. How do I display the total for all stacks in the group. Something like...
this.point.groupTotal
...would be ideal, but that doesn't work
You can do this by adding an extra parameter to your tooltip function: shared:true and adding some extra code to sum up all the values within a grouped stack
Look at this example: JSFIDDLE
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y;
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I am using Highcharts to create a chart:
http://dev.speechlink.co.uk/David/sixthiteration/home.php
When scaling however, it seems to chop part of the right side of the chart off...I'm not entirely sure why..?
Here is my code:
jQuery:
chart = new Highcharts.Chart({
chart: {
renderTo: 'summarycontainer',
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: 'No. Entries Submitted This Month',
style: {
fontSize: 10
}
},
xAxis: {
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
yAxis: {
title: {
text: 'y-axis'
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
},
series: [{
type: 'scatter',
name: '',
data: [10, 20, 10, 20, 2, 3, 1, 9],
lineColor: '#f6a828',
color: '#418ed6'
}],
});
});
And in my HTML, I have a div container:
<div id = "summarycontainer" style="width: 250px; height: 250px"></div>
In code above you have:
data: [10, 20, 10, 20, 2, 3, 1, 9],
and in source of page thre is:
data: [10, 20, 10, 20, 2, 3, 1],
Maybe that you think the plot chops last dot?
edit:
Add: categories: ['', ''] to your xAxis :
xAxis: {
categories: ['', ''],
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
In my opinion there is a bug in highcharts.
edit 2:
For formatting tooltip use (below is only example!):
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},