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.
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();
I tried to get a small AnyChart chart working but have some problems with my data setup.
What I want to have is a way for users to filter data. Therefor, I have to provide all information necessary for filtering within the data set. In the chart, only top level category is used and should display a summarized value of all rows that the filter applies to.
Here comes the code:
<html>
<body>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<select id='depFilter'><option value='*'>All</option><option value='Development'>Development</option><option value='Accounting'>Accounting</option><option value='Sales'>Sales</option></select><br>
<select id='genderFilter'><option value='*'>All</option><option value='female'>female</option><option value='male'>male</option></select><br>
<button onClick='filterChart()'>Filter</button><br>
<div id="container"></div>
<script language='JavaScript'>
anychart.onDocumentReady(function() {
// create line chart
var dataSet = anychart.data.set([
["US", "Development", "male", 20],
["US", "Development", "female", 3],
["US", "Accounting", "male", 1],
["US", "Accounting", "female", 4],
["US", "Sales", "male", 15],
["US", "Sales", "female", 16],
["CA", "Development", "male", 12],
["CA", "Development", "female", 25],
["CA", "Accounting", "male", 1],
["CA", "Accounting", "female", 8],
["CA", "Sales", "male", 30],
["CA", "Sales", "female", 18],
]);
chart = anychart.column();
baseMapping = dataSet.mapAs({'x': 0, 'dep': 1, 'gender': 2, 'value': 3});
series = chart.column();
filterChart();
chart.container('container');
chart.draw();
});
function filterChart() {
var filteredMapping = baseMapping.filter("dep", function(value) { return document.getElementById("depFilter").value == '*' || value == document.getElementById("depFilter").value; });
filteredMapping = filteredMapping.filter("gender", function(value) { return document.getElementById("genderFilter").value == '*' || value == document.getElementById("genderFilter").value; });
series.data(filteredMapping);
}
</script>
As you can see, for each country there are filters for department and gender. Value is the number of employees.
By now, the chart only displays the last recent data point for each region. What it should do is to display sum of all employees the filter applies to.
Example:
- when filtering for female accountants it should be 4 at US and 8 at CA
- when filtering only for accountants it should be 5 for US and 9 for CA
xMode() function didn't do the job as it doesn't summarize but only overlay.
Is there a way to get this working in AnyChart?
Thanks in advance and sorry if this question already has been answered, I didn't find a suitable answer when trying to search for it.
The Cartesian chart doesn't apply any aggregations to user's data. If there are several values for the same category (US or CA), the chart will show the latest value. The latest value overrides the previous ones.
To meet your requirements you should preprocess data before applying to the chart. It means that in filter function you should create new data set that includes aggregated values according to filtering conditions. For example, you want to show the total number of employees in "development". Then you should sum "male" and "female" of "development" in US and CA. Then resulting data set should look like this:
var dataSet = anychart.data.set([
["US", 23],
["CA", 37]
]);
And then apply this new data set to the chart. It can be done inside the filter function.
Can anyone figure out why the legend is undefined?
here is a plunker https://plnkr.co/edit/uSbRpx5w7nHvGQ3OG3x2?p=preview
here is the code
$scope.chartData = {
data: [20, 20, 20, 20, 20, 20, 20],
labels: [
"Joe",
"Jason",
"Mark",
"Mike",
"Ryan",
"Sean",
"Stephanie"
],
series: ['Year 2016',]
};
i have made 2 examples. the top one works, the one below it doesn't
Any idea?
In charts the data-set must be an array of data, where the data in-turn is itself an array
i.e)data-set: [data_1, data_2, data_3], where data_1=[1,2,3,4,5]; data_2=[45,32,12,25,12];..
And the series represents the corresponds the data.
But here in your case the data-set is an array of numbers, which is why the legend becomes undefined.
$scope.chartData = {
data: [[20, 20, 20, 20, 20, 20, 20]],
labels: [
"Joe",
"Jason",
"Mark",
"Mike",
"Ryan",
"Sean",
"Stephanie"
],
series: ['Year 2016' ]
};
i am beginner in angular and chartjs. I want to load same data file in different chart. so i create a json file. and i want to load it my chart.
My code is like below
external_data.json
[{
"data": "[13, 22, 30, 40, 50]",
"label": "Africa",
"borderColor": "#3e95cd",
"fill": "false"
}, {
"data": "[47, 14, 37, 67, 80]",
"label": "Asia",
"borderColor": "#8e5ea2",
"fill": "false"
}]
line-chart.component.ts
var ctx = document.getElementById("line-chart");
new Chart(ctx, {
type: 'line',
data: {
labels: [1850, 1900, 1950, 2000, 2050],
datasets: // i want get json here
}
});
this is folder structure
Juse mention the path as follows,
loaddata() {
this.Items = this.http.get("../data/external_data.json")
.map(res => res.json());
}
and assign this.Items to your array
Is there any angularjs library that can draw a chart with stacked bars + lines? Like this:
I'm looking for any library that supports this, with angular directives. I've found angular-nvd3-directives, that supports multicharts (combined chart types), but I don't think it supports bar stacking, only grouping.
I know that these questions are not well suited to SO, I'm looking for ANY, ONE, lib, not recommendations. (also it has to be free for commercial use)
The ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.
Here's what your JS would look like:
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myJson = {
"type": "mixed",
"background-color": "white",
"plot": {
"stacked": true
},
"series": [{
"type": "bar",
"values": [25, 30, 15, 20, 25],
"stack": 1,
"background-color": "#4372c1",
"hover-state": {
"visible": false
},
}, {
"type": "bar",
"values": [20, 10, 30, 25, 15],
"stack": 1,
"background-color": "#ea4204",
"hover-state": {
"visible": false
},
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
}
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
},
},]
};
});
angular-nvd3 supports this.
All you have to do is set bars1.stacked=true and bars2.stacked=true
http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview
$scope.options = {
chart: {
type: 'multiChart',
...
bars1: {stacked:true},
bars2: {stacked:true},
...
};
}
}