Skip to content

Instantly share code, notes, and snippets.

@codetricity

codetricity/chart-lesson-02.html

Last active February 6, 2018 03:49
Show Gist options
  • Save codetricity/002de6702a2cde1e9477182cc0d4347a to your computer and use it in GitHub Desktop.
Save codetricity/002de6702a2cde1e9477182cc0d4347a to your computer and use it in GitHub Desktop.
Download ZIP
Canvas.js Lesson #2
Raw
chart-lesson-02.html
<head>
<script src="Chart.js"></script>
<style>
canvas {
border: 1px;
border-color:black;
border-style: solid;
}
#navBar {
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<title> Stuffies!</title>
<h1 id="chartHeading"> Stuffie January 2017 Sales</h1>
<canvas id="myChart" width="440" height="440"></canvas>
<div id="navBar">
<button class="w3-button w3-aqua w3-round-large" onclick="janSales()">January</button>
<button class="w3-button w3-aqua w3-round-large" onclick="febSales()">February</button>
</div>
<script>
var context = document.getElementById("myChart").getContext('2d');
function janSales() {
var myChart = new Chart(context, {
type: 'bar',
data: {
labels: ["Palo Alto", "San Francisco", "Harajuku"],
datasets: [{
label: '# of Stuffies',
data: [60, 153, 383],
backgroundColor: [
'rgba(160, 66, 255, 0.2)',
'rgba(255, 66, 232, 0.2)',
'rgba(97, 66, 255, 0.2)'
]
}]
},
options: {
responsive: false
}
})
var chartHeading = document.getElementById('chartHeading');
chartHeading.innerHTML = "Stuffie January 2017 Sales";
}
function febSales() {
var myChart = new Chart(context, {
type: 'bar',
data: {
labels: ["Palo Alto", "San Francisco", "Harajuku"],
datasets: [{
label: '# of Stuffies',
data: [67, 213, 353],
backgroundColor: [
'rgba(160, 66, 255, 0.2)',
'rgba(255, 66, 232, 0.2)',
'rgba(97, 66, 255, 0.2)'
]
}]
},
options: {
responsive: false
}
})
var chartHeading = document.getElementById('chartHeading');
chartHeading.innerHTML = "Stuffie February 2017 Sales";
}
janSales();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment