JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<canvas id="serviceLife" width="800" height="225"></canvas>
<div id="chartjs-tooltip"></div>
<input id="corridor" value="SH28" type="hidden">
JavaScript
var selectedCorridor = $('#corridor').val();
console.log('Bridge:'+selectedCorridor);
var myLocation = [{name: "ITD Bridge Risk Assessment"}];
var tblName = "itd_" + selectedCorridor + "_data";
var usrName = "dchadney";
var myPath = "https://dchadney.cartodb.com/api/v2";
/* Variables */
var geoJsonLayer, c = new L.Control.Zoom({
position: 'topleft'
}),
lg = new L.layerGroup(),
overlg = new L.layerGroup(),
getJSON = {
abort: function () {
}
},
downloadURL = myPath,
ajaxrunning = false,
marker, hStyle = {
"stroke": true,
"color": "#cd0000",
"weight": 2,
"opacity": 1,
"fill": false,
"clickable": false
};
var bridge = [];
var bridgeID = [];
var approachImpact = [];
var health = [];
var enviro_cause_grab = [];
var chartering_info_grab = [];
var enviro_cause_grab = [];
$.support.cors = true;
// GRAB DATABASE VARS
var bridge = [];
var bridgeID = [];
var approachImpact = [];
var health = [];
var enviro_cause_grab = [];
var chartering_info_grab = [];
var enviro_cause_grab = [];
function DataPoint(id, age, milepost) {
this.id = id;
this.age = age;
this.milepost = milepost;
this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost;
}
DataPoint.prototype.toString = function () {
return this.id;
};
var bridgeDataPoints = [];
var sql_statement4 = "SELECT cartodb_id, bridge_id, bridge_health, miledate, bridge_age, milemarker, facility, total_project_cost FROM bridge_points_test WHERE facility IN ('" + selectedCorridor + "') ORDER BY bridge_id ASC&callback=?";
$.getJSON('https://dchadney.cartodb.com/api/v2/sql/?q=' + sql_statement4, function (data) {
// Graph 2 - Health Levels
var bridge_id_grab = [];
// var bridge_health_grab = [];
var bridge_age_grab = [];
// var bridge_mp_grab = [];
// var total_project_cost_grab = [];
...