Develop Reference

Create Highcharts heatmaps using JSON data

I have JSON data and want to create a highcharts heatmap out of it. I am not sure how to format the JSON data in the required format.
My JSON data:
let json = [
{
"metric": 4940616.0,
"title": "d_revenue",
"date": "2020-01-01"
},
{
"metric": 5132162.0,
"title": "p_revenue",
"date": "2020-02-01"
},
{
"metric": 4954576.0,
"title": "s_revenue",
"date": "2020-03-01"
},
{
"metric": 4882217.0,
"title": "d_revenue",
"date": "2020-01-01"
},
{
"metric": 4869609.0,
"title": "t_revenue",
"date": "2020-03-01"
},
{
"metric": 5075422.0,
"title": "p_revenue",
"date": "2020-04-01"
},
{
"metric": 4461996.0,
"title": "v_revenue",
"date": "2020-01-01"
}
]
I need date on the xaxis and metric on the yaxis.
I did this to create the categories for xaxis and yaxis:
var x_cats = [],
y_cats=[],
heat_data=[];
json.forEach(d=>{
x_cats.push(d.date);
y_cats.push(d.title);
});
var x_axis = [...new Set(x_cats)];
var y_axis = [...new Set(y_cats)];
I am not sure how to create the data which should be in a format like [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ] (not from JSON data, explaining format).
I am not sure how to create that out of the JSON data I have above.
This is my Highcharts code:
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: x_axis
},
yAxis: {
categories: y_axis,
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: FORMATTED_DATA,
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
Not sure what to put in place of FORMATTED_DATA.

ChartJS custom bar chart

I'm trying to achieve a similar sort of a chart. For example, Taxi transport payments collected on March via Card and Cash ($40 cash and $38 card payments). I need to display that bar with the main color and the lighter version of the main color. I have two questions here
What sort of a graph possibly fit into my needs?
How can I make a bar with two different shades of the same color (Dark blue and light blue)?
Expected Outcome:
I have tried with the following code, I am sure the dataset is not including the Card and Cash options as I explained earlier.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" }
}],
yAxes: [{
}]
}
}
});
Thank you.

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23],
stack: 1
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67],
stack: 3
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0],
stack: 2
},
{
label: 'Taxi cash',
backgroundColor: "rgba(83, 55, 219,1)",
data: [25, 10, 12, 20, 10, 12, 5],
stack: 2
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" },
stacked: true
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Look into stacked bar chart example
scales: {
yAxes: [{
stacked: true
}]
}

The options you configured are correct. It will be a bar chart, As you are providing multiple datasets for each mode of transportation, chartjs will consider this as a stacked bar chart.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0]
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" }
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>

angular-chart.js, Chart.js v2 legend customization. How?

In the documentation there is legendCallback and generateLabels and I don't understand the documentation that much. Given my code below. How can I change the legends to make it into one legend per line,have a background and line chart legend should look like a line not a bar or in short how to customize the legend.
JS:
vm.labels = ['2015 - Aug', '2015 - Sept', '2015 - Oct', '2015 - Nov', '2015 - Dec', '2016 - Jan',
'2016 - Feb', '2016 - Mar', '2016 - April', '2016 - May', '2016 - Jun', '2016 - Jul', '2016 - Aug',
];
vm.series = [
'A',
'B',
];
vm.data = [
[14, 12, 17, 24, 29, 17, 23, 10, 16, 20, 33, 5, 8],
[50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
];
vm.colors = [
{
backgroundColor: 'rgba(0,104,26,1)',
borderColor: 'rgba(0,104,26,1)',
},
{
backgroundColor: 'rgba(56,80,143,1)',
borderColor: 'rgba(56,80,143,1)',
},
];
vm.options = {
scales: {
xAxes: [
{
ticks: {
callback: function (value) {
var values = value.split(' ');
var date = [values[0], values[2]];
return date;
},
},
},
],
yAxes: [
{
ticks: {
max: 100,
min: 0,
step: 20,
callback: function (value) {
return value + '%';
},
},
},
],
},
// legend
legend: {
display: true,
position: 'bottom',
},
// title
title: {
display: true,
text: 'Chart',
fontSize: 15,
},
// hover
hover: {
mode: 'single',
},
// tooltips
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].datasetIndex;
var year = tooltipItems[0].xLabel[0];
var month = tooltipItems[0].xLabel[1];
if (idx === 0) {
return year + '-' + month;
} else {
return '';
}
},
label: function (tooltipItems, data) {
var idx = tooltipItems.datasetIndex;
var dataidx = tooltipItems.index;
var seriesValue = data.datasets[idx].label;
var value = data.datasets[idx].data[dataidx];
if (idx === 0) {
return seriesValue + ': ' + value + '%';
} else {
return seriesValue + ' (' + value + '%)';
}
},
},
},
};
vm.datasetOverride = [];
for (var i = 0; i < vm.series.length; i++) {
vm.datasetOverride.push(
{
lineTension: 0,
fill: false,
pointStyle: 'circle',
pointRadius: 0,
pointHoverRadius: 4,
pointHitRadius: 10,
type: 'line',
}
);
}
vm.datasetOverride[1].borderDash = [5, 1];
HTML
<canvas id="line"
class="chart chart-line"
chart-data="vm.data"
chart-labels="vm.labels"
chart-series="vm.series"
chart-options="vm.options"
chart-colors="vm.colors"
chart-dataset-override="vm.datasetOverride"></canvas>
Currently:

How to plot line chart with series data in highcharts?

I am trying to create a line chart with Highcharts along with navigation control, but in my example I can only see points. Please help
My chart options
$('#container').highcharts('StockChart', {
chart: {
defaultSeriesType: 'line'
},
rangeSelector: {
selected: 1
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: true
},
dataLabels: {
enabled: true,
borderRadius: 5,
borderWidth: 1,
y: -6,
formatter: function () {
return this.series.name;
}
},
states: {
hover: {
lineWidth: 10
}
}
},
series: {
cursor: 'pointer'
}
},
tooltip: {
shared: false,
formatter: function () {
var str = '';
str += 'Task: ' + this.series.name + '<br>';
str += 'Start Time: ' + this.point.start_time + '<br>';
str += 'End Time: ' + this.point.end_time + '<br>';
str += 'Throughput: ' + this.point.y + '<br>';
return str;
}
},
series: series
});
Update
Jsfiddle link

The problem is that you are actual creating a new series for each datapoint. So currently you effectively have 4 lines, with a single point on each line. Hence why you don't see any lines (as lines need 2 or more points).
What you need to do is create a single series with multiple data points. Something like this:
var series = [{
"name": "Territory_Out",
"data": [{
"x": 1147651200000,
"y": 33.1,
"start_time": "14-05-2006 00:00:00",
"end_time": "15-05-2006 00:00:00"
}, {
"x": 1147737600000,
"y": 450,
"start_time": "15-05-2006 00:00:00",
"end_time": "16-05-2006 00:00:00"
}, {
"x": 1147737600000,
"y": 400,
"start_time": "15-05-2006 00:00:00",
"end_time": "16-05-2006 00:00:00"
}, {
"x": 1147824000000,
"y": 77.67,
"start_time": "16-05-2006 00:00:00",
"end_time": "17-05-2006 00:00:00"
}]
}];

highcharts with json data

I am new to these things. Using the code from URL: http://jsfiddle.net/sujay/UMeGS/ , I was trying to create a chart with my own data.
Using REST web service, I am able to get my data from database, which means when I click on the following link 'localhos:48095/WebApplication22/webresources/sample22.test15' , I am getting json data as follows
[
{
"id": 1,
"status": "stopped",
"unit": "a",
"val": 24
},
{
"id": 2,
"status": "working",
"unit": "a",
"val": 59
},
{
"id": 3,
"status": "turning",
"unit": "a",
"val": 2
},
{
"id": 5,
"status": "transport",
"unit": "a",
"val": 6
},
{
"id": 6,
"status": "stopped",
"unit": "b",
"val": 336
},
{
"id": 7,
"status": "working",
"unit": "b",
"val": 212
},
{
"id": 9,
"status": "turning",
"unit": "b",
"val": 23
},
{
"id": 10,
"status": "transport",
"unit": "b",
"val": 1
}
]
I have slightly modified code from http://jsfiddle.net/sujay/UMeGS/, in which I have used getJSON() to get data.
Below is the code.
$(function () {
$.getJSON('localhos:48095/WebApplication22/webresources/sample22.test15', function (data) {
var seriesData = [];
var xCategories = [];
var i, cat;
for (i = 0; i < data.length; i++) {
cat = 'Unit ' + data[i].unit;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
for (i = 0; i < data.length; i++) {
if (seriesData) {
var currSeries = seriesData.filter(function (seriesObject) {
return seriesObject.name == data[i].status;
});
if (currSeries.length === 0) {
seriesData[seriesData.length] = currSeries = {
name: data[i].status,
data: []
};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {
name: data[i].status,
data: [data[i].val]
}
}
}
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: xCategories
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: seriesData
});
});
});
});
But I am unable to see anything. Chart is not displayed. Please help me on this thing.