Home » Bubble Chart Tutorial With Examples with demo

Bubble Chart Tutorial With Examples with demo

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.

Read Also:  Pyramid Chart Tutorial With Examples Demo

<!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:  Pie Chart with Legends Tutorial With Examples

Summary

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

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Basic Column Chart Tutorial With Examples
  2. Read Also:  Gauge with Dual Axes chart Tutorial With Examples
  3. Read Also:  Fixed Placement Columns Chart Tutorial With Examples
  4. Read Also:  Spline with Inverted Axes Chart Tutorial
  5. Read Also:  Area with Negative Values Chart Tutorial
  6. Read Also:  highcharts treemap drill down a large chart
  7. Read Also:  3D Column with Stacking and Grouping Chart Tutorial
  8. Read Also:  Tree Map and Levels Tutorial With Examples
  9. Read Also:  Time Data with Irregular Intervals Chart Tutorial
  10. Read Also:  Simple Bar Chart Tutorial With Examples

Leave a Comment

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