Last active
August 19, 2016 11:34
-
-
Save prudvi/e9f46df3cae455ba12e80ee8f5243795 to your computer and use it in GitHub Desktop.
nvd3 simple example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Component.extend({ | |
| didInsertElement() { | |
| nv.addGraph(function() { | |
| var chartdata = [{"key":"Apple","values": []}/*, {"key":"Microsoft","values": []}*/] | |
| var arrayInput = [], arrayInput2 = [], max = 600, min = 100; | |
| for (var x = 1990; x <= 2016; x++) { | |
| var a1 = [] , a2 = []; | |
| a1.push(x);a1.push((Math.random() * (max - min) + min).toFixed(0)); | |
| a2.push(x);a2.push((Math.random() * (max - min) + min).toFixed(0)); | |
| arrayInput.push(a1); | |
| arrayInput2.push(a2); | |
| } | |
| chartdata[0].values = arrayInput; | |
| //chartdata[1].values = arrayInput2; | |
| //nv.models.cumulativeLineChart() | |
| //nv.models.pieChart() | |
| //nv.models.linePlusBarChart() | |
| var chart = nv.models.lineChart() | |
| .x(function(d) { return d[0] }) | |
| .y(function(d) { return d[1]/100 }) | |
| .color(d3.scale.category10().range()) | |
| .useInteractiveGuideline(false) | |
| ; | |
| chart.xAxis.axisLabel("In years"); | |
| chart.yAxis.axisLabel("Utilization of Products"); | |
| d3.select('#chart svg') | |
| .datum(chartdata) | |
| .call(chart); | |
| //TODO: Figure out a good way to do this automatically | |
| nv.utils.windowResize(chart.update); | |
| return chart; | |
| }); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Controller.extend({ | |
| appName: 'Ember Twiddle' | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 12px 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12pt; | |
| } | |
| .nvd3 .nv-axis.nv-x path.domain { | |
| stroke-opacity: 1; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "0.10.4", | |
| "EmberENV": { | |
| "FEATURES": {} | |
| }, | |
| "options": { | |
| "use_pods": false, | |
| "enable-testing": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
| "ember": "2.7.0", | |
| "ember-data": "2.7.0", | |
| "ember-template-compiler": "2.7.0", | |
| "nvd3css": "https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css", | |
| "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js", | |
| "nvd3":"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.js" | |
| }, | |
| "addons": {} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment