Render Chart selected checkbox data from external CSV using d3.csv - CanvasJS Charts JavaScript Charts

Render Chart selected checkbox data from external CSV using d3.csv - CanvasJS Charts JavaScript Charts

by canvasjs

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Monkey Map</title>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
		<script src="https://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.js'></script>
        <script src="https://codepen.io/vishwas/pen/yJxkqZ.js"></script><!-- proj4.js is stored in this path -->
			
        <script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>

		<link href='https://api.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.css' rel='stylesheet' />
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />

    </head>
    <body>
            <div>
                <h3>MonkeyMaps!</h3>
            </div>

			<div id="chartContainer" style="height: 300px; width: 75%; float:right;"> </div>
		<div id="formChecker" style="width: 25%; float:right;">
    <ul>
    		<input type="checkbox" name="All" onclick="validate()" id="All">
            <label for="All">All Monkeys</label>
        <li>
            <input type="checkbox" name="Ateles" onclick="validate()" id="Ateles">
            <label for="Ateles">Ateles geoffroyi</label>
            <ul>
                <li>
                    <input type="checkbox" name="Chibi" onclick="validate()"  id="Chibi">
                    <label for="Chibi">Chibi</label>
                </li>
                <li>
                    <input type="checkbox" name="Greg" onclick="validate()"  id="Greg">
                    <label for="Greg">Greg</label>
                </li>
                <li>
                    <input type="checkbox" name="Kyle" onclick="validate()"  id="Kyle">
                    <label for="Kyle">Kyle</label>
                </li>
...

CSS

#map {
	width: 800px;
	height: 500px;
}

.info {
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.info h4 {
	margin: 0 0 5px;
	color: #777;
}

.legend {
	text-align: left;
	line-height: 18px;
	color: #555;
}

.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
}
#days{
 height:500px;   
}