When I tried to use the angular-chart framework I can see the series I've defined, but not the labels and data. I've included following three files to my index.html
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
These are the variables I define in my $scope
$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
[12, 13, 8, 4, 29],
[6, 12, 9, 8, 25]
];
And it only displays this:
What am I doing wrong?
EDIT: After further investigation I noticed that the graph is showing when I did a back -> forward when on the page. So by refreshing you lose the chart...
I can manage to draw the chart after refresh by deferring the scope variables like this:
setTimeout(function (){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}, 0);
This implies a timing issue, which I'm unable to resolve.
Is your chart in an element / hierarchy that is hidden / shown (like ng-show or a class that is swapped out, a bootstrap panel...)?
What seems to be happening is that Chart.js is getting the height of the canvas (when it is initializes by angular-chart, which in turn happens when the scope data is changed) as near 0.
For the same reason, a deferred variable change works - because whatever parent / style is causing the canvas to have a small height is now at it's full height.
Related
I'm using mongo 3.6. I have a DB with a field named date of type Date, and I want to return all my documents ($find) between two specific dates.
The problem is that I have to compose these queries in Flutter/Dart, so I cannot use ISODATE() to parse my dates because (to my knowledge) there's no such function, although I do have tried .toIso8601String with no luck.
Everything I try leads to and empty response (no documents returned, but no error also).
Things that I've tried:
{"date": {"$gte": "2018-08-23T09:34:32.000Z"}}
{"date": {"$gte": [{ "$dateFromString": { "dateString": "$date" }}, "2018-08-23T09:34:32.000Z"]}}
{"date": {"$gte": {"$date":"2018-08-23T09:34:32.000Z"}}}
{"date": {"$gte": {"$date":"2018-08-23 09:34:32.000"}}}
And many more.
Please, does anyone know how to solve this?
Thanks in advance
You might using mongo_dart package and see its repository (specially the method testDateTime). Then you could do something as:
var collectionName = 'users';
var collection = db.collection(collectionName);
await collection.insertAll([
{ 'name': 'John', 'birthday_date': DateTime.utc(2018, 8, 23, 12, 00, 00) },
{ 'name': 'Alice', 'birthday_date': DateTime.utc(2018, 8, 23, 10, 43, 24) },
{ 'name': 'Jim', 'birthday_date': DateTime.utc(2018, 8, 23, 8, 30, 0) }
]);
var result = await collection
.find(where.gte('birthday_date', DateTime.utc(2018, 8, 23, 9, 34, 32)))
.toList();
<html>
<head>
<script src="../../../../Scripts/angular.min.js"></script>
<script src="../../../../Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body ng-app="myApp">
<div style="height:500px; width:800px" ng-controller="BarChartCtrl">
<h2>BarChart example</h2>
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>
<script>
var app=angular.module('myApp', ['chart.js']);
app.controller('BarChartCtrl', function ($scope) {
$scope.labels = ['2014','2015','2016'];
$scope.series = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
$scope.data = [
[65, 59, 80],
[28, 48, 40],
[30, 0, 0],
[44, 10, 0],
[50, 0, 40],
[66, 50, 0],
[70, 0, 0],
[88, 0, 70],
[90, 30, 0],
[10, 0, 60],
[11, 20, 0],
[12, 0, 90]
];
});
In the above code Y-axis values are Numbers and I want to change it to some string in arranged manner so that I can pass the "range" string from $scope.data
You can map your array to a desired string array, like this:
$scope.rangeArray = $scope.data.map(function(item) {
return {
Item.join(",") // join the nested array values to a string separated with a comma for example
}
});
Each item in the map function is a nested array in your data array. In our example you get a rangeArray with nested string arrays.
In AngularJs-Charts we can't able to change Y-axis Integer Values to String Values for Range but in other charts we can able to modify by just appending $ or any such kind of symbols.
var foo = [ [ 14, 31, 55, 56, 60, 19 ], [30, 32, 33, 50, 64, 6 ], [9, 15, 22, 35, 48, 3] ];
var bar = await Model.find({
numbers: { $in: foo }
});
console.log(bar);
When I try to run the above code above I get the error below. The model is a mongoose model and the query runs with no problems in a raw mongodb query using robomongo.
{ [CastError: Cast to number failed for value "14,31,55,56,60,19" at path "numbers"]
message: 'Cast to number failed for value "14,31,55,56,60,19" at path "numbers"',
name: 'CastError',
kind: 'number',
value: [ 14, 31, 55, 56, 60, 19 ],
path: 'numbers',
reason: undefined }
You're passing foo, which is an array of arrays to Mongoose with a property which is expecting a Number value, thus Mongoose is complaining to you when it does it's validation by saying that an array is not a number.
I am building an application where it gets the data from facebook api and the graph is generated using the HighCharts.
The graph is generated successfuly, but the date i get is in the time stamp format. How can i convert it to the actual date format.
Here is the code:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
Data:
series: [{"data": [["2015-11-15T08:00:00+0000", 55], ["2015-11-16T08:00:00+0000", 45], ["2015-11-17T08:00:00+0000", 32], ["2015-11-18T08:00:00+0000", 54], ["2015-11-19T08:00:00+0000", 34], ["2015-11-20T08:00:00+0000", 1]], "name": "page_views"}, {"data": [["2015-11-15T08:00:00+0000", 23], ["2015-11-16T08:00:00+0000", 67], ["2015-11-17T08:00:00+0000", 54], ["2015-11-18T08:00:00+0000", 23], ["2015-11-19T08:00:00+0000", 64], ["2015-11-20T08:00:00+0000", 23]], "name": "page_stories"}, {"data": [["2015-11-15T08:00:00+0000", 23], ["2015-11-16T08:00:00+0000", 64], ["2015-11-17T08:00:00+0000", 34], ["2015-11-18T08:00:00+0000", 32], ["2015-11-19T08:00:00+0000", 43], ["2015-11-20T08:00:00+0000", 43]], "name": "page_fan_adds"}]
Here is the application in JSFiddle
I am not sure if we can fetch the date in any format from facebook API.
I had in the past converted the date in my code once i retrieve the same.
Below is what i had implemented with VB.NET.
DateVariable.ToString().Substring(0, 10)).ToString("dd MMM yyyy")
Hope this helps you.
I use angular-chart.js and whenever I draw a chart (any type such as bar or line) I am seeing that the first data set's graph color is gray. I made sure the color is randomized before it is drawn...
Here is the controller.js:
.controller('chartController', function($scope){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 51, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.colours = [{
fillColor:"rgba(220,220,220,0.4)",
strokeColor:"rgba(220,220,220,0.2)",
highlightFill:"rgba(220,220,220,0.5)",
highlightStroke:"rgba(220,220,220,0.1)"
}];
})
Below is the actual output:
With this
$scope.colours = [{
fillColor:"rgba(220,220,220,0.4)",
strokeColor:"rgba(220,220,220,0.2)",
highlightFill:"rgba(220,220,220,0.5)",
highlightStroke:"rgba(220,220,220,0.1)"
}];
you are passing angular-chart one colorset. Since your have 2 datasets in your chart, angular-chart will use this colorset (i.e. gray) for the 1st dataset and for the 2nd dataset it will generate a random colour.
If you want random (randomized at each redraw) colours for both datasets do this
$scope.colours = [];
If you want fixed colours for both, pass it an array of 2 colorsets (instead of 1). If you want to use the global default, just set it to null
$scope.colours = null;