Skip to content

Instantly share code, notes, and snippets.

@ioanszabo

ioanszabo/index.html

Created September 8, 2017 07:13
Show Gist options
  • Save ioanszabo/2295b129f9cc2999a3dcc20a1b505513 to your computer and use it in GitHub Desktop.
Save ioanszabo/2295b129f9cc2999a3dcc20a1b505513 to your computer and use it in GitHub Desktop.
Download ZIP
// source http://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember-Charts Starter Kit" />
<meta charset="utf-8">
<title>Ember Charts Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.css">
<!-- Ember and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
<!-- Ember Charts and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
.chart-container {
height: 500px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2> Welcome to Ember Charts!</h2>
<p>Version 0.3.0</p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="chart-container">
{{time-series-chart
lineData=timeSeriesLineContent
}}
</div>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
// Used only for time series chart
timeSeriesLineContent: [
{
"time":new Date("2017-09-05T08:25:00.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:02.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:03.000Z"),
"value":8,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:04.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:10.000Z"),
"value":6,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:20.000Z"),
"value":13,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:30.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:40.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:50.000Z"),
"value":0,
"label":"Viteza"
}
]
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember-Charts Starter Kit" />
<meta charset="utf-8">
<title>Ember Charts Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.css">
<\!-- Ember and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"><\/script>
<\!-- Ember Charts and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"><\/script>
<script src="http://rawgit.com/Addepar/ember-charts/v0.3.0/dist/ember-charts.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2> Welcome to Ember Charts!</h2>
<p>Version 0.3.0</p>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<div class="chart-container">
{{time-series-chart
lineData=timeSeriesLineContent
}}
</div>
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
.chart-container {
height: 500px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
// Used only for time series chart
timeSeriesLineContent: [
{
"time":new Date("2017-09-05T08:25:00.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:02.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:03.000Z"),
"value":8,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:04.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:10.000Z"),
"value":6,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:20.000Z"),
"value":13,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:30.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:40.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:50.000Z"),
"value":0,
"label":"Viteza"
}
]
});</script></body>
</html>
Raw
jsbin.untitled.css
/* Put your CSS here */
html, body {
margin: 20px;
}
.chart-container {
height: 500px;
}
Raw
jsbin.untitled.js
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
// Used only for time series chart
timeSeriesLineContent: [
{
"time":new Date("2017-09-05T08:25:00.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:02.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:03.000Z"),
"value":8,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:04.000Z"),
"value":7,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:10.000Z"),
"value":6,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:20.000Z"),
"value":13,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:30.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:40.000Z"),
"value":0,
"label":"Viteza"
},
{
"time":new Date("2017-09-05T08:25:50.000Z"),
"value":0,
"label":"Viteza"
}
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment