canvasjs-dashboard-samples/assets/economy-dashboard/economy-dashboard.js
//GDP per capita vs Life expectancy bubble chart

GDP per capita vs Life expectancy bubble chart
GDP per capita vs Life expectancy bubble chart
function createGDPPerCapitaChart(dataPoints) {
		var GDPPerCapitaBubbleChart = new CanvasJS.Chart("GDP-per-capita-bubble-chart",
			{
				backgroundColor: "transparent",
				axisX: {
					labelFontWeight: 'lighter',
					lineThickness: 1,
					logarithmic: true,
					minimum: 10,
					maximum: 70000,
					tickLength: 10,
					tickThickness: 1,
					title: "GDP per capita",
					titleFontColor: "#065f66",
					valueFormatString: "$#,###"
				},
				axisY: {
					gridThickness: 1,
					labelFontWeight: 'lighter',
					lineThickness: 1,
					minimum: 30,
					maximum: 100,
					tickThickness: 1,
					tickLength: 10,
					title: "Life Expectancy",
					titleFontColor: "#065f66",
					valueFormatString: "#,### yrs"
				},
				toolTip: {
					contentFormatter: function(e) {
						var content = "";
						for (var i = 0; i < e.entries.length; i++) {
							content += "<strong>" + e.entries[i].dataPoint.name + "</strong> <br/> GDP per capita: US $" + CanvasJS.formatNumber(e.entries[i].dataPoint.x,"#,###.##") + " <br/> Life Expectancy: " +
							CanvasJS.formatNumber(e.entries[i].dataPoint.y,"#,###.##") + " yrs<br/> Population: "+formatTooltipNumber(e.entries[i].dataPoint.z);
						}
						return content;
					}
				},
				data: [
					{
						indexLabelPlacement: "outside",
						legendMarkerType: "circle",
						name: "Size of Bubble Represents Population (click on any bubble to see more details)",
						showInLegend: true,
						type: "bubble",
						click: showChartForSelectedCountry,
						dataPoints: dataPoints
					}
				],
				subtitles: [
				{
					dockInsidePlotArea: true,
					fontColor: "rgba(50,30,150,0.1)",
					fontSize: 126,
					text: yearArr[yearCounter],
					verticalAlign: "center"
				}
				],
			});
		GDPPerCapitaBubbleChart.render();
		return GDPPerCapitaBubbleChart;
	}
function createGDPPerCapitaChart ( dataPoints ) { var GDPPerCapitaBubbleChart = new CanvasJS . Chart ( "GDP-per-capita-bubble-chart" , { backgroundColor : "transparent" , axisX : { labelFontWeight : 'lighter' , lineThickness : 1 , logarithmic : true , minimum : 10 , maximum : 70000 , tickLength : 10 , tickThickness : 1 , title : "GDP per capita" , titleFontColor : "#065f66" , valueFormatString : "$#,###" } , axisY : { gridThickness : 1 , labelFontWeight : 'lighter' , lineThickness : 1 , minimum : 30 , maximum : 100 , tickThickness : 1 , tickLength : 10 , title : "Life Expectancy" , titleFontColor : "#065f66" , valueFormatString : "#,### yrs" } , toolTip : { contentFormatter : function ( e ) { var content = "" ; for ( var i = 0 ; i < e . entries . length ; i ++ ) { content += "<strong>" + e . entries [ i ] . dataPoint . name + "</strong> <br/> GDP per capita: US $" + CanvasJS . formatNumber ( e . entries [ i ] . dataPoint . x , "#,###.##" ) + " <br/> Life Expectancy: " + CanvasJS . formatNumber ( e . entries [ i ] . dataPoint . y , "#,###.##" ) + " yrs<br/> Population: " + formatTooltipNumber ( e . entries [ i ] . dataPoint . z ) ; } return content ; } } , data : [ { indexLabelPlacement : "outside" , legendMarkerType : "circle" , name : "Size of Bubble Represents Population (click on any bubble to see more details)" , showInLegend : true , type : "bubble" , click : showChartForSelectedCountry , dataPoints : dataPoints } ] , subtitles : [ { dockInsidePlotArea : true , fontColor : "rgba(50,30,150,0.1)" , fontSize : 126 , text : yearArr [ yearCounter ] , verticalAlign : "center" } ] , } ) ; GDPPerCapitaBubbleChart . render ( ) ; return GDPPerCapitaBubbleChart ; }
GDP per capita vs Life expectancy bubble chart
GDP per capita vs Life expectancy bubble chart