Related
I need to design the same below image chart example in Highchart.js which is built in excel. Can anyone please help me to develop this in highcharts.js only like the below image?
Image Preview
I already have implemented it in a similar way. But I need this in a different group of colors and combinations in the same chart. -
`https://jsfiddle.net/shwetapandey/rwmxoka5`
I suggest to add new series, with different xAxis, series.columnrange.xAxis. To styling you have options to adjust like xAxis.left and xAxis.top.
chart: {
type: 'columnrange',
},
xAxis: [{
width: '33%',
offset: 0,
}, {
left: '50%',
width: '33%',
offset: 0,
}],
plotOptions: {
xAxis: {
labels: {
enabled: true
}
},
columnrange: {
grouping: false,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Joe',
color: '#E5DDE3',
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
]
},
{
name: 'Jane',
color: '#BEA9BA',
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#A5879E',
name: 'John',
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
},
{
name: 'Joe1',
color: '#FFA500',
xAxis: 1,
data: [
[-5, 5],
[-10, 10],
[-13, 13],
[-16, 16],
[-19, 19]
].reverse()
},
{
name: 'Jane1',
color: '#FFA500',
xAxis: 1,
data: [
[-3.5, 3.5],
[-6, 6],
[-7, 7],
[-9, 9],
[-12, 12]
]
},
{
color: '#FFA500',
name: 'John1',
xAxis: 1,
data: [
[-1.5, 1.5],
[-2, 2],
[-3, 3],
[-4, 4],
[-5, 5]
]
}
]
Demo: https://jsfiddle.net/BlackLabel/cpjgvds9/
To control each series you need to write a custom legend control, for this you can use legend.labelFormatter, that give you callback function to format each of the series' labels.
EDIT ------
To control many group series I used callback function events.legendItemClick builded in series events. They give way to manage series at legend in that case I compare name of series and index of items to hide and show group of series with custom legend.
events: {
legendItemClick: function() {
let name = this.name.substring(this.name.length - 1, this.name.length);
let _i = this._i;
this.chart.series.forEach(function(p, i) {
console.log('p: ', p, 'i: ', i);
if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
(!p.visible) ? p.show(): p.hide()
}
})
}
}
Demo: https://jsfiddle.net/BlackLabel/v0kt5b14
I wan't to create a heatmap for different days and months, but i run into a problem that xAxis doesn't change when i add aditional element in array it can have only 10 elements but i need 12.
The same problem with yAxis that is only 5 elements, but i need to add 7 in total.
After adding another element to X or Y axis - nothing happening.
JSFiddle included - https://jsfiddle.net/nw6ux40e/
JS below.
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura', 'Michi']
},
yAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
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'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
}); ```
If you want to use categories you will need to add the new values to the category array.
Next, you will need to add wanted points. Notice that array looks like this: [x, y, value], so if you want to increase the yAxis labels you will need to add an additional point for each category.
Demo: https://jsfiddle.net/BlackLabel/8pts76bn/
Data example:
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[0, 5, 67],
API: https://api.highcharts.com/highcharts/series.heatmap.data
as far as I can tell I've mirrored the Series format as shown in ApexCharts' examples but the chart looks really wrong.
I've made a codepen with my test data and the chart rendering awkwardly.
I've tried it with different date formats but they all render the same.
https://codepen.io/yaehjs/pen/wvBdMWB
series: [
{
name: "Damage",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 8],
[1576713600000, 14],
[1576800000000, 15]
]
},
{
name: "Injury",
data: [[1576627200000, 1], [1576713600000, 4]]
},
{
name: "Slip/Fall",
data: [
[1572739200000, 1],
[1576022400000, 2],
[1576108800000, 3],
[1576540800000, 5]
]
},
{
name: "Spill",
data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
},
{
name: "Personnel",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 9],
[1576713600000, 12]
]
},
{
name: "Equipment",
data: []
}
],
Can anyone see where I went wrong with my data?
For anyone looking at this in the future the weirdness stems from one core issue. For timeline charts all series need to have the same date data-points otherwise the chart won't get rendered properly.
Here is a sample of the correct data:
[{
"totalCount": 15,
"name": "Damage",
"data": [
[ "2019-11-03", 0],
[ "2019-11-05", 1],
[ "2019-11-12", 2],
[ "2019-11-25", 3],
[ "2019-12-01", 3],
[ "2019-12-03", 4],
[ "2019-12-04", 5],
[ "2019-12-08", 6],
[ "2019-12-11", 6],
[ "2019-12-12", 6],
[ "2019-12-17", 7],
[ "2019-12-18", 8],
[ "2019-12-19", 14],
[ "2019-12-20", 15],
[ "2019-12-21", 15]
]
},
{
"totalCount": 4,
"name": "Injury",
"data": [
[ "2019-11-03", 0],
[ "2019-11-05", 0],
[ "2019-11-12", 0],
[ "2019-11-25", 0],
[ "2019-12-01", 0],
[ "2019-12-03", 0],
[ "2019-12-04", 0],
[ "2019-12-08", 0],
[ "2019-12-11", 0],
[ "2019-12-12", 0],
[ "2019-12-17", 0],
[ "2019-12-18", 1],
[ "2019-12-19", 4],
[ "2019-12-20", 4],
[ "2019-12-21", 4]
]
}
//...,
]
Code Pen: https://codepen.io/yaehjs/pen/wvBdMWB
var options = {
chart: {
height: 350,
type: "area",
stacked: true,
events: {
selection: function(chart, e) {
console.log(new Date(e.xaxis.min));
}
}
},
colors: ["#008FFB", "#00E396", "#CED4DC"],
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
series: [
{
name: "Damage",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 8],
[1576713600000, 14],
[1576800000000, 15]
]
},
{
name: "Injury",
data: [[1576627200000, 1], [1576713600000, 4]]
},
{
name: "Slip/Fall",
data: [
[1572739200000, 1],
[1576022400000, 2],
[1576108800000, 3],
[1576540800000, 5]
]
},
{
name: "Spill",
data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
},
{
name: "Personnel",
data: [
[1572912000000, 1],
[1573516800000, 2],
[1574640000000, 3],
[1575331200000, 4],
[1575417600000, 5],
[1575763200000, 6],
[1576540800000, 7],
[1576627200000, 9],
[1576713600000, 12]
]
},
{
name: "Equipment",
data: []
}
],
fill: {
type: "gradient",
gradient: {
opacityFrom: 0.6,
opacityTo: 0.8
}
},
legend: {
position: "top",
horizontalAlign: "left"
},
xaxis: {
type: "datetime"
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
/*
// this function will generate output in this format
// data = [
[timestamp, 23],
[timestamp, 33],
[timestamp, 12]
...
]
*/
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.6/apexcharts.min.js"></script>
<div id="chart"></div>
I'm using eCharts to plot some scatterplots. I have several data series, and what I want is for each one to sequentially appear following an animation of my choice. What's happening instead is that the first series animates by my choice, but the subsequent ones revert to the default animation, even though (as far as I can see) I'm still defining the animation for them.
Following is the shortest complete example I can make ...
var chartOptions = function(seriesData) {
let option = {
xAxis: {
min: 0,
max: 11
},
yAxis: {
min: 0,
max: 11
},
series: [{
name: "Series 1",
type: 'scatter',
data: seriesData,
color: "red",
animationDelay: function(idx) {
return idx * 250;
},
animationEasingUpdate: "linear"
}, ]
};
return option;
};
var nextSeries = function(seriesData) {
let series = {
series: [{
name: "Next series",
type: 'scatter',
data: seriesData,
color: "blue",
animationDelay: function(idx) {
return idx * 250;
},
animationEasingUpdate: "linear"
}, ]
};
return series;
};
var series1 = [
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5]
];
var series2 = [
[10, 10],
[9, 9],
[8, 8],
[7, 7],
[6, 6]
];
var series3 = [
[10, 10],
[1, 1],
[8, 8],
[2, 2],
[6, 6]
];
var seriesAll = [series1, series2, series3]
var options = chartOptions(series1);
var chart1 = echarts.init(document.getElementById("ChartView"));
chart1.setOption(options);
var i = 0;
var timer = setInterval(function() {
i++;
if (i >= seriesAll.length) {
clearInterval(timer)
} else {
var nextOptions = nextSeries(seriesAll[i])
chart1.setOption(nextOptions);
};
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>
<div id="ChartView" style="height:300px;max-width:300px;">
</div>
Well, you can clear all scatterplots first then plot next series like below:
chart1.setOption(nextSeries([]));
chart1.setOption(nextOptions);
var chartOptions = function(seriesData) {
let option = {
xAxis: {
min: 0,
max: 11
},
yAxis: {
min: 0,
max: 11
},
series: [{
name: "Series 1",
type: 'scatter',
data: seriesData,
color: "red",
animationDelay: function(idx) {
return idx * 250;
},
animationEasingUpdate: "linear"
}, ]
};
return option;
};
var nextSeries = function(seriesData) {
let series = {
series: [{
name: "Next series",
type: 'scatter',
data: seriesData,
color: "blue",
animationDelay: function(idx) {
return idx * 250;
},
animationEasingUpdate: "linear"
}, ]
};
return series;
};
var series1 = [
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5]
];
var series2 = [
[10, 10],
[9, 9],
[8, 8],
[7, 7],
[6, 6]
];
var series3 = [
[10, 10],
[1, 1],
[8, 8],
[2, 2],
[6, 6]
];
var seriesAll = [series1, series2, series3]
var options = chartOptions(series1);
var chart1 = echarts.init(document.getElementById("ChartView"));
chart1.setOption(options);
var i = 0;
var timer = setInterval(function() {
i++;
if (i >= seriesAll.length) {
clearInterval(timer)
} else {
var nextOptions = nextSeries(seriesAll[i])
chart1.setOption(nextSeries([]));
chart1.setOption(nextOptions);
};
}, 2000);
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"> </script>
<div id = "ChartView" style = "height:300px;max-width:300px;" >
</div>
I have some problems to show some values in bars. I want a chart like this: Example. I don't know what I'm missing in here.
$('#myModalChart').on('shown.bs.modal', function (e) {
var data = [{
label: "Foo",
data: [
[2],
[3, 9, 12],
[6, 0, 3],
[9, 11, 12],
[12, 0, 1],
[15, 0, 2],
[18],
[3, 12, 12],
[9, 12, 12]
]
},
{
label: "Bar",
data: [
[2],
[3, 0, 5],
[6, 3, 7],
[9, 4, 11],
[12, 1, 3],
[15, 2, 5],
[18]
]
},
{
label: "Tree",
data: [
[2],
[3, 5, 9],
[6, 7, 15],
[9, 0, 4],
[12, 3, 13],
[15, 5, 17],
[15, 17, 17],
[12, 13, 13],
[6, 15, 15],
[18]
]
},];
var options = {
series: {
bars: {
show: true,
barWidth: 1
}
},
xaxis: {
align: "center",
ticks: [
[3.5, 'text1'],
[6.5, 'text2'],
[9.5, 'text3'],
[12.5, 'text4'],
[15.5, 'text5']
]
}
};
var plot = $.plot("#chart2", data, options)
});
I want a chart like this, with labels in it. And I wish have in all of them.
What I'm missing?
You have to create and place the data value labels yourself. How to do this can be seen in this answer.
I created a fiddle adjusting it to your code. Only the first data series (foo) has labels for now. you will have to adjust the position. The relevant code:
$.each(plot.getData()[0].data, function (i, el) {
if (el.length > 1) {
var o = plot.pointOffset({
x: el[0],
y: el[1]
});
$('<div class="data-point-label">' + el[1] + '</div>').css({
position: 'absolute',
left: o.left + 4,
top: o.top,
'text-align': 'center',
display: 'none'
}).appendTo(plot.getPlaceholder()).fadeIn('slow');
}
});
But you may also have to cleanup your data. You have multiple data points with the same x values (which means bars behind / in front of each other which leads to some being invisible). Take a look at the side-by-side and stack plugins on the flot plugin page.