Skip to content

Instantly share code, notes, and snippets.

@mmcev106
Last active June 24, 2018 00:33
Show Gist options
  • Save mmcev106/c7d1f3df53c59bdeef49a0dde7554d74 to your computer and use it in GitHub Desktop.
Save mmcev106/c7d1f3df53c59bdeef49a0dde7554d74 to your computer and use it in GitHub Desktop.
API, jQuery, and Charts.js Example for Jeb
<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