I'm struggling with creating a stacked bar chart which basically compares week to week performance. I have the overall numbers charted fine:
I'm now being tasked with showing how individual proposals contribute to the overall number. Each week can have any number of proposals or none at all.
The desired outcome would look something like:
I'm building the series by week. So for "This Week" I would know {10, 30, 15, 4, 20, 10} "Last Week" I would know {20, 25}, "Two weeks ago" I would know {17, 3, 2, 2} etc.
Thanks for any help!
You need to use stacking option and divide data into series, for example:
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [2, 4, 0, 1, 4, 8]
}, {
data: [2, 4, 5, 0, 4, 8]
}, {
data: [2, 4, 0, 1, 4, 8]
}, {
data: [2, 4, 5, 1, 4, 8]
}],
xAxis: {
categories: [...]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4894/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.stacking
Related
I want to create a chart like the pic below
Each point has x, value, cat1, cat2
x-Axis to have DateTime data
y-Axis can be Category cat1. I want cat2 as a sub category/ as an analogy it could be a highchart series
Please do not suggest to take cartesian product of cat1 cat2 and plot a single category because that crowds the chart and looses the functionality to select via cat2
Cat1 and cat2 are not related to each other. Just think of it as 2 enum tags to each data point.
Ex for a daily cars sold data, Cat1 = [Hatchback, Sedan...], Cat2 = [Yellow, Red, Green] etc..
This is a very trivial usecase and I find it hard to believe that highchart cannot let me do it. i am sure I am missing something. Any examples or help would be highly appreciated since i have tried several approaches already now and spent considerable amount of time
The idea is not to have a mixture of column series or heatmap series. i am ok with same type for all series, I personally would prefer a heatmap solution
You can create two separate heatmap charts, both of them with two rows of data:
Highcharts.chart('container', {
...,
xAxis: {
type: 'datetime',
visible: false
},
series: [{
type: 'heatmap',
data: [
[0, 0, 10],
[1, 0, 19],
[2, 0, 8],
[3, 0, 24],
[4, 0, 67],
[0, 1, 92],
[1, 1, 58],
[2, 1, 78],
[3, 1, 117],
[4, 1, 48]
],
...
}]
});
Highcharts.chart('container2', {...});
Live demo: https://jsfiddle.net/BlackLabel/jLbvw43z/
Docs: https://www.highcharts.com/docs/chart-and-series-types/heatmap
Is it possible to have both colorAxis and series in the legend? http://jsfiddle.net/6k17dojn/ i see i can only show one at a time when I toggle this setting
colorAxis: {
showInLegend: true,
}
Currently to show a basic legend with colorAxis, you need to add some code to Highcharts core. This plugin below allows you to add colorAxis to a legend if showInLegend property is set to false:
(function(H) {
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
var colorAxisItems = [],
colorAxis = this.chart.colorAxis[0],
i;
if (colorAxis && colorAxis.options) {
if (colorAxis.options.dataClasses) {
colorAxisItems = colorAxis.getDataClassLegendSymbols();
} else {
colorAxisItems.push(colorAxis);
}
}
i = colorAxisItems.length;
while (i--) {
e.allItems.unshift(colorAxisItems[i]);
}
});
}(Highcharts))
Live demo: http://jsfiddle.net/BlackLabel/hs1zeruy/
API Reference: https://api.highcharts.com/highcharts/colorAxis.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
It's possible, but not with the data you currently work with. A heatmap's data is a set of coordinates, but here, your two series overlap.
Your raw data is :
[
[0,0,0.2, 0.4],
[0,1,0.1, 0.5],
[0,2,0.4, 0.9],
[0,3,0.7, 0.1],
[0,4,0.3, 0.6]
]
From there, you're mapping two series: 2018, and 2019 via the seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}] option.
You thus end up with the following two series:
2018 2019 2019 should be
[ [ [
[0, 0, 0.2], [0, 0, 0.4], [1, 0, 0.4],
[0, 1, 0.1], [0, 1, 0.5], [1, 1, 0.5],
[0, 2, 0.4], [0, 2, 0.9], [1, 2, 0.9],
[0, 3, 0.7], [0, 3, 0.1], [1, 3, 0.1],
[0, 4, 0.3] [0, 4, 0.6] [1, 4, 0.6]
] ] ]
Notice that in both cases, the coordinates are the same, but for 2019, the x value should be 1. Since you have 0 as x coordinate for both series, they overlap.
To fix you issue, you need to change your data (or pre-process it, whatever is easier). For example:
var data = '[[0,0,0.2, 0.4],[0,1,0.1, 0.5],[0,2,0.4, 0.9],[0,3,0.7, 0.1],[0,4,0.3, 0.6]]';
var rows = JSON.parse(data);
rows = $.map(rows, function(arr){
return [[
arr[0], arr[1], arr[2], // 2018
arr[0] + 1, arr[1], arr[3], // 2019
]];
});
// and the seriesMapping changes to
data: {
rows: rows,
firstRowAsNames: false,
seriesMapping: [{x: 0, y: 1, value: 2}, {x: 3, y: 4, value: 5}]
},
You can see it in action here: http://jsfiddle.net/Metoule/qgd2ca6p/6/
Can we fill colors like this in boxplot chart of Highcharts?
Please refer the image below:
You can calculate point color based on some algorithm, for example:
chart: {
type: 'boxplot',
events: {
load: function(){
var points = this.series[0].points,
color,
length = points.length;
Highcharts.each(points, function(point, i){
color = 'rgb(255,' + Math.floor(i * 255 / length) + ', 0)'
point.update({ fillColor: color }, false)
});
this.redraw();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5k8wfrgc/
Yes, its possible to control the fillColor for a boxplot.
This is a demonstration to show you:
http://jsfiddle.net/mqunbjrs/
If you take a look at the highcharts API you will see that instead of using an array with the 6 plot values, you can use an object with named values: https://api.highcharts.com/highcharts/series.boxplot.data
instead of this:
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
You would use this:
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
fillColor: "#00FF00"
}, {
x: 2,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
fillColor: "#FF00FF"
}]
This is my chart
I need that tick start from the start of my chart, without padding left.
I tried read docs, but I couldn't find anything about it
Per the docs it should be doing this anyway with xAxis.startOnTick:
Whether to force the axis to start on a tick.
Use this option with the minPadding option to control the axis start.
Defaults to false.
So, perhaps you overwrote this in your chart code?
Update:
So, from your code what you have is a categorical xAxis and an area line chart. Stylistically* this does not make much sense as the entire category "bin" is one single value and you are putting in time values (I assume since they are ['00:00', '05:00', '05:00', '05:00', '05:00']). Why not make an actual time series xAxis? This would give discrete x positions based upon the time and you could see that area chart a bit clearer.
Sample time-based xAxis:
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
startOnTick: false,
type: 'datetime'
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}]
});
});
What I mean "stylistically" is that you have hard breaks from "00:00" to "05:00". So let's assume that is 5 hours between categories. Does an area plot really convey any information to the user since you have a 5 hour gap between points? Wouldn't a simply column chart make more sense here? If this is even 5 minutes between categories it seems a little iffy to make this an area chart.
In the below demo link, if user clicks on series or legend [Jane or John] the values or graph dynamic sets the y axis values based on the series input.
Is there a way to set a static or equal set of values on either side of threshold? [7.5,5,2.5,0-2.5,-5,-7.5]??? which remains constant?
Example from highcharts demo section
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
You need to set min/max values on the Y-axis, like bellow
yAxis: {
min: -7.5,
max: 7.5
}
Or you can do let highcharts set the extremes, but set manually after
var chart = $('#container').highcharts({
...
}).highcharts();
var extremes = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(extremes.min, extremes.max);