I'm trying to display the total number of some elements in the center of my pie-chart but so far I haven't been able to find this option in the settings. How can I do that:
My current code:
checksChart: {
options: {
colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
legend: {
fontSize: '14px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
itemMargin: {
vertical: 10
},
formatter: function(seriesName, opts) {
return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
}
},
dataLabels: {
enabled: false,
},
labels: ['data', 'data', 'data', 'data', 'data'],
},
series: [400, 400, 400, 400, 400]
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>
This is what I have so far:
Based on the Apex Chart Documentation, you need to use plotOptions to display the total of data inside donut chart.
So you need to use like,
chartOptions: function() {
return {
colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
legend: {
fontSize: '14px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
itemMargin: {
vertical: 10
},
formatter: function(seriesName, opts) {
return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
}
},
dataLabels: {
enabled: false,
},
labels: ['data', 'data', 'data', 'data', 'data'],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
show: true,
fontSize: '22px',
fontFamily: 'Rubik',
color: '#dfsda',
offsetY: -10
},
value: {
show: true,
fontSize: '16px',
fontFamily: 'Helvetica, Arial, sans-serif',
color: undefined,
offsetY: 16,
formatter: function (val) {
return val
}
},
total: {
show: true,
label: 'Total',
color: '#373d3f',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b
}, 0)
}
}
}
}
}
},
series: [400, 400, 400, 400, 400]
}
},
In the above code, the sum of series is achieved by using, seriesTotals.reduce like,
total: {
show: true,
label: 'Total',
color: '#373d3f',
formatter: function (w) {
return w.globals.seriesTotals.reduce((a, b) => {
return a + b
}, 0)
}
}
Working Vue Apex donut codepen
Related
I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.
current configuration
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};
Try setting the stroke width to greater than 0 and give the stroke same color as the background.
stroke: {
width: 4,
colors: ['#1E252A']
}
How to remove shadows from numbers in charts?
Highcharts.chart('container', {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: null
},
title: {
text: 'STATUS',
align: 'center',
style:
{
fontSize:'14px',
color: '#000000',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
legend: {
align: 'center',
verticalAlign: 'middle',
layout: 'vertical',
floating: true,
itemStyle: {
color: '#000000',
fontSize: 12
},
symbolRadius: 0,
y: 115,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: '100%',
center: [ '50%', '25%' ],
dataLabels: {
enabled: true,
distance: -35,
color: '#ffffff',
style: {
fontSize: 13
},
formatter: function() {
if(this.point.color=='#01a698'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#77c646'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#fd4c01'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#f7921d'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#f7af33'){
return '<span>' + this.y +'</span>';
}
}
},
showInLegend: true
},
},
series: [{
type: 'pie',
data: [
{
name: '1',
y: 19,
color: '#01a698'
},
{
name: '2',
y: 11,
color: '#77c646'
},
{
name: '3',
y: 12,
color: '#fd4c01'
}
,
{
name: '4',
y: 17,
color: '#f7921d'
}
,
{
name: '5',
y: 13,
color: '#f7af33'
}
]
}],
tooltip : {
enabled : false
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height:250px"></div>
You need to add textOutline: false to the style object in the config:
style: {
fontSize: 13,
textOutline: false
},
This has also already been answered here: Remove shadow/background glow on highcharts data label?
I have a piechart which is plotting with dynamic values . So if my dataset contains 2 rows then only two slice will be there in piechart if dataset contains 3 rows then 3 slice will get plot and so on.. My question is how to covered the all piechart with the selected slice color without using drilldown.js
Here is the code
init: $(function () {
Highcharts.setOptions({
colors: ['#3f51b5', '#03a9f4', '#0caf50', '#f9ce1d', '#ff9800', '#007bc1'],
});
$(document).ready(function () {
if ($("#GridContainer").find(':only-child:last').html() == "No Data Found") {
$("#InvestorListFilter").hide()
}
else
{
$("#InvestorListFilter").show()
}
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-25',
backgroundColor:'#f7f7f7',
events: {
load: function () {
requestDataforGeoDispersion(1);
},
}
},
title: {
text: 'Geographical Dispersion',
verticalAlign: 'bottom',
align: 'center',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold',
fontfamily: 'Frutiger Light',
padding:0
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
//align: 'center',
//y: 11,
//x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
},
},
tooltip: {
valueDecimals: 2,
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: 50,
borderWidth :0,
depth: 45,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
style: {
padding:0
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
allowOverlap: true,
enabled: true,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'pie',
plotBorderWidth: 0,
backgroundColor: '#f7f7f7',
plotShadow: false,
marginRight: '-30',
events: {
load: requestDataforGeoDispersion(2)
}
},
title: {
text: 'Investment Style',
verticalAlign: 'bottom',
y: -5,
x: 15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
depth: 45,
borderWidth :0,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
enabled: true,
allowOverlap: true,
connectorWidth: 0,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-30',
backgroundColor: '#f7f7f7',
borderColor: '#FFFFFF',
events: {
load: requestDataforGeoDispersion(3)
}
},
title: {
text: 'Investor Type',
verticalAlign: 'bottom',
fontfamily:'Frutiger Light',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold',
title: 'Manish'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td>'+
'<td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr>'+
'<tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
slicedOffset: 0,
borderWidth :0,
depth: 45,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
connectorPadding: 0,
allowOverlap: true,
padding: 0,
enabled:true,
style: {
fontWeight: 'normal',
fontSize: '10px',
//width:'100px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{}]
});
var chartData = "";
init: function requestDataforGeoDispersion(flag) {
var multiselectRegion = $("input[id*=HdnRegionMultiple]").val();
var multiselectStyle = $("input[id*=hdnInvestmentStyle]").val();
var multiselectType = $("input[id*=HdnInvestorType]").val();
var activityChart = $('input[name=m$p1$RadioButtonListTrends]:checked').val();
$.ajax({
url: "Investors.aspx/GetPieChartDataForGeoDispersion",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{regionID: "' + multiselectRegion + '",styleID: "' + multiselectStyle + '",typeID: "' + multiselectType + '",activityChartValue: "' + activityChart + '" }',
success: function (data) {
chartData = JSON.parse(data.d);
var color="";
var dataArr = [];
if (flag == 1) {
$.each(chartData[0], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.RegionName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorCompanyRegionID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArr.push(jsondata);
}
});
chart1.addSeries({
name: 'GeoDispersion',
colorByPoint: true,
size: 140,
allowOverlap: true,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnRegionMultiple]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArr,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart1.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart1.renderTo.appendChild(menu);
chart1.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart1.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 2)
{
var dataArrStyle = [];
drilldownSeries = [];
$.each(chartData[1], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.StyleName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorStyleID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrStyle.push(jsondata);
}
});
chart2.addSeries({
name: 'InvestmentStyle',
colorByPoint: true,
enabled: true,
allowOverlap: true,
size: 140,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=hdnInvestmentStyle]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArrStyle,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart2.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart2.renderTo.appendChild(menu);
chart2.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart2.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 3)
{
var dataArrType = [];
$.each(chartData[2], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.TypeName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorTypeID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrType.push(jsondata);
}
});
chart3.addSeries({
name: 'InvestorTypes',
colorByPoint: true,
size: 140,
data: dataArrType,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnInvestorType]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart3.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart3.renderTo.appendChild(menu);
chart3.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart3.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
},
cache: false
});
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
});
You can update the points' color on point's click event - see API.
On click event, loop through the points and update its color, when the loop is ended, redraw the chart.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function () {
this.series[0].points.forEach(point => {
point.options.baseColor = point.color;
});
}
}
},
series: [{
name: 'Brands',
data: [
{ name: 'Microsoft Internet Explorer', y: 56.33 },
{ name: 'Chrome', y: 24.03 },
{ name: 'Firefox', y: 10.38 },
{ name: 'Safari', y: 4.77 },
{ name: 'Opera', y: 0.91 },
{ name: 'Proprietary or Undetectable', y: 0.2 }
],
innerSize: '40%',
size: '80%',
point: {
events: {
click: function () {
this.series.points.forEach(point => {
point.update({
color: this.options.baseColor,
dataLabels: {
enabled: point === this
}
}, false);
});
this.series.chart.redraw();
}
}
}
}]
});
example: http://jsfiddle.net/jvacqt4j/
I have a highcharts stacked barchart that has a few values that are extremely low. This causes the two dataLabels to overlap, like this fiddle: http://jsfiddle.net/cerjps88/
What is the best means to ensure that the labels can't overlap?
Here's my highchart code:
function getCostStackedColumnChart(series) {
function costFilterPluck(costCollection, propertyName) {
return _.chain(costCollection)
.filter(function (f){
return Math.abs(f.metric_mean_patient_cost) > 0 && Math.abs(f.metric_mean_patient_cost_rx) > 0
})
.pluck(propertyName)
.take(10)
.value();
}
function shapeCostData(costCollection) {
return [
{
name: 'RxCost Per Prescription',
color: '#1aadce',
data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
},
{
name: 'Retail Price Per Prescription (2014)',
color: '#00FFFF',
data: costFilterPluck(series, 'metric_drug_price_rx')
}
];
}
return {
options: {
chart: {
type: 'column'
},
tooltip: {
formatter: function () {
var format = d3.format(",.2f");
var chart = this.point.series.chart;
var index = chart.xAxis[0].categories.indexOf(this.x);
var series1 = this.point.series;
return '<b>' + this.x + '</b><br/>' +
series1.name + ': $' + format(this.y);
}
},
showInLegend: true,
plotOptions: {
column: {
grouping: true,
stacking: 'normal',
dataLabels: {
enabled: true,
allowOverlap: false,
format: '${y:,.2f}',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
style: {
fontWeight: 'bold',
textShadow: '0 0 3px white'
},
}
}
}
},
xAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
categories: costFilterPluck(series, 'aedrug_label'),
title: {text: 'Drug'}
},
yAxis: {
min: 0,
title: {
text: 'Total Cost Per Prescription'
}
},
tooltip: {
shared: true
},
title: {
text: drugGroupName + ' RxCost'
},
series: shapeCostData(series)
};
}
The newest version of highcharts automatically hides overlapping labels. After upgrading the new version, the issue was resolved.
I've created 2 pie charts using Highcharts but I have duplicated the code.
How can just have one based code - calling in a different json file.
var chart1 = {
chart: {
renderTo: 'container1'
},
title: {
text: 'Industry'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function () {
return ' '+ this.y.toFixed(2) +' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function () {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
}
var options = chart1;
$.getJSON(link + "/valuations/industry.json", null, function (items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
console.log(valuations);
$.each(valuations, function (itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options.series.push(series);
chart1 = new Highcharts.Chart(options);
//chart.render();
});
var chart2 = {
chart: {
renderTo: 'container2'
},
title: {
text: 'Geographic'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function () {
return ' '+ this.y.toFixed(2) +' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function () {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
}
var options2 = chart2;
$.getJSON(link + "/valuations/geographic.json", null, function (items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
$.each(valuations, function (itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options2.series.push(series);
chart2 = new Highcharts.Chart(options2);
//chart.render();
});
Highcharts.setOptions({
colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
});
$('#export').click(function() {
Highcharts.exportCharts([chart1, chart2]);
});
});
See code comments:
// Define a default set of chart options
var defaultChart = {
chart: {
renderTo: 'chart'
},
title: {
text: 'Chart'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function() {
return ' ' + this.y.toFixed(2) + ' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function() {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
};
// Create a function that will fetch the data and create the chart based on passed options
function makeChart( url, chart, options ) {
$.getJSON(link + url, null, function(items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
$.each(valuations, function(itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options.series.push(series);
chart = new Highcharts.Chart(options);
//chart.render();
});
}
//Set up chart1's custom options
var chart1 = {
chart: {
renderTo: 'container1'
},
title: {
text: 'Industry'
}
}
// Call our new function to make the chart
makeChart( "/valuations/industry.json", chart1, $.extend(true, {}, default_chart, chart1) );
// Setup chart2's custom options
var chart2 = {
chart: {
renderTo: 'container2'
},
title: {
text: 'Geographic'
}
}
// Call our new function to make the chart
makeChart( "/valuations/geographic.json", chart2, $.extend(true, {}, default_chart, chart2) );
Highcharts.setOptions({
colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
});
$('#export').click(function() {
Highcharts.exportCharts([chart1, chart2]);
});