Exploring Chart.js
The Global Country Map and the US County Map provide two examples of using Chart.js with CanvasMap. Chart.js is an open source charting library with excellent documentation and ex maples at Chart.org.
Before using any library in a web solution, it is best to take some time and explore the libraries capabilities, documentation, and quality. The HTML file below contains a minimum solution for a Chart.js web page. Take a look a the code, then copy it into an HTML page and make sure it works.
Note that this code uses an existing Chart.js library that I downloaded from Chart.org. I did this so I could make sure that my code matches the version of Chart.js as they may change Chart.js in the future. You may want to download your own version to get the latest version and then keep it available on your server. You may want to download a copy of CanvasMap and keep it on your server for the same reason as it will be updated and while I try to keep it backward compatible, sometimes we need to change the code or remove old functions.
<html>
<head>
<script src="https://gsp.humboldt.edu/Archive/Libraries/ChartJS/2.3.0/Chart.js"></script>
<script>
// Global to keep track of the chart once it has been created
var TheChart=null;
// Onload function to create the chart
function OnLoad()
{
var Labels=["One","two","three","four","five"]; // labels for each data entry
var Buckets=[12,3,4,23,43]; // the data to be displayed in the chart
var Color="rgba(200,20,20,1)"; // a background color
// Setup the data for the chart library
var TheBarChartData={
type: 'line', // try other types of charts
data: {
labels : Labels,
datasets : [{
data : Buckets,
borderColor : Color
}]
}
}
Chart.defaults.global.legend.display = false; // hides the legend
// Chart.defaults.global.animation=false; // comment this out to turn off animated charts
var TheChartCanvas=document.getElementById("TheChartCanvas"); // Get the canvas element for the chart and set its data
var TheContext=TheChartCanvas.getContext("2d"); // get the context from the eleemnt
if (TheChart!=null) TheChart.destroy(); // destroy a chart if on exists
TheChart=new Chart(TheContext,TheBarChartData); // create the chart and place it in the element
};
</script>
</head>
<body onload="OnLoad()">
<div style="width:400px">
<canvas id='TheChartCanvas' ></canvas>
</div>
</body>
</html>
Next, check out the documentation for Chart.js at Chart.org. Try changing the data, labels, and colors for the chart. Try different types of charts and then try to add another set of data. Make sure to keep backup copies of your working charts.
When you feel comfortable with Chart.js, create a prototype chart that includes the features you want to show on your web page with fake data. Create a new function called "UpdateChart()" that takes the data, labels, and any other variables you want to change when the user interacts with your map as parameters. Call this function from your OnLoad() function with fake data. Make sure the web page works well before moving on.
Copy the sections of the code from your prototype into your web page with your map. Do this a piece at time, making sure there are no errors in the debugger at each step. Now you should have a working map and a working chart, the next step is to connect them.
Add a MouseDown() function as we have done before and then call the UpdateChart() function from within your MouseDown() function with more fake data. If this works, then you can pull data from your attributes to populate the labels, data, and any other parameters for your UpdateChart() function. Soon you will have an interactive map with a chart.
The steps above are the same steps I use whenever I bring a library into a web page, especially when it is a large library that I am unfamiliar with. You'll also want to spend some time searching for a "good" library. The ones I use are typically open source or free, well documented, and have comments on the Web from other developers that have used them and have not had too many problems.