Bubble Chart Tutorial With Examples with demo

Rate this post

Today, We want to share with you Bubble Chart Tutorial With Examples.In this post we will show you Create bubble chart using highcharts with example, hear for How to use highcharts bubble chart to show data in bubble with example we will give you demo and example for implement.In this post, we will learn about bubble chart with 4 variables with an example.

Bubble Chart Tutorial With Examples

There are the Following The simple About Make Data Pop With Bubble Charts Full Information With Example and source code.

As I will cover this Post with live Working example to develop Highcharts bubble chart with tooltip example, so the A Complete Guide to Bubble Charts is used for this example is following below.

Highcharts Bubble Chart Example

index.html

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

Free Live Chat for Any Issue

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts - Bubble chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var graphtype = {
                type: 'bubble',
                plotBorderWidth: 1,
                zoomType: 'xy'
            }
            var graphTitle = {
                text: 'Sugar and fat intake per country'
            }
            var graphchildtitle = {
                text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
            }
            var graphxaxis = {
                gridLineWidth: 1,
                title: {
                    text: 'Daily fat intake'
                },
                labels: {
                    format: '{value} gr'
                },
                plotLines: [{
                    color: 'black',
                    dashStyle: 'dot',
                    width: 2,
                    value: 65,
                    label: {
                        rotation: 0,
                        y: 15,
                        style: {
                            fontStyle: 'italic'
                        },
                        text: 'Safe fat intake 65g/day'
                    },
                    zIndex: 3
                }]
            }
            var graphyaxis = {
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Daily sugar intake'
                },
                labels: {
                    format: '{value} gr'
                },
                maxPadding: 0.2,
                plotLines: [{
                    color: 'black',
                    dashStyle: 'dot',
                    width: 2,
                    value: 50,
                    label: {
                        align: 'right',
                        style: {
                            fontStyle: 'italic'
                        },
                        text: 'Safe sugar intake 50g/day',
                        x: -10
                    },
                    zIndex: 3
                }]
            }
            var graphlegend = {
                enabled: false
            }
            var graphtooltip = {
                useHTML: true,
                headerFormat: '<table>',
                pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
                    '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
                    '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
                    '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
                footerFormat: '</table>',
                followPointer: true
            }
            var graphplotoptions = {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            }
            var graphseries = [{
                data: [
                    { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Bhavanagar' },
                    { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Surat' },
                    { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Rajkot' },
                    { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Ahemdabad' },
                    { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Jammnagar' },
                    { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'devpura' },
                    { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'Junaghdh' },
                    { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Pipaliya' },
                    { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'mauravat' },
                    { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'lanka' },
                    { x: 68.6, y: 20, z: 16, name: 'RU', country: 'ganesh' },
                    { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
                    { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Himalay' },
                    { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Pavaband' },
                    { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'porbandar' }
                ]
            }]
            $('#chart-full-content').highcharts({
                chart:graphtype,
                title: graphTitle,
                subtitle:graphchildtitle,
                xAxis: graphxaxis,
                yAxis:graphyaxis,
                legend: graphlegend,
                tooltip:graphtooltip,
                plotOptions: graphplotoptions,
                series: graphseries
            });
        });
    </script>
</head>
<body>
    <div id="chart-full-content" style="min-width: 335px; height: 425px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Inverted Axes Chart Tutorial With Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

I hope you get an idea about bubble chart with 2 variables.
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.