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.
Related
I am trying to generate a 3d pie chart using HighChart and the data is in JSON. It seem to only generate 2d even though I have enabled 3D.
I am trying to generate a 3d pie chart like this
https://www.highcharts.com/demo/3d-pie
Can someone show me what i am missing on my code below.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="code.highcharts.com/highcharts-3d.js"></script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
// x: -20 //center
},
subtitle: {
text: '',
// x: -20
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
legend: {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'top',
// x: -10,
// y: 100,
// borderWidth: 0
enabled:false
},
series: []
}
$.getJSON("data1.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
JSON DATA
[{
"name": "",
"data": ["Asset","Total Lending","Total Deposits","Brokered Deposits" ]
}, {
"name": "First Republic Bank",
"data": [48353330,38079817,37130929,1957317]
}, {
"name": "Cathay Bank",
"data": [11488897,8902674,8814629,497369]
}]
You can see the 3d pie working in this codepen. I have updated the pen with your json data.
The only thing missing in your options is:
plotOptions: {
pie: {
depth: 25
}
}
If you look here you can see that some of the charts require not only the chart property to be sent but plotOptions as well.
while some specific settings for different chart type can be found under plotOptions;
Please refer below JS fiddle link.
https://jsfiddle.net/2pd1natw/1/
// this is my JS for reference
$(function () {
var k = 0;
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'xy',
events: {
drilldown: function (e){
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'2015':{
name: '2015',
data: [
['Q4-2015',89]
]
},
'2016':{
name: '2016',
data: [
['Q2-2016',95],
['Q3-2016',99]
]
}
},
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
],
yAxis: 1
},
'2016':{
type: 'spline',
name: '2016',
yAxis: 1,
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
series = drilldowns[e.point.name],
seriesLine = drilldownsLines[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Rental & Capital Value Trend'
},
exporting: {
enabled: true,
csv:{
columnHeaderFormatter:function(item, key, series){
if(key === '' || key === undefined){
return 'Period';
}else if(key === 'y' && k == 0){
k = k + 1;
return 'Rental Value (INR/SF/Month)';
}else if(key === 'y' && k == 1){
k = 0;
return 'Capital Value (INR/SF)';
}
}
},
buttons:{
contextButton:{
menuItems: [{
textKey: 'downloadCSV',
onclick: function (){
this.downloadCSV();
}
}]
}
}
},
xAxis: {
type: 'category',
},
yAxis: [{
min: 0,
title: {
text: 'Rental Value (INR/SF/Month)'
},
labels: {
format: '{value}'
}
}, {
min:0,
tickInterval:5,
title: {
text: 'Capital Value (INR/SF)'
},
labels: {
format: '{value} K'
},
opposite:true
}],
tooltip:{
formatter:function(){
var s='';
$.each(this.points, function () {
if(this.series.type == 'spline'){
s += '<br/>Capital Value : ' + this.y+ 'K';
}else{
s += '<br/> Rental Value : ' + this.y;
}
});
return s;
},
shared:true
},
legend: {
layout: 'horizontal',
align: 'left',
size: '12px',
x: 50,
verticalAlign: 'bottom',
y: 20,
floating: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Renatl Value (INR/SFT/Month)',
color: '#EE8908',
data: [
{
name: '2015',
y: 89,
drilldown: true
}, {
name: '2016',
y: 90,
drilldown: true
}
]
},{
name:'Capital Value (INR/SF)',
color:'#F8BB6C',
type:'spline',
yAxis:1,
data:[
{
name:'2015',
y:11.45
},{
name:'2016',
y:15.22
}
],
tooltip: {
valueSuffix: 'K'
}
}
],
drilldown: {
/*activeAxisLabelStyle: {
textDecoration: 'none'
},*/
series: []
}
});
});
There are two scenarios where I got stuck.
when I try to export chart as csv after drill down downloaded file name should be "Quarterly rental-capital trend" and before drill down "Yearly rental-capital trend".
e.g. before drill down file name should be like "Yearly rental-capital trend.csv"
after drill down file name should be like "Quarterly rental-capital trend.csv"
after exporting to csv the capital value should be append with "K".
e.g. period | rental value | capital value
2015 | 90 | 11.15 K
Any help will be appreciated and thanks and advance.
I am trying to get the name of the column that it's clicked but I get undefined.
I can see that it shows in the tooltip but not when I click the column.
Here's the code:
$(function () {
var data = { "mains": [{ "id": "454", "name": "main 1", "subs": [{ "id": "32", "name": "sub 1" }, { "id": "23", "name": "sub 2" }, { "id": "54", "name": "sub 3" }], "image": null }, { "id": "654", "name": "main 2", "subs": [{ "id": "87", "name": "sub 1" }, { "id": "78", "name": "sub 2" }], "image": null }] };
mainlist = [],
sublist = Object.create(null);
data.mains.forEach(function (main) {
mainlist.push(main.name);
sublist[main.name] = main.subs.map(function (sub) {
return sub.name;
});
})
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top Title Here'
},
xAxis: {
categories: mainlist
},
yAxis: {
title: {
enabled: true,
text: 'Left Title',
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.name); //returns undefined
},
},
},
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'title here',
data: [5, 10]
}],
});
I have also tried this.series.name, this.x and this.y but none are giving me the name.
How can I fix this?
As the doc states the plotOptions.series.point only gets an event as parameter within its event-listeners, nevertheless they hold some info as well:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top Title Here'
},
xAxis: {
categories: mainlist
},
yAxis: {
title: {
enabled: true,
text: 'Left Title',
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
// a click-listener gets an event as param
click: function (event) {
console.log(event.point.category); //returns "main 1" or "main 2"
console.log(event.point.plotX+'/'+event.point.plotY); //or its coords
console.log(event);// and a lot more
},
},
},
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'title here',
data: [5, 10]
}],
});
Set the "events" object inside the "column" object instead series.
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"
}]
}];
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.