HighCharts column chart populated with series data from a function - javascript

I'm trying to populate a HighCharts dataset with results from SQL Server in Classic ASP. (In the examples obviously there are numbers and names instead of vbscript variables)
The first example is without a function - and works. http://jsfiddle.net/zbpamrhs/
$(function () {
var OnOff = 3
var DivName = []
var DivN = []
var DivTotal = []
var DivColor = []
DivName[0] = 'Div'
DivName[1] = 'Unit A'
DivName[2] = 'Unit B'
DivName[3] = 'Unit C'
DivN[0] = 22
DivN[1] = 10
DivN[2] = 7
DivN[3] = 3
DivTotal[0] = 5.6
DivTotal[1] = 5.8
DivTotal[2] = 5.4
DivTotal[3] = 5.7
DivColor[0] = '#333333'
DivColor[1] = '#c9e7ff'
DivColor[2] = '#4898a4'
DivColor[3] = '#ffd949'
$('#DivCompTotalC').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 180,
useHTML: true,
x: 0,
y: 40,
borderWidth: 0
},
xAxis: {
categories: ['']
},
yAxis: {
max: 7.01,
labels: {
enabled: false
},
gridLineColor: 'transparent',
plotLines: [{
value: DivTotal[0],
color: DivColor[0],
width: 2,
label: {
text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
align: 'right',
y: -5,
x: 0,
style: {
fontSize: '13px'
}
},
zIndex: 2
}],
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.10,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
y: 5,
style: {
fontSize: '14px'
}
},
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: [{
name: DivName[1] + ' [' + DivN[1] + ']',
color: '#c9e7ff',
data: [DivTotal[1]]
}, {
name: DivName[2] + ' [' + DivN[2] + ']',
color: '#ffd949',
data: [DivTotal[2]]
}, {
name: DivName[3] + ' [' + DivN[3] + ']',
color: '#4898a4',
data: [DivTotal[3]]
}]
});
});
I cannot find what's wrong in the second http://jsfiddle.net/bfb6crpv/
$(function () {
var OnOff = 3
var DivName = []
var DivN = []
var DivTotal = []
var DivColor = []
DivName[0] = 'Div'
DivName[1] = 'Unit A'
DivName[2] = 'Unit B'
DivName[3] = 'Unit C'
DivN[0] = 22
DivN[1] = 10
DivN[2] = 7
DivN[3] = 3
DivTotal[0] = 5.66666666666667
DivTotal[1] = 5.81208053691275
DivTotal[2] = 5.41304347826087
DivTotal[3] = 5.74683544303798
DivColor[0] = '#333333'
DivColor[1] = '#c9e7ff'
DivColor[2] = '#4898a4'
DivColor[3] = '#ffd949'
$('#DivCompTotalC').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 180,
useHTML: true,
x: 0,
y: 40,
borderWidth: 0
},
xAxis: {
categories: ['']
},
yAxis: {
max: 7.01,
labels: {
enabled: false
},
gridLineColor: 'transparent',
plotLines: [{
value: DivTotal[0],
color: DivColor[0],
width: 2,
label: {
text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
align: 'right',
y: -5,
x: 0,
style: {
fontSize: '13px'
}
},
zIndex: 2
}],
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.10,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
y: 5,
style: {
fontSize: '14px'
}
},
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: []
});
var newSeries = [];
for (var i = 1; i <= OnOff; i++) {
var newData = [];
var seria = {};
seria['name'] = DivName[i] + ' [' + DivN[i] + ']';
seria['data'] = DivTotal[i];
seria['color'] = DivColor[i];
newSeries.push(seria);
}
//alert(JSON.stringify(newSeries));
var chart = $('#DivCompTotalC').highcharts();
//alert(JSON.stringify(chart));
$.each(newSeries, function (i, ns) {
chart.addSeries(ns);
});
});


There are multiple issues :
You are trying to addSeries instead of points as compared to the first working fiddle. chart.addSeries(ns);
seria['data'] = DivTotal[i]; data is supposed to be an array as per the working fiddle.
Working fiddle with existing series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/
Working fiddle with no series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/
Docs - http://api.highcharts.com/highcharts#Series.addPoint
Related question : trying to dynamically update Highchart column chart but series undefined

Related

I want to change the font of the name of the series in tooltip in Highcharts

I haven't figure out how to change the "Return of:" in the tooltip. FontSize in the tooltip only affects x and y data, but I would like to change the font of the series name, "Return of:", to be displayed in the same size.
var xData = [];
var yData = [];
for (var i = 0; i < 1000; i++) {
xData.push(Math.round((Math.random() - 0.5) * 100));
yData.push(Math.round((Math.random() - 0.5) * 100));
}
Highcharts.chart('container', {
chart: {
type: 'scatter',
height: 500,
width: 500,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: 'Asset Return Pairs',
fontSize: '30px'
},
xAxis: {
title: {
text: 'Asset 1'
},
max: 50,
tickInterval: 5,
labels: {
format: '{value}%'
}
},
yAxis: {
title: {
text: 'Asset 2'
},
min: -50,
max: 50,
tickInterval: 5,
labels: {
format: '{value}%'
}
},
plotOptions: {
series: {
name: {
style: {
fontSize: '25px'
}
}
}
},
tooltip: {
pointFormat: 'Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
style: {fontSize: 13.5},
},
series: [{
name: 'Return of:',
style: {fontSize: 13},
data: xData.map(function(xVal, index) {
return [xVal, yData[index]];
})
}]
});
Here is also link to jsfiddle: https://jsfiddle.net/lauri1/6a97yngm/25/

I think in your code plotOptions doesn't support the style property in this Highcharts.
You can use formatter property within the tooltip options.
Use this
tooltip: {
pointFormat: 'Asset 1: <b>{point.x}%</b> <br>Asset 2: <b>{point.y}%</b>',
style: {fontSize: 20.5},
formatter: function() {
return '<span style="font-size: 20px">Return of:</span><br>Asset 1: <b>' + this.point.x + '%</b><br>Asset 2: <b>' + this.point.y + '%</b>';
}
Here's the updated fiddler : https://jsfiddle.net/8zqot56u/

Highchart add a text under single bar in bar chart

I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar
Code
var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
chart: {
type: 'bar',
backgroundColor: null,
height: 270,
events: {
load: function() {
this.addSeries({
data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
enableMouseTracking: false,
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '<span class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
}}
}, true);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
width: '75px',
'min-width': '75px',
height: '42px',
'min-height': '42px',
align: 'high'
},
useHTML : true,
formatter: function () {
return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
},
}
},
colors: colors,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: ''
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.25,
groupPadding: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
},
colorByPoint: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px"> lorem</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},
series: [{
data: data
}
]
});
Output
Expected Output
How can I add a percentage under only a single bar?
Any help would be highly appreciated

You can use data labels configuration for a single point.
events: {
load: function() {
this.addSeries(..., {
x: 3,
y: 1,
dataLabels: {
useHTML: true,
formatter: function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '...';
}
}
}]
}, true);
}
}
Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/
API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels

Stuck on the final bits of a multi series line chart

I built a multi series Highcharts https://www.highcharts.com/ line chart with irregular time data. It's almost there, but I'm doing something wrong with the data and/or data formatting. Anyone have a hint or two to throw my way?
The date from the database was converted from '02/03/2009' to javascript time in php using
$date = strtotime($data['As of Date'])*1000;
The other value is a dollar amount.
I haven't yet added the filtered data for 3MO, 6MO, 1YR, 5YR, 10YR
Here is the jsfiddle https://jsfiddle.net/madmichael/th41g4yt/
$( document ).ready(function() {
createChart();
});
function createChart(chartingOptions) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
events: {
load: function(event) {
var total = 0; // get total of data
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: $' + Highcharts.numberFormat(total, 0, '.', ','),
this.plotLeft,
this.plotTop + 20
).attr({
zIndex: 5
}).add() // write it to the upper left hand corner
}
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
/* buttons: [[]], */
buttons: [
{
type: 'all',
text: 'All'
}, {
type: 'month',
count: 3,
text: '3MO'
}, {
type: 'month',
count: 6,
text: '6MO'
}, {
type: 'year',
text: '1YR',
count: 1
}, {
type: 'year',
text: '5YR',
count: 5
}, {
type: 'year',
text: '10YR',
count: 10
}],
buttonTheme: {
width: 60
},
selected: 0
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
pointFormat: '$' + '{point.y:,.0f}'
/* formatter: function() {
return Highcharts.dateFormat('%b %d, %Y', point.x) + ': $
{point.y:,.1f}';
} */
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%b-%Y', this.value);
}
}
},
yAxis: {
type: 'linear',
labels: {
formatter: function () {
if(this.value >= 0 ){
return '$' + this.value / 1000+'k';
}else{
return '-$' + this.value / 1000*-1+'k';
}
}
}
},
series: [{name: 'Investment Fund (A)',fundtype: 'Load',data: [[1483164000000,37149],[1451541600000,37247],[1420005600000,37071],[1388469600000,33407],[1356933600000,19881],[1325311200000,14132],[1293775200000,21541],[1262239200000,18343],[1480485600000,36659],[1448863200000,39677],[1417327200000,38070],[1385791200000,32212],[1354255200000,18197],[1322632800000,14132],[1291096800000,20173],[1259560800000,17399],[1477890000000,34171],[1446267600000,39069],[1414731600000,36522],[1383195600000,30429],[1351659600000,18468],[1320037200000,14848],[1288501200000,20250],[1256965200000,15703],[1475211600000,36503],[1443589200000,36071],[1412053200000,34602],[1380517200000,29214],[1348981200000,17752],[1317358800000,13048],[1285822800000,19287],[1254286800000,17861],[1472619600000,35249],[1440997200000,38775],[1409461200000,36542],[1377925200000,27548],[1346389200000,16784],[1314766800000,15642],[1283230800000,16994],[1251694800000,16821],[1469941200000,32741],[1438318800000,42537],[1406782800000,34230],[1375246800000,28273],[1343710800000,16203],[1312088400000,17674],[1280552400000,18478],[1249016400000,14335],[1467262800000,29782],[1435640400000,40245],[1404104400000,36150],[1372568400000,26157],[1341032400000,16861],[1309410000000,19707],[1277874000000,17013],[1246338000000,13083],[1496206800000,41636],[1464670800000,33015],[1433048400000,40656],[1401512400000,34720],[1369976400000,26850],[1338440400000,16010],[1306818000000,20963],[1275282000000,19441],[1243746000000,12563],[1493528400000,40010],[1461992400000,32603],[1430370000000,39814],[1398834000000,33779],[1367298000000,25205],[1335762000000,17229],[1304139600000,21233],[1272603600000,21426],[1241067600000,10732],[1490936400000,39794],[1459400400000,33054],[1427778000000,39304],[1396242000000,34798],[1364706000000,24063],[1333170000000,17771],[1301547600000,21021],[1270011600000,20983],[1238475600000,8940],[1456725600000,30977],[1330495200000,17307],[1488261600000,40696],[1425103200000,39285],[1393567200000,34955],[1362031200000,22011],[1298872800000,21233],[1267336800000,19268],[1235800800000,7534],[1233640800000,9422],[1485842400000,37149],[1454220000000,30233],[1422684000000,35856],[1391148000000,33603],[1359612000000,22108],[1327989600000,15990],[1296453600000,21021],[1264917600000,18459]]},{name: 'Investment Fund (A)',fundtype: 'No Load',data: [[1483164000000,39428],[1451541600000,39532],[1420005600000,39345],[1388469600000,35456],[1356933600000,21101],[1325311200000,14999],[1293775200000,22863],[1262239200000,19468],[1480485600000,38908],[1448863200000,42111],[1417327200000,40406],[1385791200000,34188],[1354255200000,19314],[1322632800000,14999],[1291096800000,21411],[1259560800000,18466],[1477890000000,36267],[1446267600000,41466],[1414731600000,38763],[1383195600000,32295],[1351659600000,19601],[1320037200000,15759],[1288501200000,21493],[1256965200000,16667],[1475211600000,38742],[1443589200000,38284],[1412053200000,36725],[1380517200000,31006],[1348981200000,18841],[1317358800000,13848],[1285822800000,20470],[1254286800000,18957],[1472619600000,37411],[1440997200000,41154],[1409461200000,38784],[1377925200000,29238],[1346389200000,17814],[1314766800000,16601],[1283230800000,18037],[1251694800000,17853],[1469941200000,34749],[1438318800000,45147],[1406782800000,36330],[1375246800000,30008],[1343710800000,17197],[1312088400000,18759],[1280552400000,19611],[1249016400000,15215],[1467262800000,31609],[1435640400000,42714],[1404104400000,38368],[1372568400000,27762],[1341032400000,17896],[1309410000000,20916],[1277874000000,18057],[1246338000000,13885],[1496206800000,44190],[1464670800000,35040],[1433048400000,43151],[1401512400000,36850],[1369976400000,28498],[1338440400000,16992],[1306818000000,22249],[1275282000000,20634],[1243746000000,13333],[1493528400000,42464],[1461992400000,34604],[1430370000000,42256],[1398834000000,35851],[1367298000000,26751],[1335762000000,18286],[1304139600000,22536],[1272603600000,22740],[1241067600000,11391],[1490936400000,42236],[1459400400000,35082],[1427778000000,41716],[1396242000000,36933],[1364706000000,25539],[1333170000000,18862],[1301547600000,22311],[1270011600000,22270],[1238475600000,9489],[1456725600000,32878],[1330495200000,18368],[1488261600000,43192],[1425103200000,41695],[1393567200000,37099],[1362031200000,23361],[1298872800000,22536],[1267336800000,20450],[1235800800000,7996],[1233640800000,10000],[1485842400000,39428],[1454220000000,32087],[1422684000000,38056],[1391148000000,35664],[1359612000000,23464],
[1327989600000,16971],[1296453600000,22311],[1264917600000,19591]]},],
plotOptions: {
series: {
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible)
{
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
},
line: {
marker: {
enabled: false
},
/* color: '".$attributes["line_color"]."',
*/ }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
credits: {
enabled: false
},
};
/* options.series[5] = {
name: '5 Yrs',
data: processed_five_years,
visible: false
};
*/
var chart = new Highcharts.stockChart(options);
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
};

How to cover the whole pie chart with selected portion

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/

HighChart irrgular Mapping

I have created One HighChart ..But its 2 data coordinates are overlapping on y axis after every 2nd Coordinates.
My JSFiddle
My Code:
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1003, 0.1006, 0.1008, 1.1010, 1.1011, 1.1012, 1.1013, 2.4];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
for (var x = 0; x <= 1; x++) {
var newLP = [];
switch (x) {
case 0:
aName = "One";
newLP.push([0.1004, 4.5]);
newLP.push([0.1008, 1.4]);
newLP.push([1.1012, 5.5]);
newLP.push([1.1014, 2, 6]);
newLP.push([2.4, 8.22]);
break;
case 1:
aName = "Two";
newLP.push([0.1004, 5.52]);
newLP.push([0.1008, 6.16]);
newLP.push([1.1012, 6.34]);
newLP.push([1.1014, 6.69]);
newLP.push([1.1016, 6.36]);
newLP.push([2.4, 7.44]);
break;
}
chart.addSeries({
name: aName,
data: newLP
}, false);
}
chart.redraw();
});
I have test it with several data ..still it overlaps .. what could be the issue ..
Please Suggest

The problem is that you're x-axis points are so close to each other it seems as they are overlapping. For example 0.1003 is pretty close to 0.1006 and 0.1008 is pretty close to 1.1010. However, If you zoom in you can tell they are not overlapping. See http://jsfiddle.net/u9xES/555/.

Categories

Resources