Please provide a Hello World example #1
Comments
|
After several hours of trial & error, I managed to create a hello world example. index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/ember-charts.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember Charts</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{time-series-chart lineData=model}}
</script>
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember-1.1.2.js"></script>
<script src="js/libs/d3.v3.js"></script>
<script src="js/libs/lodash.js"></script>
<script src="js/libs/resize_handler.js"></script>
<script src="js/libs/style_bindings.js"></script>
<script src="js/libs/ember-charts.js"></script>
<script src="js/app.js"></script>
</body>
</html>app.js App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
{
"time": d3.time.format('%Y-%m-%d').parse("2013-05-01"),
"value": 40
},
{
"time": d3.time.format('%Y-%m-%d').parse("2013-05-02"),
"value": 80
},
{
"time": d3.time.format('%Y-%m-%d').parse("2013-05-03"),
"value": 120
}
];
}
}); |
|
Thanks to @BryanHunt for this basic example. I too am very excited about Ember Charts but am having a lot of trouble getting things to work due to the very sparse documentation. |
|
+1. Thanks @BryanHunt. A bower component would be ideal. I created a small hello world app along the same lines using Ember App Kit. Just in case anyone finds that helpful ember-charts-EAK. |
|
+1. This is quite helpful getting me started. Thanks! |
|
Can you jsBin this example? I'd do it but no computer right now |
|
By the way, now that I'm pulling ember-charts via bower, I'm finding the above js file "src" paths do not match how it's laid out in the most recent version (e.g. "dependencies/ember-addepar-mixins/resize_handler.js" instead of above). But otherwise, ember-charts is great! I've got it nicely working in my project and look forward to more developments. |
|
+1! Thank you very much, @BryanHunt! I was struggling today to get started with ember-charts, I had an existing project that I created with generator-ember. I used you sample code, and it worked perfectly. I am new to Emberjs and D3, and while enjoying working with both separately, I really needed some concrete examples to get going and work my way up. Good idea, @mukealicious, I think that ember-charts-EAK will be helpful. I was actually thinking of not using ember-charts because I could not get it to work, however with the help of each of you I was able to get it working. @bkCDL is correct, I am using bower as well. <script src="bower_components/ember-charts/dependencies/d3.v3.js"></script>
<script src="bower_components/ember-charts/dependencies/lodash.js"></script>
<script src="bower_components/ember-charts/dependencies/ember-addepar-mixins/resize_handler.js"></script>
<script src="bower_components/ember-charts/dependencies/ember-addepar-mixins/style_bindings.js"></script>
<script src="bower_components/ember-charts/dist/ember-charts.js"></script>Thanks, again, everyone! Update: Have anyone managed to get a Bar Chart with |
|
Thanks for the examples! I notice that the above example and the ember-charts-EAK both return static objects to model property of their routes. How would you adapt a promise from DS.store to be able to work with ember charts? For example, I have an array of datapoints with value and time properties, but the data store is returning ember record with the actual data wrapped up somewhere in a property that ember charts isn't accessing. How would I unwrap the object returned by store.find() to expose the core model that is an array of objects with time/value properties? <script type="text/x-handlebars" id="index"> {{time-series-chart lineData=model}} </script>App.IndexRoute = Ember.Route.extend({ App.Datapoint.FIXTURES = [ |
|
+1 |
|
+2! |
|
I've started using https://github.com/Glavin001/ember-c3 and https://github.com/Glavin001/ember-nvd3 where applicable. Both provide installation and usage instructions as well as a pre-built Ember application with source code and live demo on GitHub pages. |
|
Those look great @Glavin001 thanks for the update! |
|
Thanks @Glavin001 |
|
I've put together a JS Bin starter kit to serve as a hello world app. You can find it in the README, where we'll post updated versions; the current version for v0.1.0 is http://emberjs.jsbin.com/yufab/1/edit. Hope this helps! @ansorensen or others wondering about using ember-charts with promises: please open a new issue or post a stack overflow question, and we'll try to gather some suggestions. Thanks for your patience everyone. We'll be working on better docs as soon as we get the chance. |
|
What is the correct way to write fixtures for ember-charts? I tried several solution, like: { none of them throws any error, but the chartsreact like it doesn't recognize the right data. Could you please write a functional example on how to use fixtures and models as well? |
|
@jeanlouocean Could you please open a new issue or stack overflow question? I'll definitely forget about it here since this one is marked as closed. If you're able to include more information about how you've set up your app, that will be useful as well. Our working JS Bin Starter Kit uses data like what you've pasted above, so any bugs you're seeing are likely due to how your fixtures are defined rather than the data itself. |
Ember Charts looks way cool, but I'm finding the project overly complicated and the documentation overly lacking. Could you please provide a hello world example that displays a simple chart with some data and nothing else? Please no fancy build systems, no coffee script, etc. Just raw EmberJS like you see in the EmberJS guides.
The text was updated successfully, but these errors were encountered: