how to update a highcart column chart on a button click - javascript

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.

Related

Need help on viewing Chart values

Column charts are working fine. But I am facing one issue while viewing the chart values. If two values are having a big difference between them, the lower value is not shown in the charts (which means it is showing there but I am not able to witness it) refer https://jsfiddle.net/g18evj5x/1/:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [1000]
}, {
name: 'New York',
data: [2]
}, {
name: 'London',
data: [4]
}, {
name: 'Berlin',
data: [6]
}]
});
thanks.
Another solution could be tu use dataLabels Api link like that :
plotOptions: {
column: {
// minPointLength: 2, // You could use both solutions
dataLabels:{
enabled:true
}
}
}
Fiddle
One solution is to set a plotOptions.column.minPointLength (API). For example (JSFiddle):
plotOptions: {
column: {
minPointLength: 2
}
}
This means that the point will have at least that height, and therefore show up in your chart.

Highcharts: Add multiple colors to area line chart

I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp
You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones

how to change the point format for drill down in pie charts?

I am using a pie chart with drill down, is there any way to change the point format in tool-tip function. I want to display; first pie chart in Percentage(%) format, and then drill down data in Metric Ton (MT)format.
I am getting the data in respective formats from the back end service. Products are coming in metric Tons and remaining-percentage, actual percentage are coming in percentage.
My pie chart code is given below.
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
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: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
Thanks in advance.
A way to solve this is to appoint a tooltip: {pointFormatter: } to your first level series. This will override the main tooltip formatter and show you the data you want it to show.
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
The reason why I opted to let the first level override the tooltip is because of the construction of your drilldown, and I figure all of those drilldowns will use the same tooltip format.
Here you can find a working JSFiddle.

Changing yAxis and plotOptions for drilldown

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);
});

Highcharts variation (%) between yaxis values in tooltip

I have a really simple spline chart and I'm trying to show on each tooltip the variation between the selected point and the previous point's value, measured in percentage variation. Basically this is the tooltip format I want to show
I've been looking for a solution but the only thing I came up with was this.
Hope it helps.
This are my chart options:
GeneralChartOptions = {
chart: {
renderTo: 'dummycontainer',
type: 'spline',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y',
year: '%b'
}
},
yAxis: {
title: {
text: ''
},
plotLines: []
},
tooltip: {
xDateFormat: '%m-%Y',
shared: true,
crosshairs: true,
},
exporting: {
enabled: false
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2,".",",");
}
},
series: []
}
Thanks for the help, I really appreciate it.
How about look how they do and then try ?
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
plotOptions: {
series: {
compare: 'percent'
}
}
demo

Categories