Today, We want to share with you highcharts treemap drill down a large chart.In this post we will show you highcharts treemap, hear for drill down a large chart we will give you demo and example for implement.In this post, we will learn about highcharts map drill down with an example.
highcharts treemap drill down a large chart
There are the Following The simple About a large tree Full Information With Example and source code.
As I will cover this Post with live Working example to develop tree map chart, so the some major files and Directory structures for this example is following below.
Drilldown treemap Example with demo
This Example display a large of the lots of data set display visualized with Drilldown a tree map demo.Each Languages of the Programming version has a data point, simple generated grouped by continent.
Step 1: Include jQuery & highcharts CDN
include External jquery
http://jsfiddle.net/0bsa44sz/
Step 2: HTML Part with design
index.html
Programming Version Total Market Share Codeigniter 8.0 26.61% Codeigniter 9.0 16.96% Laravel 18.0 8.01% Laravel 19.0 7.73% AngularJs 12 6.72% Codeigniter 6.0 6.40% AngularJs 11 4.72% Codeigniter 7.0 3.55% MySQL 5.1 3.53% AngularJs 13 2.16% AngularJs 3.6 1.87% React 11.x 1.30% Laravel 17.0 1.13% AngularJs 10 0.90% MySQL 5.0 0.85% AngularJs 9.0 0.65% AngularJs 8.0 0.55% AngularJs 4.0 0.50% Laravel 16.0 0.45% AngularJs 3.0 0.36% AngularJs 3.5 0.36% AngularJs 6.0 0.32% AngularJs 5.0 0.31% AngularJs 7.0 0.29% Proprietary or Undetectable 0.29% Laravel 18.0 - Maxthon Edition 0.26% Laravel 14.0 0.25% Laravel 20.0 0.24% Laravel 15.0 0.18% Laravel 12.0 0.16% React 12.x 0.15% MySQL 4.0 0.14% Laravel 13.0 0.13% MySQL 4.1 0.12% Laravel 11.0 0.10% AngularJs 14 0.10% AngularJs 2.0 0.09% Laravel 10.0 0.09% React 10.x 0.09% Codeigniter 8.0 Tencent Traveler Edition 0.09%
Step 3: javascript File
script.js
// Make a simple the chart
Highcharts.chart('container', {
chart: {
type: 'treemap'
},
title: {
text: 'Programming market shares. January, 2021 to May, 2021'
},
subtitle: {
text: 'Click the slices to view versions. Source: pakainfo.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '{series.name}
',
pointFormat: '{point.name}: {point.y:.2f}% of total
'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Codeigniter',
value: 56.33,
drilldown: 'Codeigniter'
}, {
name: 'Laravel',
value: 24.03,
drilldown: 'Laravel'
}, {
name: 'AngularJs',
value: 10.38,
drilldown: 'AngularJs'
}, {
name: 'MySQL',
value: 4.77,
drilldown: 'MySQL'
}, {
name: 'React',
value: 0.91,
drilldown: 'React'
}, {
name: 'Proprietary or Undetectable',
value: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
colorByPoint: true,
name: 'Codeigniter',
id: 'Codeigniter',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
colorByPoint: true,
name: 'Laravel',
id: 'Laravel',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
colorByPoint: true,
name: 'AngularJs',
id: 'AngularJs',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
colorByPoint: true,
name: 'MySQL',
id: 'MySQL',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
colorByPoint: true,
name: 'React',
id: 'React',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
http://jsfiddle.net/kzoon/ksb9k1yd/2/
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about drill down a large chart.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.