Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active January 26, 2017 11:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/ec50ed6b5a0cbd6351ea4f516d10562e to your computer and use it in GitHub Desktop.
Save nitaku/ec50ed6b5a0cbd6351ea4f516d10562e to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js bar chart
Raw
README.md

A very simplistic bar chart made with Vue.js.

Raw
index.coffee
app = new Vue
el: '#app'
data:
values: [10,20,30]
methods:
add_random_datapoint: () ->
@values.push Math.random()*300
Raw
index.css
body, html {
padding: 0;
margin: 0;
height: 100%;
}
svg {
width: 100%;
height: 100%;
background: white;
}
.bar {
fill: teal;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Bar Chart</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="add_random_datapoint">
Add
</button>
<svg>
<rect
class="bar"
v-for="(d, i) in values"
:x="i*10"
:y="300-d"
width="9"
:height="d"
/>
</svg>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 1.10.0
(function() {
var app;
app = new Vue({
el: '#app',
data: {
values: [10, 20, 30]
},
methods: {
add_random_datapoint: function() {
return this.values.push(Math.random() * 300);
}
}
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment