Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/Index.html

Last active May 15, 2018 15:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oliverbth05/80a7f5a116286dea25cb7e2fcba6ba0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oliverbth05/80a7f5a116286dea25cb7e2fcba6ba0c to your computer and use it in GitHub Desktop.
Download ZIP
Line chart accepting JS Date object (Vue)
Raw
app.js
new Vue ({
el: "#app",
data: {
Entries: [],
amount: "",
date: "",
reference: ""
},
methods: {
pushEntry: function() {
var formData = {
date: new Date(), //Use new moment()
amount: this.amount,
reference: this.reference
}
this.Entries.push(formData);
this.amount = '';
this.date = '';
this.reference = '';
var speedCanvas = document.getElementById('lineChart').getContext('2d');
var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
}
};
var speedData = {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
datasets: [{
label: "Expenditure $",
data: this.weeklyExpenditure,
}]
};
var lineChart = new Chart(speedCanvas, {
type: 'line',
data: speedData,
options: chartOptions
});
}
},
computed: {
weeklyExpenditure: function(){
return [this.expMonday, this.expTuesday, this.expWednesday, this.expThursday, this.expFriday, this.expSaturday, this.expSunday]
},
expMonday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 1 && parseFloat(entry.amount)< 0){ //Use entry.date.moment().day//
expenditure -= entry.amount
}
})
return expenditure;
},
expTuesday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 2 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
},
expWednesday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() ==3 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
},
expThursday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 4 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
},
expFriday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 5 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
},
expSaturday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 6 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
},
expSunday: function(){
var expenditure = 0;
this.Entries.forEach(function(entry){
if(entry.date.getDay() == 7 && parseFloat(entry.amount)< 0){
expenditure -= entry.amount
}
})
return expenditure;
}
}
})
Raw
Index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div id = "app">
<canvas id = "lineChart"></canvas>
<div>
<label>Amount</label>
<input v-model = "amount">
<br>
<br>
<label>Reference</label>
<input v-model = "reference">
<br>
<button @click = "pushEntry">
Submit Data
</button>
</div>
<p>
{{weeklyExpenditure}}
</p>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment