Skip to content

Instantly share code, notes, and snippets.

@atonse

atonse/components.my-chart.js

Last active May 11, 2016 01:57
Show Gist options
  • Save atonse/515a0c6ba90e1d200075a38c68209adb to your computer and use it in GitHub Desktop.
Save atonse/515a0c6ba90e1d200075a38c68209adb to your computer and use it in GitHub Desktop.
Download ZIP
d3
Raw
components.my-chart.js
import Ember from 'ember';
export default Ember.Component.extend({
didRender() {
this._super(...arguments);
let svg = d3.select(this.$('.pipeline-view-container')[0]).append('svg');
let xScale = d3.time.scale()
.domain([new Date(), new Date()])
.range([0, 500])
.ticks(d3.time.day, 1);
let xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(5);
svg.append("g")
.attr('class', 'x axis')
.attr("transform", "translate(0,100)")
.call(xAxis);
}
});
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
Raw
templates.application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-chart}}
<br>
<br>
Raw
templates.components.my-chart.hbs
<h4 class="header-title m-t-0 m-b-20">Pipeline View</h4>
<div class="pipeline-view-container">
</div>
Raw
twiddle.json
{
"version": "0.8.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "release",
"ember-data": "2.5.2",
"ember-template-compiler": "release",
"d3": "https://d3js.org/d3.v3.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment