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
i want to use list (not set) with different items.but its not working if it not constains to add item,
void main() {
List<List<int>> mylistint=[[1, 2, 5, 10],[1, 3],[1, 2, 19, 38],[1, 3],[1, 2, 5, 10],[1, 3],[1, 2, 19, 38],[1, 3]];
List<List<int>> listeddiffintlist(List<List<int>> list){
List<List<int>> returnlist=[];
for(var i=0;i<list.length;i++){
if(!returnlist.contains(list[i])){ //not working if contains it add also
returnlist.add(list[i]);
}
}
return returnlist;
}
List<List<int>> returnlist = listeddiffintlist( mylistint);
print (returnlist.toString());
//expected=> [[1, 2, 5, 10],[1, 3],[1, 2, 19, 38]]
// result=> [[1, 2, 5, 10], [1, 3], [1, 2, 19, 38], [1, 3], [1, 2, 5, 10], [1, 3], [1, 2, 19, 38], [1, 3]] more than 1 it contains [1, 3] or someone
}
contains are just using the == operator on the elements. Since lists in Dart does not implement the == operator, two lists is only equal if they are the same instance in memory. If you want to compare based on the content of the lists, you need to do that yourself or use a package for it.
In your example you can do something like this:
void main() {
List<List<int>> mylistint = [
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3],
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3]
];
List<List<int>> listeddiffintlist(List<List<int>> list) {
List<List<int>> returnlist = [];
for (var i = 0; i < list.length; i++) {
if (!returnlist.any((returnSubLists) =>
list[i].every((element) => returnSubLists.contains(element)))) {
returnlist.add(list[i]);
}
}
return returnlist;
}
List<List<int>> returnlist = listeddiffintlist(mylistint);
print(returnlist.toString()); // [[1, 2, 5, 10], [1, 3], [1, 2, 19, 38]]
}
Alternative, you can use the collection package where the ListEquality can be used:
import 'package:collection/collection.dart';
void main() {
List<List<int>> mylistint = [
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3],
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3]
];
List<List<int>> listeddiffintlist(List<List<int>> list) {
List<List<int>> returnlist = [];
for (var i = 0; i < list.length; i++) {
if (!returnlist.any(
(subList) => const ListEquality<int>().equals(subList, list[i]))) {
returnlist.add(list[i]);
}
}
return returnlist;
}
List<List<int>> returnlist = listeddiffintlist(mylistint);
print(returnlist.toString()); // [[1, 2, 5, 10], [1, 3], [1, 2, 19, 38]]
}
The last solution could also be shorten down to:
import 'package:collection/collection.dart';
void main() {
final myListInt = [
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3],
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3]
];
final returnList = myListInt.fold<List<List<int>>>([], (result, b) {
if (!result.any((a) => const ListEquality<int>().equals(a, b))) {
result.add(b);
}
return result;
}).toList();
print(returnList); // [[1, 2, 5, 10], [1, 3], [1, 2, 19, 38]]
}
Or (if you want to make a very short solution which are not that readable):
import 'package:collection/collection.dart';
void main() {
final myListInt = [
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3],
[1, 2, 5, 10],
[1, 3],
[1, 2, 19, 38],
[1, 3]
];
final returnList = myListInt.fold<List<List<int>>>(
[],
(result, b) => !result.any((a) => const ListEquality<int>().equals(a, b))
? (result..add(b))
: result).toList();
print(returnList); // [[1, 2, 5, 10], [1, 3], [1, 2, 19, 38]]
}
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);
this is the code:
$(function () {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.2)' },
back: { size: 1, color: 'rgba(0,0,0,0.4)' },
side: { size: 8, color: 'rgba(0,0,0,0.6)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
reversed: true,
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
colorByPoint: true,
data: [[8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
},
{ type: "column",
depth: 250,
data: [0]
}],
plotOptions: {
series: {
pointWidth: 200
}
},
});
and this is jsfiddle:
http://jsfiddle.net/Rodrigoson6/2yfebsgn/
I want to have a chart that reminds the very 3d. I can do only with colors and gradients. It would be very important to add another properties at the "frame" (on top), because in that way i coulde use other colors and gradients...
But is impossible.
The yAxis is reversed, because in future on bottom (that with yaxis reversed is at the top) i will add an image...
But on bottom there will be nothing....
So, i would like to add a column in my scatter chart. But i want that the only column must be at the bottom e in the chart (now the column is at the top and half outside of chart)...
Is possible ?
Maybe another solution could be to add a rect ? but the problem is that my chart is scatter type and draggable.
Thanks
If there is any data with 0 in the heatmap it is not aligned.
Set some data to 0 in the heatmap. The data with value of 0 is not aligned. Is there anything we can do to align it?
http://jsfiddle.net/yg0v13j6/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
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'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 0], [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: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
});
It's a bug in 4.0.4 version, fixed on master branch: http://jsfiddle.net/yg0v13j6/1/
You can add:
format: '{point.value}',
to your dataLabels configuration and it will align the number properly.
I fixed the problem by upgrading from version 4.0.1 to version 4.2.5. So the error must have been fixed somewhere between those two versions. But it is not merely a bug in 4.0.4 (as it has been claimed) since I also experienced the problem in version 4.0.1.
Matheus Baumgart's fix about adding a format key to the JSON did not work for me.