highcharts treemap drill down a large chart

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.

highcharts treemap drill down a large chart
highcharts treemap drill down a large chart

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

<script src="https://github.highcharts.com/master/highcharts.js"></script>
<script src="https://github.highcharts.com/master/modules/data.js"></script>
<script src="https://github.highcharts.com/master/modules/drilldown.js"></script>
<script src="https://github.highcharts.com/master/modules/treemap.js"></script>

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

http://jsfiddle.net/0bsa44sz/

Step 2: HTML Part with design

index.html

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

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: '<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: '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/

  Scatter with Regression Line Chart Tutorial
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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Spline with Inverted Axes Chart Tutorial
  2.   3D Column with Null and 0 Values Chart Tutorial
  3.   Basic Area Chart Tutorial With Examples
  4.   Time Series Zoomable Chart Tutorial With Examples
  5.   Large Heat Map Tutorial With Examples
  6.   Spline Chart Updating Each Second Tutorial With Examples
  7.   Basic Column Chart Tutorial With Examples
  8.   Column with Rotated Labels Chart Tutorial
  9.   Heat Map Tutorial With Examples For Beginners
  10.   Area Range and Line Chart Tutorial With Examples

Leave a Reply

Your email address will not be published. Required fields are marked *