I am using HighCharts to visualize percentages from projects, which are downdrilled into variables which make the percentages!
I will give my code :
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
Example of the JSONs:
fraction.json
[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]},{"name":5,"id":5,"data":[["Total",""],["Estimated",0.44]]},{"name":6,"id":6,"data":[["Total",0.233905093],["Estimated",0.44]]}]
I would like the graph to show percentages above the column and on the yAxis when the graph is first loaded, but absolute values when the drilldown is activated. I didn't manage to get it until now. Could you help me?
There are two ways of doing those changes - a static and dynamic way. Static way - define data labels and tooltip options for drilldown series.
Dynamic way - apply the options on drilldown/drillup events.
events: {
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
}
}, false, false);
}
}
example: http://jsfiddle.net/d4fmaeea/
Two warnings:
In your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.
$.getJSON() is an asynchronous function. You use getJSON to assign list to options.series but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.
Async part of code:
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
Related
I'm working with highchart and I have the following chart working.
However, I need the next value starts at the point of the previous value.
Can someone help me please?
I use this function to generate chart
function generateChart(chartUrl, id) {
let options = {};
$.ajax({
url: chartUrl,
data: {name: id},
success: function (data) {
options.series[0].data = data;
// Get categories dynamicaly, not harcoded
for(let i=0;i<data.length;i++){
options.xAxis.categories.push(data[i][0]);
}
$(`#${id}`).highcharts(options);
}
});
}
And this code to Generate Data and Efects on chart
function generateEfectsChart() {
let options = {
chart: {
type: 'column'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000', // Color value
from: 0, // Start of the plot band
to: 0 // End of the plot band
}],
title: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0
}
},
series: [{
negativeColor: '#ED4D5F'
}]
};
return options;
}
Use the waterfall series type.
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
});
Live demo: https://www.highcharts.com/demo/waterfall
Docs: https://www.highcharts.com/docs/chart-and-series-types/waterfall-series
Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
I want to use my series names as xAxis. I have tried it like the code below. This code is creating multiple series but only one x axis value. Let's say in my code I want to create series for every fund and plot fund values in xAxis as well.
function draw(fund, zreturn) {
zreturn = [12.75, 11.77, 13.76];
fund = ['abc', 'xyz', 'pqr'];
var options = {};
options = {
chart: {
renderTo: 'graphDiv',
type: 'line',
Height: '400px'
},
credits: {
enabled: false
},
title: {
text: 'Fund Performance Graph',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: fund
}
},
yAxis: {
labels: {
enabled: true,
format: function () {
return (this.value + '%')
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
series: zreturn.filter(function (zreturn, i) {
return fund[i]
}).map(function (zreturn, i) {
/* Then return as series */
return {
//type: 'line',
name: fund[i],
data: zreturn,
dataLabels: {
align: 'center',
enabled: true,
format: "{y:.2f}" + '%',
style: {
fontSize: "8px",
fontFamily: 'Arial',
},
}
}
})
}
var chart = new Highcharts.Chart(options);
};
I think that right now you have small mistakes in your code.
First of all you are using yAxis.labels.format as a function. It should be formatter if you want to use it as a function:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return (this.value + '%')
}
}
},
Next, you have mistake in your data, it should be an array:
data: [
[i, zreturn]
],
I am here adding x value of your point as well as y value. If I will not add x value, points will always start from 0 and because you have added only one point to every series, all of them will be on the first category.
Here you can find an example how your chart may work with these small corrections:
http://jsfiddle.net/worg6jLz/29/
i have a column chart, and i need to refresh (redraw) it, on button click.
this is the code i load when i load the page:
function setParetoChart(data) {
$('#liveChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Detail'
},
subtitle: {
text: 'Detail'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Totale Detail'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
cursor: "pointer",
point: {....
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del Totale<br/>Numero Pezzi Scarti: <span style="color:{point.color}"></span>: <b>{point.scarti}</b> '
},
series: [{
name: 'Details',
colorByPoint: true,
data: data
}]
});
}
now, on button click, i get data from an ajax function, that returns an array of objects, in this way;
drilldown: 'var1'
name: 'var1'
scarts: 15,
y; 15
.. and with an array of that objects, i need to redraw my column chart..
This thread might help...
Lazy Highcharts drilldown
The soultion implements lazy drill down highcharts using Ajax.
I've been working this for past 4 days but still can figure out how to solve this issue:
The data in the database changes every 5 minutes.
I want to display the data in a new chart without refreshing the whole page.
CODE:
$(function () {
$(document).ready(function() {
$.getJSON("test2.php", function(json) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
renderTo: 'container',
defaultSeriesType: 'spline',
chart: {
type: 'area',
},
title: {
text: 'Transaction Count'
},
subtitle: {
text: '5 Minutes Count'
},
exporting: {
enabled: false
},
xAxis: {
categories:json,
title:{
text: 'Time Of The Day',
style: {
color: '#666666',
fontSize: '12px',
fontWeight: 'normal'
}
},
tickInterval: 4,
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
}
},
yAxis: {
title: {
text: 'Number Of Transaction'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
},
plotOptions: {
column: {colorByPoint: true},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 5,
states: {
hover: {
enabled: true
}
}
}
}
},
colors: [
'green', //Buy
'#4572A7' //Paid
],
series: json
});
});
});
});
You can change the dataset, like this :
$('#container').highcharts().series[0].setData([129.2,144.0,...], false);
You can redraw, like this :
$('#container').highcharts().redraw();
So, what you need to do, is create a function that (1) first gets the data from the server, (2) then updates the data and (3) then redraws, like this :
var updateChart = function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}
To repeat this every 5 minutes, you can use setInterval, like this :
setInterval(function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}, 300000);
Instead of putting your Highchart script in the document.ready function, you can create a funcion getHighchart and put the code about into it. and depend on how many seconds you want the code to readload as below, but you have to be referencing the jquery js.
$(function () {
setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
//to containe you script for loading the chart
}