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.
<!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 :
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.