Last active
June 24, 2018 00:33
-
-
Save mmcev106/c7d1f3df53c59bdeef49a0dde7554d74 to your computer and use it in GitHub Desktop.
API, jQuery, and Charts.js Example for Jeb
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
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" integrity="sha256-CfcERD4Ov4+lKbWbYqXD6aFM9M51gN4GUEtDhkWABMo=" crossorigin="anonymous"></script> | |
<canvas id="myChart"></canvas> | |
<script> | |
$.get( | |
'https://httpbin.org/json', | |
{ | |
// you can put any parameters here | |
}, | |
function(response){ | |
var labels = [] | |
var data = [] | |
response.slideshow.slides.forEach(function(slide){ | |
labels.push(slide.title) | |
var items = slide.items | |
if(!items){ | |
items = [] | |
} | |
data.push(items.length) | |
}) | |
var ctx = document.getElementById('myChart').getContext('2d') | |
var chart = new Chart(ctx, { | |
// The type of chart we want to create | |
type: 'bar', | |
// The data for our dataset | |
data: { | |
labels: labels, | |
datasets: [{ | |
label: "My First dataset", | |
backgroundColor: 'rgb(255, 99, 132)', | |
borderColor: 'rgb(255, 99, 132)', | |
data: data, | |
}] | |
} | |
}) | |
} | |
) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment