Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/app.css

Created May 9, 2018 15:01
Show Gist options
  • Save oliverbth05/8db64a78b036a8dd8b9b4993404ecc5f to your computer and use it in GitHub Desktop.
Save oliverbth05/8db64a78b036a8dd8b9b4993404ecc5f to your computer and use it in GitHub Desktop.
Download ZIP
Real-Time Bar chart with data input (Vue)
Raw
app.css
#app{
margin: auto;
width: 40%;
text-align: center;
border: 1px solid grey;
padding: 10px;
margin-top: 50px;
}
Raw
app.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<canvas id="bar-chart" width="800" height="450"></canvas>
<div id = "app">
<input v-model = "amount" required>
<br>
<br>
<select v-model = "reference" required>
<option value = "Petty">Category 1</option>
<option value = "Education">Category 2</option>
<option value = "Amazon">Category 3</option>
</select>
<br>
<br>
<button @click = "pushEntry">
Add Data
</button>
</div>
</body>
Raw
app.js
var vm1 = new Vue({
el: "#app",
data: {
amount: '',
reference: "",
petty:[],
education:[],
amazon:[]
},
methods:{
pushEntry: function(){
//Validate Fields
if(this.amount && this.reference){
if(this.reference == "Petty"){
this.petty.push(parseFloat(this.amount));
this.amount = "";
this.reference = "";
} else if(this.reference == "Education"){
this.education.push(parseFloat(this.amount));
this.amount = "";
this.reference = "";
}else if(this.reference == "Amazon"){
this.amazon.push(parseFloat(this.amount));
this.amount = "";
this.reference = "";
}
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Category 1", "Category 2", "Category 3"],
datasets: [
{
label: "Expenditure ($)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [vm1.sumPetty,vm1.sumEducation,vm1.sumAmazon]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: "Expenditure ($)"
}
}
});
} else {alert("Empty Fields")}
}
},
computed:{
sumPetty: function(){
var sum = 0;
for (var i = 0; i < this.petty.length; i++) {
sum += this.petty[i]
}
return sum;
},
sumEducation: function(){
var sum = 0;
for (var i = 0; i < this.education.length; i++) {
sum += this.education[i]
}
return sum;
},
sumAmazon: function(){
var sum = 0;
for (var i = 0; i < this.amazon.length; i++) {
sum += this.amazon[i]
}
return sum;
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment