Introduction to Chart.js with the Global Countries Example

This tutorial will walk you through the operation of the Global Country Map examples of using Chart.js with CanvasMap.

The first step is to create a container for the chart and any other information you'd like to display. Notice that the use of rows and columns within the table force the information to appear to the right of the map. You can also use DIV tags that are set to "float" if you want the content to change to a vertical layout for mobile devices.

<table border="0" style="padding:10px;margin:10px">
	<tr>
		<td>
			<div id="CM_MapContainer_0" style='width:500;height:500;border:1px black solid;box-shadow: 4px 4px 5px #888888;'>
			</div>
		</td>
		<td>
			<!----------------------------- HTML for the chart display, note that the display is "none" until the user clicks on a country ----------------------------->
			<div id="VenezualaContent" style="height:500px,display:none; margin:5px;">
			<table class='TableStyles' width='400' border='0' cellspacing='2px' cellpadding='2px'>
				<tr>
					<td><div id='TheCountryName' style='font-size:24px'></div></td>
					<td><img id='TheFlag' style='width:150px;box-shadow: 0px 0px 5px #888888;' src='Images/Flags/Venezuela.JPG' alt='Flag Unavailable'/></td>
				</tr>
			</table>
			<canvas id='TheChartCanvas' height="300" width="400" ></canvas>
			<div style='padding-left: 5px; padding-bottom: 5px;'>
			<table class='TableStyles' width='400' border='1' cellspacing='0px' cellpadding='0px'>
				<tr>
					<th><p><strong>Population</strong></p></th>
					<th><p><strong>Income Group</strong></p></th>
				</tr>
				<tr>
					<td><p id="Population"></p></td>
					<td><p id="Income">Upper Middle Income</p></td>
				</tr>
			</table>
			</div>
			</div>
		</td>
	</tr>
</table>

The next step is to override the onload function so we can select a default country after the data has loaded.

		Layer_Countries.OnLoad=function() 
		{
			// set Brazil just to get started
			this.SetSelectedFeature(22);
			DisplayCountryInfo(this,22); // brazil
		};

Next, we override the MouseDown function to update the chart and other information when a new country ti selected. Notice that first as save the super-classes MouseDown function so we can call it within the new function. Also, the "Used" flag indicates we have used the MouseDown event so other layers will not try to select features.

		Layer_Countries.SuperClass_MouseDown=Layer_Countries.MouseDown; // save the existing MouseMove function from the superclass
		
		// Override the existing mouse move with our own so we can chagne the action 
		
		Layer_Countries.MouseDown=function(TheView,RefX,RefY) 
		{
			var Used=false; // flag to indicate if we have used the event
	
			// call the parent function
			
			Used=this.SuperClass_MouseDown(TheView,RefX,RefY);
			
			// if this layer was clicked with the INFO tool then update the chart
			
			if ((this.GetVisible())&&(TheView.GetTool()==CMToolHandler.TOOL_INFO)) 
			{
				// get the feature selected, if any
				
				var FeatureIndex=this.In(TheView,RefX,RefY); 
				
				if (FeatureIndex!=-1) // -1 indicates no feature selected
				{
					this.SetSelectedFeature(FeatureIndex);
					
					DisplayCountryInfo(this,FeatureIndex);
	
					Used=true; // let the caller know we've used the event so no one else uses it
				}
			}
			
			return(Used);
		};
	}

The DisplayCountryInfo() function is similar to other functions we have used to change the content of the web page based on a selected feature. Refer to the Global Country Map example to see how this function operates.

The UpdateChart() function sets the specified labels and colors into the chart.

function UpdateChart(Labels,Buckets)
{
	// create a background color for the chart
	var Color="rgba(20,20,20,1)";
	
	// Setup the data for the chart library
	var TheBarChartData={
		type: 'line', // see the other types of charts at Chartjs.org
		data: {
			labels : Labels, // labels for the horiziontal access
			datasets : [{
				data : Buckets, // data entries
				borderColor : Color
			}]
		}
	}
	Chart.defaults.global.legend.display = false;
	//	Chart.defaults.global.animation=false; // comment this out to turn off animated charts
	
	// Get the canvas element for the chart and set its data
	var TheChartCanvas=document.getElementById("TheChartCanvas"); // canvas
	var TheContext=TheChartCanvas.getContext("2d");
	
	if (TheChart!=null) TheChart.destroy(); // destroy and existing chart if there is one
	
	TheChart=new Chart(TheContext,TheBarChartData); // create the new chart
};