I'm fairly new to working with Highcharts. As it is right now I am trying to figure out a way to let the user browse between categories via a drop-down selection.
The chart itself is quite simple: Categories are months, Jan through Dec, and the data arrays are populated by looping through SharePoint list data.
What I am hoping to be able to create is a solution where the user can choose which month to view data for via a drop-down selection. This would have to be done after all data has been loaded into the chart to avoid having to query the service for each selection.
The charts-code itself is very simple:
$('#container3').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoryMonthsArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
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:.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'd1',
data: d1Array
}, {
name: 'd2',
data: d2Array
}, {
name: 'd3',
data: d3Array
}, {
name: 'd4',
data: d4Array
}, {
name: 'd5',
data: d5Array
}]
Any pointers at all would be very much appreciated here!
Related
currently I am developing chart in my React. I am using Highchart. My problem is when my chart first loaded, the size is not following the container size, when i resize the window then only the chart display correct size.
many solution suggested to use
chart.reflow();
but how to use this in react code?
i have tried
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
not working
the chart always when initial will look like this
I need the chart fully to the yellow line
My chart code
this.setState({
chartDrawSector: {
chart: {
type: 'column',
height: '600',
events: {
load: function(event) {
event.target.reflow();// i tried this not working also..
}
}
},
title: {
text: 'Sector All'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: {
categories: sectorName[0],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: displayMode == 'f' ? 'Figures' : 'Percentage %'
}
},
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} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Ultimate Negative',
data: n30Data[0],
color: 'rgb(100, 30, 22 )'
},
{
name: 'Ultimate Positive',
data: gt30Data[0],
color: 'rgb(27, 79, 114)'
},
]
}
})
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.
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.
Is there a way to set the position columns when adding a new series?
An example of what I would like to do with non-functional code at the end after adding a new series:
$(function () {
chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
],
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: [49.9, 71.5]
}, {
name: 'Berlin',
data: [32.4, 33.2]
}]
});
chart.addSeries( {
name: 'New York',
data: [83.6, 78.8]
})
chart.series[0].index = 2;
chart.series[1].index = 3;
chart.series[2].index = 1;
chart.redraw();
});
Link to my a jsFiddle:
http://jsfiddle.net/cug79br2/1/
In my case do not have all the series when I created the chart so I need to rearrange them after I have loaded the additional dataset. In this example I want to add the last series at index 1 and move the existing columns one notch to the right.
try this
series: [{
name: 'Tokyo',
data: [49.9, 71.5],
index: 4
}, {
name: 'Berlin',
data: [32.4, 33.2],
index: 3
}]
});
chart.addSeries( {
name: 'New York',
data: [83.6, 78.8],
index: 2
})
chart.addSeries( {
name: 'New York1',
data: [83.6, 78.8],
index: 1
})
The best solution I could find is to remove all series, sort them and add them again. In this case its helpful (maby necessary) to keep the data outside the Highcharts object. In my case an array named series_data.
$(function () {
var chart, series_data;
series_data = [
{
name: 'Tokyo',
data: [49.9, 71.5]
}, {
name: 'Berlin',
data: [32.4, 33.2]
}
];
chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
],
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: series_data
});
while(chart.series.length){
chart.series[0].remove();
}
series_data.push( {
name: 'New York',
data: [83.6, 78.8]
}
);
_.each(_.sortBy(series_data, 'data.0').reverse(), function(series, i){
series.index = i;
// To keep animations pretty and the last added to animate, do tno add it in the loop but later.
if(series.name === 'New York'){
return;
}
chart.addSeries(series, true, false);
})
chart.addSeries(series_data[2], true, false);
});
http://jsfiddle.net/cug79br2/23/
When adding the items again after they have been removed I ignore the 'New York' series and add it later but set the index on it so that the the newest series will be animated.
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.