Bubble Chart in JavaScript
HTML
<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts.js"></script>
<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts.charts.js"></script>
<link href='https://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<div id="bubble-chart">A bubble chart will load here!</div>
JavaScript
FusionCharts.ready(function () {
var firstChart = new FusionCharts({
type: 'bubble',
renderAt: 'bubble-chart',
width: '100%',
height: '475',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Fertility Rate Vs Life Expectancy",
"captionFontBold": "0",
"captionFontSize": "23",
"captionPadding": "30",
"xAxisName": "Life Expectancy",
"yAxisName": "Fertility Rate",
"xAxisMinValue": "40",
"xAxisMaxValue": "90",
"yAxisMaxValue": "9",
"bgColor": "#232D3B",
"bgAlpha": "100",
"canvasBgColor": "#232D3B",
"canvasBorderAlpha": "0",
"canvasBgAlpha": "0",
"showAlternateHGridColor": "0",
"showAlternateVGridColor": "0",
"use3dlighting": "0",
//Plot Cosmetics
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"plotFillHoverColor": "#EE7A44",
"numDivlines": "3",
"divLineAlpha": "20",
"vDivlineAlpha": "20",
"showValues":"0",
//Text Cosmetics
"baseFont": "Maven Pro",
"baseFontColor": "#B5B3BA",
"outCnvBaseFontColor": "#B5B3BA",
"outCnvBaseFontSize": "13",
"baseFontSize": "13",
"xAxisNameFontSize": "15",
"xAxisNameFontBold": "0",
"yAxisNameFontSize": "15",
"yAxisNameFontBold": "0",
"xAxisNamePadding": "9",
"yAxisNamePadding": "9",
"labelPadding": "10",
//Tooltip Cosmetics
"plotToolText": "<div style='font-size: 18px;'>$name:</div><div style='color:...