Related
Is it possible to have the same feature that you get in Apache echarts. Refer to the following Apache echarts example in JS snippet, where the legend given by type:"piecewise" allows the user to hide on click particular color values. How can i get the same thing in Highcharts. The usual heatmap shows a bar legend, but I want the conventional legend that you see in line or bar charts. Thanks.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
// prettier-ignore
const hours = [
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'
];
// prettier-ignore
const days = [
'Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
];
// prettier-ignore
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
type: 'piecewise'
},
series: [
{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Yes, it is possible with Highcharts. You need to only use data-classes in color-axis settings.
colorAxis: {
dataClasses: [{
from: 0,
to: 50
}, {
...
}, {
...
}],
...
}
Live demo: https://jsfiddle.net/BlackLabel/vk0t7g6n/
API Reference: https://api.highcharts.com/highcharts/colorAxis
Docs: https://www.highcharts.com/docs/maps/color-axis
When using UICollectionViewFlowLayout's sectionHeadersPinToVisibleBounds = true in UICollectionView, UICollectionViewDataSourcePrefetching's func prefetchItemsAt indexPaths always repeats indexPaths, like:
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
When delete sectionHeadersPinToVisibleBounds = true (or set the value to false) array of indexPaths becomes correct in prefetchItemsAt indexPaths:
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 4], [0, 5], [0, 6], [0, 7]]
collectionView(_:prefetchItemsAt:) [[0, 8], [0, 9]]
collectionView(_:prefetchItemsAt:) [[0, 10], [0, 11]]
collectionView(_:prefetchItemsAt:) [[0, 12], [0, 13]]
collectionView(_:prefetchItemsAt:) [[0, 14], [0, 15]]
collectionView(_:prefetchItemsAt:) [[0, 16], [0, 17]]
Can you please tell me how to fix this?
Following the demo example for the heatmap chart,
jsfiddle demo
the series name doesnt show up for me, what am i missing?
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
After consulting the topic in comments below the question, you can set your series name as Axis.title inside of Chart.events.load event function, using setTitle() method. Then it should be dynamically set at every chart load basing on your current series name. Here is the code which shows how to achieve it:
chart: {
events: {
load() {
var chart = this
var seriesName = chart.series[0].name
chart.xAxis[0].setTitle({ text: seriesName, style: { fontWeight: 'bold' } })
}
}
}
Live example: https://jsfiddle.net/9rcsqyov/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#setTitle
I am trying to adapt a highcharts heatmap from raw coding to the Yii2 plugin by Milos Schuman. Area and line charts are working but there is not an example of using heatmap and I tried almost everything.
This is the code as shown in highcharts demo:
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
And a sample of Area chart using the Yii2 widget:
use miloschuman\highcharts\Highcharts;
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Fruit Consumption'],
'xAxis' => [
'categories' => ['Apples', 'Bananas', 'Oranges']
],
'yAxis' => [
'title' => ['text' => 'Fruit eaten']
],
'series' => [
['name' => 'Jane', 'data' => [1, 0, 4]],
['name' => 'John', 'data' => [5, 7, 3]]
]
]
]);
The problem basically is that in case of a heatmap chart it is required to specify that the heatmap module is needed before the options description like that:
'scripts' => [
'modules/heatmap', // adds heatmap support
],
That is a working sample based on the highcharts demo:
$heatmap_options = [
'scripts' => [
'modules/heatmap', // adds heatmap support
],
'options' => [
'title' => ['text' => 'Sales per employee per weekday'],
'chart' => [
'type' => 'heatmap'
],
'xAxis' => [
'categories' =>['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
],
'yAxis' => [
'categories' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
],
'colorAxis' =>[
],
'series' => [[
'name' => 'Sales per employee',
'borderWidth' => 1,
'data' => [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117],
[1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114],
[3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12],
[5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82],
[7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31],
[9, 3, 48], [9, 4, 91]],
'dataLabels' => [
'enabled' => true,
'color' => '#000000'
]
]
]
]
];
echo Highcharts::widget($heatmap_options);
In a stacked chart with a data series in the format of [x, y] there is a larger margin on the left and on the right side. I have created the following jsfiddle to with sample data:
http://jsfiddle.net/ymyrA/4/
The code of the chart is as follows:
$(function () {
var chart = new Highcharts.Chart({
chart: {"renderTo": "container", "type": "column"},
colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a", "#4572A7", "#AA4643", "#89A54E", "#80699B", "#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"],
credits: {"enabled": false},
plotOptions: {"column": {"stacking": "normal"}},
series: [
{"name": "Muster1", "data": [
[11, 1],
[32, 1]
]},
{"name": "Muster2", "data": [
[11, 7],
[12, 4],
[14, 4],
[15, 1],
[16, 1],
[17, 4],
[18, 6],
[19, 2],
[20, 1],
[21, 1],
[22, 1],
[25, 3],
[26, 2],
[28, 1],
[29, 1],
[30, 1]
]},
{"name": "Muster 3", "data": [
[11, 2],
[13, 2],
[15, 1],
[16, 3],
[18, 5],
[19, 11],
[20, 8],
[21, 1],
[23, 3],
[24, 12],
[27, 3],
[28, 4],
[30, 3],
[31, 3],
[33, 3],
[34, 3]
]}
],
title: {"text": null},
xAxis: {"title": {"text": "Week"}},
yAxis: {"title": {"text": "Count"}}
});
});
I have tried with min and max values, categories, etc. and nothing worked out. How can I adjust the chart to be displayed in full size?
I have updated the code and the jsfiddle with the proper sorting. I was using 3.0 and not 3.05 therefore I had no errors in the console. With the latest version I have to issues remaining. One is the above mentioned large margin at the right and left side and the other one is i am unable (even with tickInterval) to have a tick per calendar week. Based on the above mentioned sample the entire chart should have the range from x=11 to x=34 with a tick on each x.
The problem is with calculated pointRange for first series - when you have only two points, for x=11 and x=31 it is assumed that minimum interval between points in that series is 20, so Highcharts will try to set interval something about 20. For such cases you need to use pointRange for example set it to 1, see: http://jsfiddle.net/ymyrA/5/