I'm absolutely beginner in AngularJS. So, I'll be really appreciate for any help. I'm trying to build an app with charts in it using Ionic and Angular-nvD3 lineChart. I have data in json file. So, I've made factory and used getData(), $scope and service. I need one line chart with many data points on it. But output looks like every point is separate from another. I thought maybe it's because of $scope and getData function. Maybe there is some kind of loop in it, which separate data. I am trying to rewrite code to fix the problem, extract data from scope within the factory to another scope for separating this processes, but without any luck. My code in app.js below
(function() {
var app = angular.module('starter', ['ionic','nvd3']);
app.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get('chart.json');
};
return object;
}]);
app.controller('MainCtrl', ['$scope', 'services', function($scope, services) {
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data, function(prod) {
var sin = [];
sin.push({
x: prod.Date,
y: prod.low
});
return {
values: sin,
key: 'fff'
}
});
});
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
lines: {
xScale: d3.time.scale(),
},
x: function(d){ return d3.time.format('%Y-%m-%d').parse(d.x); },
y: function(d){ return d.y; },
useInteractiveGuideline: true,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
axisLabel: 'Time (ms)',
tickFormat: function(d){
return d3.time.format('%d-%m-%Y')(d);
},
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -10
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
},
subtitle: {
enable: true,
text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
css: {
'text-align': 'center',
'margin': '10px 13px 0px 7px'
}
},
caption: {
enable: true,
html: '<b>Figure 1.</b> Lorem ipsum dolor sit amet, at eam blandit sadipscing, <span style="text-decoration: underline;">vim adhuc sanctus disputando ex</span>, cu usu affert alienum urbanitas. <i>Cum in purto erat, mea ne nominavi persecuti reformidans.</i> Docendi blandit abhorreant ea has, minim tantas alterum pro eu. <span style="color: darkred;">Exerci graeci ad vix, elit tacimates ea duo</span>. Id mel eruditi fuisset. Stet vidit patrioque in pro, eum ex veri verterem abhorreant, id unum oportere intellegam nec<sup>[1, <a href="https://github.com/krispo/angular-nvd3" target="_blank">2</a>, 3]</sup>.',
css: {
'text-align': 'justify',
'margin': '10px 13px 0px 7px'
}
}
};
}]);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
And this is data in JSON file
[
{
"Date": "2011-12-02",
"low": 8758.22466765
},
{
"Date": "2011-12-03",
"low": 8771.50964703
},
{
"Date": "2011-12-04",
"low": 8784.79462641
},
{
"Date": "2011-12-05",
"low": 8798.07960579
},
{
"Date": "2011-12-06",
"low": 8689.04458518
},
{
"Date": "2011-12-07",
"low": 8720.07956456
},
{
"Date": "2011-12-08",
"low": 8718.97454394
},
{
"Date": "2011-12-09",
"low": 8584.72952332
},
{
"Date": "2011-12-10",
"low": 8616.084502700001
},
{
"Date": "2011-12-11",
"low": 8647.43948208
},
{
"Date": "2011-12-12",
"low": 8678.79446147
},
{
"Date": "2011-12-13",
"low": 8552.15944085
},
{
"Date": "2011-12-14",
"low": 8507.64442023
},
{
"Date": "2011-12-15",
"low": 8383.43939961
},
{
"Date": "2011-12-16",
"low": 8388.08437899
},
{
"Date": "2011-12-17",
"low": 8336.42602504
},
{
"Date": "2011-12-18",
"low": 8284.76767109
},
{
"Date": "2011-12-19",
"low": 8233.10931714
},
{
"Date": "2011-12-20",
"low": 8266.49429652
},
{
"Date": "2011-12-21",
"low": 8377.569275900001
},
{
"Date": "2011-12-22",
"low": 8308.55425529
},
{
"Date": "2011-12-23",
"low": 8319.82173467
},
{
"Date": "2011-12-24",
"low": 8331.08921405
},
{
"Date": "2011-12-25",
"low": 8342.35669343
},
{
"Date": "2011-12-26",
"low": 8353.62417281
}
]
I'm trying something like that:
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data);
});
$scope.selectedSin = function(prod) {
var sin = [];
angular.forEach(data, function (sin) {
sin.push({
x: data.Date,
y: data.low
});
return {
values: sin,
key: 'fff'
}
});
};
But have an error in console:
e.values is undefined
I've found the great answer here in comments in Plunker: Load JSON Data into Angular-nvD3 Graph (AngularJS) I've just changed name of chart to lineChart and ID and STOCK to mine. Plunker
services.getData().then(function successCb(data) {
$scope.barData = [];
var stock = {
key: 'Product stock',
values: []
};
stock.values = _.map(data.data, function(prod) {
return {
label: prod.Date,
value: prod.low
};
});
console.log(stock);
$scope.barData.push(stock);
});