but currently, I am having errors.
here is my code URL.
https://jsfiddle.net/7nceu5vx/
Code: Select all
var data =[{
id: '0.0',
parent: '',
name: 'KSE 100',
volume : 3232322,
chg : 2.9,
netChg: 1.3,
index : 32819,
count : 500,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#003a04'], // start
[1, '#056b11'] // end
]
},
}, {
id: '1.0',
parent: '0.0',
name: 'Automobiles',
chg : 21.2,
netChg: 2.4,
index : 389283,
count : 20,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#008709'], // start
[1, '#26D701']
]
},
}, {
parent: '1.0',
name: 'BKTI',
value: 1,
}, {
parent: '1.0',
name: 'TATA',
value: 1,
}, {
parent: '1.0',
name: 'Tesla',
value: 1,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#7e0505'], // start
[1, '#bd0505'] // end
]
},
}, {
id: '2.0',
name: 'Commerical Bank',
parent: '0.0',
chg : 21.2,
netChg: 2.4,
index : 389283,
count : 30,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, '#850b0b'], // start
[1, '#E20000'] // end
]
}
}, {
parent: '2.0',
name: 'HBL',
value: 1,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#00AB08'], // start
[1, '#26D701'] // end
]
},
}, {
parent: '2.0',
name: 'SC',
value: 1
}, {
parent: '2.0',
name: 'ABL',
value: 1
}, {
id: '3.0',
name: 'Cement',
parent: '0.0',
chg : 21.2,
netChg: 2.4,
index : 389283,
count: 210,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#008709'], // start
[1, '#26D701'] // end
]
}
}, {
parent: '3.0',
name: 'OGDC',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}, {
parent: '3.0',
name: 'Lucky',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}, {
parent: '3.0',
name: 'Thatta',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}];
var data2 =
[{
id: '0.0',
parent: '',
name: 'KSE ALL',
volume : 3232322,
chg : 2.9,
netChg: 1.3,
index : 32819,
count : 500,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#003a04'], // start
[1, '#056b11'] // end
]
},
}, {
id: '1.0',
parent: '0.0',
name: 'Chemical',
chg : 21.2,
netChg: 2.4,
index : 389283,
count : 20,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#008709'], // start
[1, '#26D701']
]
},
}, {
parent: '1.0',
name: 'BKTI',
value: 1,
}, {
parent: '1.0',
name: 'TATA',
value: 1,
}, {
parent: '1.0',
name: 'Tesla',
value: 1,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#7e0505'], // start
[1, '#bd0505'] // end
]
},
}, {
id: '2.0',
name: 'Technology',
parent: '0.0',
chg : 21.2,
netChg: 2.4,
index : 389283,
count : 30,
color: {
linearGradient: { x1: 0, x2: 1, y1: 0, y2: 1 },
stops: [
[0, '#850b0b'], // start
[1, '#E20000'] // end
]
}
}, {
parent: '2.0',
name: 'HBL',
value: 1,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#00AB08'], // start
[1, '#26D701'] // end
]
},
}, {
parent: '2.0',
name: 'SC',
value: 1
}, {
parent: '2.0',
name: 'ABL',
value: 1
}, {
id: '3.0',
name: 'Fertilizer',
parent: '0.0',
chg : 21.2,
netChg: 2.4,
index : 389283,
count: 210,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#008709'], // start
[1, '#26D701'] // end
]
}
}, {
parent: '3.0',
name: 'OGDC',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}, {
parent: '3.0',
name: 'Lucky',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}, {
parent: '3.0',
name: 'Thatta',
value: 1,
chg : 22.1,
netChg : 2.3,
vol: 2121332,
price : 32.2,
}];
function numberChange(val){
console.log(val);
if(parseInt(val) < 0 ){
return 'red';
}
else {
return 'green';
}
}
$(document).ready(function(){
});
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
title: {
text: 'World population 2017'
},
subtitle: {
text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
},
plotOptions: {
sunburst: {}
},
series: [{
type: "sunburst",
name: 'Root',
data: data,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textShadow: false ,
backgroundColor: 'rgba(255, 255, 255, 1)',
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
tooltip: {
shared: true,
useHTML: true,
valueDecimals: 2,
style : {
fontSize : 12 + 'px'
},
//headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
formatter: function () {
console.log(this);
if (this.point.node.level == 3) {
return '<table class"comments_buble"><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Price </td>' + '<td style="text-align: right"><b>'+this.point.options.price +' PKR</b></td></tr>'+ '<tr><td>Chg. </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
'<tr><td>% Chg. </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
'<tr><td>Volume </td>' + '<td style="text-align: right;"><b>'+ this.point.options.vol +'</b></td></tr></table>' ;
}
else if(this.point.node.level == 2) {
return '<table><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Index </td>' + '<td style="text-align: right"><b>'+this.point.options.index +'</b></td></tr>'+ '<tr><td>Chg. </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
'<tr><td>% Chg. </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
'<tr><td>Companies </td>' + '<td style="text-align: right;"><b>'+ this.point.options.count +'</b></td></tr></table>' ;
}
else {
return '<table><tr><th colspan="2">'+this.point.options.name+'</th></tr><tr><td>Index </td>' + '<td style="text-align: right"><b>'+this.point.options.index +'</b></td></tr>'+ '<tr><td>Chg. </td>' + '<td style="text-align: right;color:green;"><b>'+ this.point.options.chg +'</b></td></tr>'+
'<tr><td>% Chg. </td>' + '<td style="text-align: right;color:green"><b>'+ this.point.options.netChg +'</b></td></tr>'+
'<tr><td>Volume </td>' + '<td style="text-align: right;"><b>'+ this.point.options.volume +'</b></td></tr>'+
'<tr><td>Companies </td>' + '<td style="text-align: right;"><b>'+ this.point.options.count +'</b></td></tr></table>' ;
}
},
}
};
var chart = new Highcharts.Chart(options);
$('#type_').on('change',function(){
alert(this.value);
// console.log(chart.series[0])
//chart.destroy();
// drawChart(data2);
// chart.series[0].update({
// data: data2
// })
// var chart = new Highcharts.Chart(options);
chart.series[0].setData(data2);
//chartBench.redraw();
chart.redraw()
});