As said, X axis label is not showing months as expected. What I doing wrong ?
Here is my example code
HTML:
<div id="placeholder"></div>
CSS:
#placeholder {
height: 300px;
}
Javascript:
var d1 = [
[1388530800, 4],
[1393542000, 8],
[1396216800, 3],
[1398808800, 16],
[1401487200, 2],
[1404079200, 2],
[1406757600, 28],
[1409436000, 24],
[1412028000, 0],
[1414710000, 18],
[1417302000, 0],
[1419980400, 11]
];
var d2 = null;
var d3 = null;
var d4 = null;
var d5 = null;
var d6 = [
[1388530800, 2],
[1396303200, 2],
[1398895200, 1],
[1401573600, 1],
[1406844000, 1],
[1409522400, 1],
[1417388400, 1]
];
var data1 = [{
data: d1,
points: {
fillColor: "#d1e399"
},
color: '#d1e399'
}, {
data: d2,
points: {
fillColor: "#ecc0ce"
},
color: '#ecc0ce'
}, {
data: d3,
points: {
fillColor: "#daeaed"
},
color: '#daeaed'
}, {
data: d4,
points: {
fillColor: "#e6ceea"
},
color: '#e6ceea'
}, {
data: d5,
points: {
fillColor: "#edb9a6"
},
color: '#edb9a6'
}, {
data: d6,
points: {
fillColor: "#92e48a"
},
color: '#92e48a'
}];
$.plot($("#placeholder"), data1, {
xaxis: {
mode: "time",
minTickSize: [1, "month"],
tickLength: 1,
ticks: 12
},
yaxis: {
tickSize: 5
},
grid: {
hoverable: true,
borderWidth: 1
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.13
}]
}
},
points: {
show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: true
},
clickable: true,
hoverable: true
});
Code in JSFiddle -> http://jsfiddle.net/v5M9L/11/
Thanks for your help !
I suspect your problem is that your timestamps are in seconds rather than milliseconds. Multiply all your data by 1000 appears to give the result you want:
{ data: d1.map(function(d) { return [d[0] * 1000, d[1]]; }), points: { fillColor: "#d1e399" }, color: '#d1e399'}
http://jsfiddle.net/v5M9L/12/
Related
Having this data:
const datasets = [
{
label: "# of Votes x",
data: [12, 19, 3, 5, 2, 3],
fill: true,
},
{
label: "# of Votes y",
data: [7, 3, 13, 18, 20, 6],
fill: true,
},
];
Is it possible to add at the top of the graph the sum for that column?
Something like that:
Yes, you can do that.
1. Preprocess your data to get the sum for each column
let sums = [0, 0, 0, 0, 0, 0];
for (let i = 0; i < sums.length; i++) {
for (let dataset of datasets) {
sums[i] += dataset.data[i];
}
}
2. Create a second x-axis with a new position
options: {
scales: {
// ...
x2: {
position: 'top',
labels: sums
},
// ...
}
}
Here is the result:
const ctx = document.getElementById('myChart');
let datasets = [
{
label: "# of Votes x",
data: [12, 19, 3, 5, 2, 3],
fill: true
},
{
label: "# of Votes y",
data: [7, 3, 13, 18, 20, 6],
fill: true
}
];
let sums = [0, 0, 0, 0, 0, 0];
for (let i = 0; i < sums.length; i++) {
for (let dataset of datasets) {
sums[i] += dataset.data[i];
}
}
new Chart(ctx, {
type: 'line',
data: {
datasets
},
options: {
scales: {
x: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
},
x2: {
position: 'top',
labels: sums
},
y: {
beginAtZero: true
}
}
}
});
.chart-container {
position: relative;
height: 90vh;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
this is the dataset that I have
[1486684800000, 1],
[1486684800001, 1],
[1486684800002, 1],
[1486684800004, 1],
[1486684800005, 1],
[1486684800006, 1],
I want to make an area chart , but if I just use this dataset then I get a straight line
is there a way to round this data to the closest second/minute/hour/day ?
const state = {
series: [
{
name: "series1",
data:
[1486684800000, 1],
[1486684800001, 1],
[1486684800002, 1],
[1486684800004, 1],
[1486684800005, 1],
[1486684800006, 1],
},
],
options: {
chart: {
height: 350,
type: "area",
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
},
xaxis: {
type: 'datetime'
}
};
I have multiple heatmaps in one container. I wanted to set the color axis so that the positive numbers fall in the green range and the negative numbers in the red range. So I set the colorAxis: minColor to #009933 and colorAxis: maxColor to #ff3300. This is not setting all the negatives to ranges of red and the positives to ranges of red. Can I do that using Highcharts?
Here is my code:
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', },
xAxis: {
categories: ['val1', 'val2', 'val3',]
},
yAxis: [{
title: { text: 'iPhone'},
height: '50%',
lineWidth: 2,
categories: ['google', 'bing', 'bing',]
}, {
title: { text: 'iPad'},
height: '50%',
top: '50%',
offset: 0,
lineWidth: 2,
categories: ['google', 'bing', 'bing',]
}],
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: -50,
minColor: '#ff3300',
maxColor: '#009933'
},
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>';
}
},
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return `${this.point.value}%`
}
}
}
},
series: [{
borderWidth: 1,
data:[
[0, 0, -10],
[0, 1, 10],
[0, 2, -5],
[1, 0, 21],
[1, 1, -10],
[1, 2, 5],
[2, 0, -13],
[2, 1, 53],
[2, 2, 15],
],
dataLabels: {
enabled: true,
color: '#000000'
}
}, {
borderWidth: 1,
data:[
[0, 0, 15],
[0, 1, 11],
[0, 2, -5],
[1, 0, 25],
[1, 1, -5],
[1, 2, 9],
[2, 0, -14],
[2, 1, 65],
[2, 2, 25],
],
dataLabels: {
enabled: true,
color: '#000000'
},
yAxis: 1,
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="container"></div>
Other way to achieve this is to set color of each data-points inside your heatmap .So , get the series data using heatMapChart.series then use for-loop and access values of each data-points . Finally , update your data-point color i.e : green or red .
Demo Code :
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
var heatMapChart = Highcharts.chart('container', {
chart: {
type: 'heatmap',
},
xAxis: {
categories: ['val1', 'val2', 'val3', ]
},
yAxis: [{
title: {
text: 'iPhone'
},
height: '50%',
lineWidth: 2,
categories: ['google', 'bing', 'bing', ]
}, {
title: {
text: 'iPad'
},
height: '50%',
top: '50%',
offset: 0,
lineWidth: 2,
categories: ['google', 'bing', 'bing', ]
}],
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 + '.';
}
}
},
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>';
}
},
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return `${this.point.value}%`
},
}
}
},
series: [{
borderWidth: 1,
data: [
[0, 0, -10],
[0, 1, 10],
[0, 2, -5],
[1, 0, 21],
[1, 1, -10],
[1, 2, 5],
[2, 0, -13],
[2, 1, 53],
[2, 2, 15],
],
dataLabels: {
enabled: true,
color: '#000000'
},
showInLegend: false
}, {
borderWidth: 1,
data: [
[0, 0, 15],
[0, 1, 11],
[0, 2, -5],
[1, 0, 25],
[1, 1, -5],
[1, 2, 9],
[2, 0, -14],
[2, 1, 65],
[2, 2, 25],
],
dataLabels: {
enabled: true,
color: '#000000'
},
showInLegend: false,
yAxis: 1,
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function() {
return this.value.charAt(0);
}
}
}
}
}]
}
});
//get series...
var dataPoints = heatMapChart.series;
//loop through series
for (var i = 0; i < dataPoints.length; i++) {
//get data inside series..
for (var j = 0; j < dataPoints[i].data.length; j++) {
//update data..
dataPoints[i].data[j].update({
color: dataPoints[i].data[j].options.value > 0 ? '#009933' : '#ff3300' //change value depending on value..
});
}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="container"></div>
I am trying to add subcategories to my yaxis on the heatmap on highcharts but I am getting [object, object]
I am trying to add iphone and ipad as categories and google, bing and jeeves as the subcategories.
This is the method I saw in documentation to create the multi level categories:
yAxis: {
categories: [
{
name: "iphone",
categories: [
"google",
"bing",
"jeeves",
]
},
{
name: "ipad",
categories: [
"google",
"bing",
"jeeves",
]
}
]
}
This is my code:
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 */
},
xAxis: {
categories: ['val1', 'val2', 'val3',]
},
yAxis: {
categories: [
{
name: "iphone",
categories: [
"google",
"bing",
"jeeves",
]
},
{
name: "ipad",
categories: [
"google",
"bing",
"jeeves",
]
}
]
},
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: [{
borderWidth: 1,
// xAxis: 1,
data:[[0, 0, 67],
[0, 1, 23],
[0, 2, 10],
[0, 3, 67],
[0, 4, 23],
[0, 5, 10],
[1, 0, 78],
[1, 1, 12],
[1, 2, 20],
[1, 3, 78],
[1, 4, 12],
[1, 5, 20],
[2, 0, 12],
[2, 1, 14],
[2, 2, 30],
[2, 3, 12],
[2, 4, 14],
[2, 5, 30]]
,
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I am trying to do something similar to what is done on the x-axis in this solution: multilevel categories
Why is my y axis not showing any categories and sub categories.
You have missing grouped-categories plugin, but as you can see in this example: http://jsfiddle.net/BlackLabel/46j9xsow/ it doesn't play well with y-axis.
As a solution I recommend you to use inverted chart and grouped categories on x-axis.
chart: {
inverted: true
}
Live demo: http://jsfiddle.net/BlackLabel/sm2qbgkr/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
Docs: https://www.npmjs.com/package/highcharts-grouped-categories
add y-axis value as follows
yAxis: {
labels: {
formatter: function() {
return categories[0].name
}
}
},
var categories = [
{
name: "iphone",
categories: [
"google",
"bing",
"jeeves",
]
},
{
name: "ipad",
categories: [
"google",
"bing",
"jeeves",
]
}
];
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 */
},
xAxis: {
categories: ['val1', 'val2', 'val3',]
},
yAxis: {
labels: {
formatter: function() {
return categories[0].name
}
}
},
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: [{
borderWidth: 1,
// xAxis: 1,
data:[[0, 0, 67],
[0, 1, 23],
[0, 2, 10],
[0, 3, 67],
[0, 4, 23],
[0, 5, 10],
[1, 0, 78],
[1, 1, 12],
[1, 2, 20],
[1, 3, 78],
[1, 4, 12],
[1, 5, 20],
[2, 0, 12],
[2, 1, 14],
[2, 2, 30],
[2, 3, 12],
[2, 4, 14],
[2, 5, 30]]
,
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I get data set from back end api, it will have multiple data labels for the same x and y-axis.How can i achieve this for 'n' values.
I tried with 1,2, and 4 it was working. But not sure if it is the right approach and how can i achieve for 'n'values adjusting row size and col size.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
min: 0,
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
min: 0
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions: {
series: {
borderWidth: 1,
dataLabels: {
enabled: true,
color: '#000000'
},
states: {
inactive: {
opacity: 1
}
}
}
},
series: [{
name: 'Sales per employee',
data: [
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[9, 4, 91]
]
}, {
rowsize: 0.5,
colsize: 0.5,
color: Highcharts.getOptions().colors[0],
data: [
[-0.25, 0.25, 70],
[0.25, 0.25, 60],
[-0.25, -0.25, 65],
[0.25, -0.25, 34]
]
}]
});
Above is the sample code
I think that your idea is quite good, but to align points easier, you can create only columns or rows.
I created a function below that creates new series for points with the same x and y values and align them in one row.
function getSeries(data) {
var i = 0,
k,
dataLength,
movement,
index = 0,
colSize,
limitVal,
series = [{
data: []
}],
newSeries;
for (i; i < data.length; i++) {
if (
data[i + 1] &&
data[i][0] === data[i + 1][0] &&
data[i][1] === data[i + 1][1]
) {
if (newSeries) {
newSeries.data.push(data[i]);
} else {
newSeries = {
data: [data[i]]
}
}
} else {
if (newSeries) {
newSeries.data.push(data[i]);
dataLength = newSeries.data.length;
newSeries.colsize = colSize = 1 / newSeries.data.length;
movement = dataLength % 2 ? 0 : colSize / 2;
limitVal = colSize * Math.floor(dataLength / 2) - movement;
for (k = -limitVal; k <= limitVal; k += colSize) {
newSeries.data[index][0] += k;
index++;
}
series.push(newSeries);
index = 0;
newSeries = null;
} else {
series[0].data.push(data[i]);
}
}
}
return series
}
Highcharts.chart('container', {
...,
series: getSeries(data)
});
Live demo: https://jsfiddle.net/BlackLabel/9Ltxcgn6/