Introduction to Chart.js

This page walks through the US County 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:

<table border="0" style="padding:10px;margin:10px">
  <tr>
  <td>
  <div id="CM_MapContainer_0"></div>
  </td>
  <td>
<div id="CountyInfo" style='width:300px;height:30px;border:1px solid #000000;padding:10px'>State: None</div>
<div style="width:300px">
  <!-- Note that here we have to set the height and width as attributes separate from the style for Canvas elements --->
  <canvas id="TheChartCanvas" height='320' width='300' style="border:1px solid #000000;padding:10px;bottom:0px"></canvas>
  </div>
</td>
  </tr>
  </table>

The next step is to override the onload function for the county layer so we can colorize the features based on an attribute and setup the legend.

var TheColors=['#d7191c','#fdae61','#ffffbf','#abd9e9','#2c7bb6'];


var TheDataset=Layer_Counties.GetDataset();


// get the feature values into an array
var AttributeIndex=TheDataset.GetAttributeIndexFromHeading("AGE010210D");

var FeatureValues=TheDataset.GetAttributeArray(AttributeIndex);

// get colors to match the values
var Intervals=[0,10000,20000,50000,100000,200000];

var Result=CMUtilities.GetColorsFromArrays(FeatureValues,TheColors,Intervals); // get the feature colors and legend labels

// setup an array with styles based on the colors
var FeatureColors=Result.FeatureColors;

for (var i=0;i<TheDataset.GetNumAttributeRows();i++)
{
	Layer_Counties.SetFeatureSetting("Style","strokeStyle",i,"rgba(220,220,200,0.8)");
	Layer_Counties.SetFeatureSetting("Style","fillStyle",i,FeatureColors[i]);
};
// make a black outline for the selected style
Layer_Counties.SetSetting("SelectedStyle","fillStyle","rgba(0,0,0,0)");
Layer_Counties.SetSetting("SelectedStyle","strokeStyle","#000000");
Layer_Counties.SetSetting("SelectedStyle","lineWidth",2);

// add a legend
var TheCanvasElement=TheMainContainer.GetElement(CMMainContainer.CANVAS_CONTAINER);

var TheLegend=CMUtilities.AddLegend(TheCanvasElement,TheColors,Result.LegendLabels,10,302,190,115);																													

Next, we override the MouseDown function to update the chart and other information.

Layer_Counties.MouseDown=function(TheView,RefX,RefY) 
{
	var Used=false; // flag to indicate if we have used the event
	// get the feature selected, if any
	
	var FeatureIndex=this.In(TheView,RefX,RefY); 
	
	if (FeatureIndex!=-1) // -1 indicates no feature selected
	{
		var TheDataset=this.GetDataset();
		
		this.SetSelectedFeature(FeatureIndex);
		
		// update the DIV tag over the chart to contain the name of the selected county
		
		var TheCountyInfo=document.getElementById("CountyInfo");
		
		TheCountyInfo.innerHTML="County: "+TheDataset.GetAttributeCellByHeading("NAME",FeatureIndex);
		
		// Setup the labels and "buckets" for the chart
		
		var AttributeHeaders=["AGE010180D","AGE010190D","AGE010200D","AGE010210D"];
		var Labels=["1980","1990","2000","2010"];
		
		var Buckets=[]; // the buckets (values) for each cateogory
		
		for (var i=0;i<Labels.length;i++) 
		{
			var TheHeading=AttributeHeaders[i];
			Buckets[i]=TheDataset.GetAttributeCellByHeading(TheHeading,FeatureIndex);
		}
		
		UpdateChart(Labels,Buckets);
		Used=true; // let the caller know we've used the event so no one else uses it
	}
	return(Used);
};

The UpdateChart() function takes care of updating the chart based on the attributes for the selected feature.

/**
* Updates the chart with new data and labels
*/
var TheChart=null; // global with the existing chart, if any

function UpdateChart(Labels,Buckets)
{
	// Setup the data for the chart library
	
	var Color="rgba(20,20,20,1)";
	
	var TheBarChartData={
		type: 'line',
		data: {
			labels : Labels,
			datasets : [{
				label: 'population',
				data : Buckets,
				borderColor : Color
			}]
		}
	}
	Chart.defaults.global.legend.display = false;
	
	// 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();
	
	TheChart=new Chart(TheContext,TheBarChartData);
};