-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #421 from freezingsaddles/c3-various
Remove all usage of google charts
- Loading branch information
Showing
16 changed files
with
736 additions
and
1,762 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,81 @@ | ||
| {% extends "base.html" %} | ||
| {% block head %} | ||
| <script type="text/javascript"> | ||
| google.charts.load("visualization", "1", {packages:["corechart"]}); | ||
| google.charts.setOnLoadCallback(drawChart); | ||
|
|
||
| // Callback that creates and populates a data table, | ||
| // instantiates the pie chart, passes in the data and | ||
| // draws it. | ||
|
|
||
| function drawChart() { | ||
|
|
||
| $.ajax({ | ||
| url: "/chartdata/indiv_elev_dist", | ||
| dataType: "json" | ||
| }).done(function(jsonData) { | ||
|
|
||
| // Create our data table out of JSON data loaded from server. | ||
| var data = new google.visualization.DataTable(jsonData); | ||
|
|
||
| // Instantiate and draw our chart, passing in some options. | ||
| var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); | ||
| var width = $('#chart_div').width(); | ||
| var options = { | ||
| title: 'Correlation between distance, elevation, and average speed.', | ||
| hAxis: {title: 'Distance'}, | ||
| vAxis: {title: 'Elevation'}, | ||
| height: 800, | ||
| width: width, | ||
| legend: {position: 'none'}, | ||
| bubble: {textStyle: {fontSize: 11}}, | ||
| chartArea: {left: 125, top: 50, width: width - 175, height: 700}, | ||
| }; | ||
|
|
||
|
|
||
| chart.draw(data, options); | ||
| }); | ||
| } | ||
|
|
||
| </script> | ||
| {% block foot %} | ||
| <link rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" | ||
| integrity="sha384-ztqQYuF0ztQOO26+6hbRTtSQ6HGLosUJRQI9kx0L9OpJiESTtsiriiQNqwBIBl9a" | ||
| crossorigin="anonymous"> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js" | ||
| integrity="sha384-Nth41CoN2s0hj2li43h7cs5a1J0zroMLa7ugSGFSdWJMF1OuKrJwZaritPHBnk3E" | ||
| crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js" | ||
| integrity="sha384-xOzJ6ocROuPNeY/PUgXyXgiPyvvePCiWVkKXro4Lb1gWoGJOtrJw+zrpf3NBx1B5" | ||
| crossorigin="anonymous"></script> | ||
| <script type="text/javascript"> | ||
| var pattern = ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']; | ||
| $(() => { | ||
| $.ajax({ | ||
| url: "/chartdata/indiv_elev_dist", | ||
| dataType: "json" | ||
| }).done(function (jsonData) { | ||
| c3.generate({ | ||
| bindto: '#chart_div', | ||
| data: { | ||
| type: 'scatter', | ||
| x: 'distance', | ||
| y: 'elevation', | ||
| columns: [ | ||
| ['distance', ...jsonData.distances], | ||
| ['elevation', ...jsonData.elevations], | ||
| ], | ||
| color: (a, {index}) => pattern[index % pattern.length], | ||
| }, | ||
| axis: { | ||
| x: { | ||
| label: 'Miles', | ||
| tick: { | ||
| fit: false, | ||
| format: d => d.toLocaleString(), | ||
| }, | ||
| }, | ||
| y: { | ||
| label: 'Feet', | ||
| padding: 20, | ||
| tick: { | ||
| format: d => d.toLocaleString(), | ||
| } | ||
| } | ||
| }, | ||
| point: { | ||
| r: ({index}) => jsonData.speeds[index], | ||
| }, | ||
| tooltip: { | ||
| contents: function ([{index}]) { | ||
| return "<table class='" + this.CLASS.tooltip + "'>" + | ||
| "<tr><th colspan='2'>" + jsonData.labels[index] + "</th></tr>" + | ||
| "<tr><td class='name'>distance</td><td class='value'>" + Math.round(jsonData.distances[index]).toLocaleString() + " mi</td></tr>" + | ||
| "<tr><td class='name'>elevation</td><td class='value'>" + Math.round(jsonData.elevations[index]).toLocaleString() + " feet</td></tr>" + | ||
| "<tr><td class='name'>speed</td><td class='value'>" + +jsonData.speeds[index]?.toFixed(1) + "mph</td></tr>" + | ||
| "</table>"; | ||
| } | ||
| }, | ||
| legend: { | ||
| show: false | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
| </script> | ||
| {% endblock %} | ||
| {% block content %} | ||
| <h1> | ||
| Individual Distance, Elevation, Speed | ||
| </h1> | ||
| <div class="text-center mt-3"> | ||
| <strong>Correlation between distance, elevation and average speed</strong> | ||
| </div> | ||
| <!--Div that will hold our leaderboard chart--> | ||
| <div id="chart_div" class="g-chart"> | ||
| <div id="chart_div" style="width:100%; aspect-ratio: 1.333"> | ||
| <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><style>.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33"/><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33"/><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33"/><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33"/><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33"/><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33"/><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33"/><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33"/><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33"/></svg> | ||
| Loading correlation chart... | ||
| Loading chart data... | ||
| </div> | ||
| {% endblock %} |
Oops, something went wrong.