Related
(Highcharts version 6)
Is it possible to have a time line looking chart in addition to data points like in this example:
https://jsfiddle.net/s1eL30Lh/97/
<script src="https://code.highcharts.com/stock/highstock.js"></script>
but without using highstock and instead only use highcharts ?
I know it's possible to use xrange module but it's not quite the same:
https://jsfiddle.net/deep3015/q18yvy75/
If the ranges are long enough to simulate a line then you lack the ability to add "data points" on top of the line, and if you make the ranges small enough to look like data points then you don't have a line.
NOTE
I'm aware of the new chart type 'timeline' in version 7 but I need to work with version 6.1
Yes, it is possible. However, you can't use flags series because it is only supported by Highstock. Check the demo and code posted below.
Code:
function toMs(yeah, month) {
return Date.UTC(yeah, month, 1);
}
var series = [{
// First series
name: 'Running',
color: 'green',
id: 'green',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2000, 1), toMs(2002, 8)],
[toMs(2006, 10), toMs(2006, 11)]
]
}]
}, {
// Second series
name: 'Filed',
color: 'yellow',
id: 'yellow',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2002, 8), toMs(2006, 10)]
]
}]
},
{
// Second series
name: 'Granted',
color: 'blue',
id: 'blue',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2006, 11), toMs(2021, 8)]
]
}]
}
].map(function(series) {
series.data = [];
series.dataRaw.forEach(function(dataRaw) {
dataRaw.xRanges.forEach(function(xRange) {
series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
}); // forEach
}); // forEach
return series;
});
console.log(series);
var chart = Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: 'Example'
},
plotOptions: {
scatter: {
lineWidth: 5,
marker: {
enabled: true,
symbol: 'circle',
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
radius: 5
},
dataLabels: {
enabled: true,
align: 'right',
rotation: -30,
x: -2,
y: 15,
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
},
tooltip: {
pointFormatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
}
},
flags: {
lineWidth: 1
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
minTickInterval: 365 * 24 * 36e5,
labels: {
align: 'left'
},
plotBands: [{
from: Date.UTC(2000, 10, 27),
to: Date.UTC(2004, 11, 1),
color: '#EFFFFF',
label: {
text: 'Office 1',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2004, 11, 1),
to: Date.UTC(2012, 9, 1),
color: '#FFFFEF',
label: {
text: 'Office 2',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2012, 9, 1),
to: Date.UTC(2020, 10, 27),
color: '#FFEFFF',
label: {
text: 'Office 3',
style: {
color: '#999999'
},
y: 30
}
}]
},
yAxis: {
tickInterval: 1
},
series: series,
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)'
},
labels: [{
distance: 10,
point: {
xAxis: 0,
yAxis: 0,
x: toMs(2002, 8),
y: 1
},
text: 'Filled Date'
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/6eahoxjv/
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
i tried to create this charts with area chart but i can't get it to work :
here is the jsfiddle : http://jsfiddle.net/okc8q0zn/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: [67,69]
},
credits: {
enabled: false
},
series: [ {
name: '67',
data: [24,24],
color: '#0F0'
}, {
name: '69',
data: [ 17,17],
color: '#00F'
}]
});
});
thank you.
You will need to customize the xAxisand the yAxis to only show the desired values and some modification on the series too like this :
xAxis: {
max: 80,
tickInterval: 1,
tickWidth: 0,
labels: {
step: 1,
formatter: function() {
if (this.value === 67 || this.value === 69) {
return this.value;
}
}
}
},
yAxis: {
max: 30,
tickInterval: 1,
tickWidth: 0,
gridLineWidth:0,
labels: {
step: 1,
formatter: function() {
if (this.value === 17 || this.value === 24) {
return this.value;
}
}
}
},
series: [{
name: '67',
data: [{
x: 0,
y: 17
}, {
x: 69,
y: 17
}],
color: 'rgba(30,80,250,0.5)'
}, {
name: '69',
data: [{
x: 0,
y: 24
}, {
x: 67,
y: 24
}],
color: 'rgba(250,250,50,0.3)'
}]
Fiddle
Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/
Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/
This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle