I am using this plugin for the bar chart. I need to update the values day, week and month wise but the update function inside the plugin is not working.
Here is the codepen.
HTML
<div id="chart">
<h2 class="section-title">Images processed</h2>
<div class="cal-options">
<span>Day</span>
<span>Week</span>
<span class="active">Month</span>
</div>
</div>
JS
if($('#chart').length){
$('#chart').barChart({
height : 388,
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["May",33],
["June",11],
["July",23],
["August",16],
["September",28],
["October",21],
["November",32],
["December",19],
["January",13],
["February",19],
["March",24],
["April",18],
]
},
{
name : 'Dataset 2',
values : [
["May",5],
["June",5],
["July",5],
["August",5],
["September",5],
["October",5],
["November",5],
["December",5],
["January",5],
["February",5],
["March",5],
["April",5],
]
},
],
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
$(".cal-options span").each(function(){
$(this).click(function(){
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = {
bars : [
{
vertical: true,
drawToolTip: false,
stepsCount : 5,
barGap : 5,
name : 'Dataset 1',
values : [
["new-May",33],
["new-June",11],
["new-July",23],
["new-August",16],
["new-September",28],
["new-October",21],
["new-November",32],
["new-December",19],
["new-January",13],
["new-February",19],
["new-March",24],
["new-April",18],
]
},
{
name : 'Dataset 2',
values : [
["new-May",5],
["new-June",5],
["new-July",5],
["new-August",5],
["new-September",5],
["new-October",5],
["new-November",5],
["new-December",5],
["new-January",5],
["new-February",5],
["new-March",5],
["new-April",5],
]
},
],
}
// $("#chart").barChart({
// update: function(){};
// })
});
});
Not able to update the chart when clicked on the Day, Week, Month buttons. Can someone please help?
Draw a graph using a function of type with a new value. The following code shows how to do it.
var options = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["May", 33],
["June", 11],
["July", 23],
["August", 16],
["September", 28],
["October", 21],
["November", 32],
["December", 19],
["January", 13],
["February", 19],
["March", 24],
["April", 18],
]
},
{
name: 'Dataset 2',
values: [
["May", 5],
["June", 5],
["July", 5],
["August", 5],
["September", 5],
["October", 5],
["November", 5],
["December", 5],
["January", 5],
["February", 5],
["March", 5],
["April", 5],
]
},
]
if ($('#chart').length) {
DrawChar(options)
}
$(".cal-options span").each(function() {
$(this).click(function() {
$(".cal-options span").removeClass("active");
$(this).addClass("active");
var newoptions = [{
vertical: true,
drawToolTip: false,
stepsCount: 5,
barGap: 5,
name: 'Dataset 1',
values: [
["new-May", 33],
["new-June", 11],
["new-July", 23],
["new-August", 16],
["new-September", 28],
["new-October", 21],
["new-November", 32],
["new-December", 19],
["new-January", 13],
["new-February", 19],
["new-March", 24],
["new-April", 18],
]
},
{
name: 'Dataset 2',
values: [
["new-May", 5],
["new-June", 5],
["new-July", 5],
["new-August", 5],
["new-September", 5],
["new-October", 5],
["new-November", 5],
["new-December", 5],
["new-January", 5],
["new-February", 5],
["new-March", 5],
["new-April", 5],
]
},
];
DrawChar(newoptions);
});
});
function DrawChar(chartoptions) {
$('#chart').barChart({
height: 388,
bars: chartoptions,
colors: [
"#FF7D9C", "#6BBEB6", "#000000"
]
});
}
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
In a project, I want to work with Highcharts, but instead of putting the options code directly on to the website I rather would like to see it in an extra file, e.g. charts.js. Is it possible?
What I have done so far:
I created the general chart and it works. I tried to put the options code as shown on Highcharts in a file called charts.js and include it into the header. But it doesn't work, shows an error #13.
The code I used was
function getPointCategoryName(point, dimension) {
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']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
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);
}
}
}
}
}]
}
});
Is there a way to put the code into a fail and let it work as it would if code, CDN and Co. are on one page? Or is there anything I do wrong?
Highcharts error #13 means that Highcharts is unable to find the HTML element to render the chart in. From your description it looks like your script is fired before DOM is fully loaded. As a solution put all your code from chart.js file into DOMContentLoaded event callback function:
window.addEventListener('DOMContentLoaded', (event) => {
// chart.js
});
Or just put your script before the closing </body>:
<html>
....
<body>
....
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
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 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.