eCharts -- Simple stacked line chart not showing data - javascript

I am new to eCharts and I am trying to get a stacked line chart to work. The tooltip shows the data correctly, but there is no y-axis scale and no lines or area fills. If I remove the "stack: 'a'" options from the 'series' section, a non-stacked version of the chart renders correctly. My options and data are as follows:
var myChart = echarts.init(document.getElementById('main'));
var option = {
"animation": false,
"legend": {
"show": true,
"top": "middle",
"left": "right",
"orient": "vertical"
},
"title": {
"text": "Total Raised by Type, Month and Year",
"left": "center"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
}
},
"dataset": {
"source": [
[
null,
"Gifts",
"In Kind",
"Pledges"
],
[
"Jul 2017",
"2508",
"1",
"2594"
],
[
"Aug 2017",
"3512",
"2",
"3631"
],
[
"Sep 2017",
"7625",
"4",
"7885"
],
[
"Oct 2017",
"8026",
"4",
"8300"
],
[
"Nov 2017",
"9431",
"5",
"9753"
],
[
"Dec 2017",
"15050",
"8",
"15563"
],
[
"Jan 2018",
"9030",
"5",
"9338"
],
[
"Feb 2018",
"7525",
"4",
"7781"
],
[
"Mar 2018",
"6020",
"3",
"6225"
],
[
"Apr 2018",
"8528",
"4",
"8819"
],
[
"May 2018",
"13043",
"7",
"13488"
],
[
"Jun 2018",
"10033",
"5",
"10375"
],
[
"Jul 2018",
"4311",
"4",
"2159"
],
[
"Aug 2018",
"6036",
"5",
"3022"
],
[
"Sep 2018",
"13106",
"11",
"6563"
],
[
"Oct 2018",
"13796",
"12",
"6908"
],
[
"Nov 2018",
"16210",
"14",
"8117"
],
[
"Dec 2018",
"25867",
"23",
"12953"
],
[
"Jan 2019",
"15520",
"14",
"7772"
],
[
"Feb 2019",
"12934",
"11",
"6477"
],
[
"Mar 2019",
"10347",
"9",
"5181"
],
[
"Apr 2019",
"14658",
"13",
"7340"
],
[
"May 2019",
"22418",
"20",
"11226"
],
[
"Jun 2019",
"17245",
"15",
"8636"
],
[
"Jul 2019",
"1847",
"2",
"1696"
],
[
"Aug 2019",
"2586",
"3",
"2374"
],
[
"Sep 2019",
"5616",
"6",
"5155"
],
[
"Oct 2019",
"5911",
"6",
"5426"
],
[
"Nov 2019",
"6946",
"7",
"6375"
],
[
"Dec 2019",
"11084",
"11",
"10173"
],
[
"Jan 2020",
"6650",
"7",
"6104"
],
[
"Feb 2020",
"5542",
"6",
"5087"
],
[
"Mar 2020",
"4433",
"5",
"4069"
],
[
"Apr 2020",
"6281",
"6",
"5765"
],
[
"May 2020",
"9606",
"10",
"8817"
],
[
"Jun 2020",
"7389",
"8",
"6782"
]
]
},
"xAxis": {
"type": "category",
"axisLabel": {
"rotate": 90
}
},
"yAxis": [
{
"type": "value",
"axisLabel": {
"formatter": "${value}"
}
}
],
"series": [
{
"type": "line",
"areaStyle": {},
"stack": "a"
},
{
"type": "line",
"areaStyle": {},
"stack": "a"
},
{
"type": "line",
"areaStyle": {},
"stack": "a"
}
]
};
myChart.setOption(option);
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I've been able to get every other chart type I need to work as expected except this one. What am I missing?


Don't use null as name for your first dimension but some arbitrary string like 'date':
"source": [
[
"date",
"Gifts",
"In Kind",
"Pledges"
], [...]

Related

SyntaxError when attempting to run .js script in MongoDB

I expect this is a relatively simple question, but I've been digging around and haven't been able to find a solution as of yet. I am learning MongoDB/NoSQL recently and have a .js file that I'm attempting to run via command line, ex:
mongo < myscript.js
But unfortunately, I am receiving syntax errors (uncaught exception: SyntaxError: unexpected token: identifier :) instead of successful output in the terminal. I am doing some basic .insert(), .update(), and then subsequent .find() and .aggregate() to display that data. Is there some syntax or formatting that I need to adjust when using my code as a script? Running the code in segments inside of the Mongo Shell yields positive results everything runs successfully. Here is my .js code:
db = db.getSiblingDB('PurpleBoxDVD');
db.RentalCollection.insertMany(
[
{
"_id": "0000001",
"userID": "PB0000001",
"userFirstName" : "Drew",
"userLastName": "Weidman",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "What was the name of your first pet?",
"Answer1": "Tim"
},
{
"Question2": "What elementary school did you attend?",
"Answer2": "Desert Hills"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "3",
"movieType": "B",
"title": "True Grit",
"actor":
[
{
"actor1FirstName": "John",
"actor1LastName": "Wayne"
},
{
"actor2FirstName": "Glen",
"actor2LastName": "Campbell"
}
],
"directorFirstName": "Henry",
"directorLastName": "Hathaway",
"genre": ["Adventure","Drama","Western"],
"keyword": ["Rooster Cogburn","US Marshal","Oscar Award Winner"]
},
{
"_id": "0000002",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "1",
"movieType": "D",
"title": "The Sons of Katie Elder",
"actor":
[
{
"actor1FirstName": "John",
"actor1LastName": "Wayne"
},
{
"actor2FirstName": "Dean",
"actor2LastName": "Martin"
}
],
"directorFirstName": "Henry",
"directorLastName": "Hathaway",
"genre": ["Western"],
"keyword": ["Gun Fighter","Family"]
},
{
"_id": "0000003",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "1",
"movieType": "D",
"title": "The Avengers",
"actor":
[
{
"actor1FirstName": "Robert",
"actor1LastName": "Downey Jr"
},
{
"actor2FirstName": "Chris",
"actor2LastName": "Evans"
}
],
"directorFirstName": "Joss",
"directorLastName": "Whedon",
"genre": ["Adventure","Action","Sci-Fi"],
"keyword": ["Captain America","Iron Man","Thor"]
},
{
"_id": "0000004",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "1",
"movieType": "D",
"title": "Greatest Showman",
"actor":
[
{
"actor1FirstName": "Hugh",
"actor1LastName": "Jackman"
},
{
"actor2FirstName": "Michelle",
"actor2LastName": "Williams"
}
],
"directorFirstName": "Michael",
"directorLastName": "Gracey",
"genre": ["Drama","Biography","Musical"],
"keyword": ["Circus","Barnum","Singing","Million Dreams"]
},
{
"_id": "0000005",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "1",
"movieType": "D",
"title": "Star Wars: Episode IV - New Hope",
"actor":
[
{
"actor1FirstName": "Mark",
"actor1LastName": "Hamill"
},
{
"actor2FirstName": "Carrie",
"actor2LastName": "Fisher"
}
],
"directorFirstName": "George",
"directorLastName": "Lucas",
"genre": ["Fantasy","Adventure","Action"],
"keyword": ["Jedi Knight","Darth Vader","Yoda"]
},
{
"_id": "0000006",
"userID": "PB0000021",
"userFirstName" : "Spencer",
"userLastName": "Hilton",
"userPhoneNumber": "9999999999",
"userPhoneNumber2": "9999999999",
"userType": "N",
"customerType": "P",
"banStatus": "N",
"password": "CSRocks!",
"question":
[
{
"Question1": "What was your first phone number?",
"Answer1": "9999999999"
},
{
"Question2": "What is your mothers maiden name?",
"Answer2": "Johnson"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "3",
"movieType": "B",
"title": "Deadpool",
"actor":
[
{
"actor1FirstName": "Ryan",
"actor1LastName": "Reynolds"
},
{
"actor2FirstName": "Morena",
"actor2LastName": "Baccarin"
}
],
"directorFirstName": "Tim",
"directorLastName": "Miller",
"genre": ["Adventure","Action","Comedy"],
"keyword": ["Mercinary","Morbid","Healing Power"]
},
{
"_id": "0000007",
"userID": "PB0000027",
"userFirstName" : "Josh",
"userLastName": "Jensen",
"userPhoneNumber": "9999999999",
"userPhoneNumber2": "9999999999",
"userType": "N",
"customerType": "S",
"banStatus": "N",
"password": "AndroidIsKing",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Josh Jensen"
},
{
"Question2": "What was your first phone number?",
"Answer2": "8016429755"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "1",
"movieType": "D",
"title": "X-Men",
"actor":
[
{
"actor1FirstName": "Hugh",
"actor1LastName": "Jackman"
},
{
"actor2FirstName": "Patrick",
"actor2LastName": "Stewart"
}
],
"directorFirstName": "Bryan",
"directorLastName": "Singer",
"genre": ["Adventure","Action","Sci-Fi"],
"keyword": ["Wolverine","Mutants"]
},
{
"_id": "0000008",
"userID": "PB0000101",
"userFirstName" : "Waldo",
"userLastName": "Wildcat",
"userPhoneNumber": "9999999999",
"userPhoneNumber2": "9999999999",
"userType": "N",
"customerType": "S",
"banStatus": "N",
"password": "GoWildcats!",
"question":
[
{
"Question1": "What was the name of your first pet?",
"Answer1": "Thunderbird"
},
{
"Question2": "What elementary school did you attend?",
"Answer2": "Bonneville"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "4",
"movieType": "B",
"title": "The Avengers",
"actor":
[
{
"actor1FirstName": "Robert",
"actor1LastName": "Downey Jr"
},
{
"actor2FirstName": "Chris",
"actor2LastName": "Evans"
}
],
"directorFirstName": "Joss",
"directorLastName": "Whedon",
"genre": ["Adventure","Action","Sci-Fi"],
"keyword": ["Captain America","Iron Man","Thor"]
},
{
"_id": "0000009",
"userID": "PB0000101",
"userFirstName" : "Waldo",
"userLastName": "Wildcat",
"userPhoneNumber": "9999999999",
"userPhoneNumber2": "9999999999",
"userType": "N",
"customerType": "S",
"banStatus": "N",
"password": "GoWildcats!",
"question":
[
{
"Question1": "What was the name of your first pet?",
"Answer1": "Thunderbird"
},
{
"Question2": "What elementary school did you attend?",
"Answer2": "Bonneville"
}
],
"rentalDate": "Jun 28 2020",
"returnDate": "null",
"dueDate": "Jul 01 2020",
"copyNumber": "3",
"movieType": "B",
"title": "Incredibles 2",
"actor":
[
{
"actor1FirstName": "Craig T",
"actor1LastName": "Nelson"
},
{
"actor2FirstName": "Holly",
"actor2LastName": "Hunter"
}
],
"directorFirstName": "Brad",
"directorLastName": "Bird",
"genre": ["Adventure","Action","Animation"],
"keyword": ["Elastigirl","Dash","Jack Jack"]
}
]
);
db.RentalCollection.insertMany(
[
{
"_id": "0000010",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Aug 1 2020",
"returnDate": "null",
"dueDate": "Aug 4 2020",
"copyNumber": "1",
"movieType": "D",
"title": "Deadpool",
"actor":
[
{
"actor1FirstName": "Ryan",
"actor1LastName": "Reynolds"
},
{
"actor2FirstName": "Morena",
"actor2LastName": "Baccarin"
}
],
"directorFirstName": "Tim",
"directorLastName": "Miller",
"genre": ["Adventure","Action","Comedy"],
"keyword": ["Mercinary","Morbid","Healing Power"]
},
{
"_id": "0000011",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Aug 1 2020",
"returnDate": "null",
"dueDate": "Aug 4 2020",
"copyNumber": "1",
"movieType": "D",
"title": "Incredibles 2",
"actor":
[
{
"actor1FirstName": "Craig T",
"actor1LastName": "Nelson"
},
{
"actor2FirstName": "Holly",
"actor2LastName": "Hunter"
}
],
"directorFirstName": "Brad",
"directorLastName": "Bird",
"genre": ["Adventure","Action","Animation"],
"keyword": ["Elastigirl","Dash","Jack Jack"]
},
{
"_id": "0000012",
"userID": "PB0000002",
"userFirstName" : "Kolten",
"userLastName": "Nay",
"userPhoneNumber": "9999999999",
"userType": "A",
"customerType": "P",
"banStatus": "N",
"password": "SQLRules",
"question":
[
{
"Question1": "Who is the best professor in the CS Department?",
"Answer1": "Cody Squadroni"
},
{
"Question2": "What was the name of your first pet?",
"Answer2": "Kirby"
}
],
"rentalDate": "Aug 1 2020",
"returnDate": "null",
"dueDate": "Aug 4 2020",
"copyNumber": "1",
"movieType": "D",
"title": "X-Men",
"actor":
[
{
"actor1FirstName": "Hugh",
"actor1LastName": "Jackman"
},
{
"actor2FirstName": "Patrick",
"actor2LastName": "Stewart"
}
],
"directorFirstName": "Bryan",
"directorLastName": "Singer",
"genre": ["Adventure","Action","Sci-Fi"],
"keyword": ["Wolverine","Mutants"]
},
]
);
db.RentalCollection.find();
db.RentalCollection.updateOne(
{ _id: "0000001"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000002"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000003"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000004"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000005"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000006"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000007"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000008"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000009"},
{ $set: { returnDate: "Jul 01 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000010"},
{ $set: { returnDate: "Aug 02 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000011"},
{ $set: { returnDate: "Aug 02 2020"}}
);
db.RentalCollection.updateOne(
{ _id: "0000012"},
{ $set: { returnDate: "Aug 02 2020"}}
);
db.RentalCollection.aggregate(
{ $project: {_id: 0, userFirstName: 1, userLastName: 1, title: 1, rentalDate: 1, actor1FirstName: 1, actor1LastName: 1,actor2FirstName: 1, actor2LastName: 1, directorFirstName: 1, directorLastName: 1, movieType: 1 }}
);
full error from terminal:
MongoDB shell version v4.2.8
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("775add23-e465-4fe3-a32f-f0ac8a4753cc") }
MongoDB server version: 4.2.8
2020-08-02T10:54:36.056-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:8
2020-08-02T10:54:36.056-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:11
2020-08-02T10:54:36.057-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:8
2020-08-02T10:54:36.057-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:7
2020-08-02T10:54:36.059-0600 E QUERY [js] uncaught exception: SyntaxError: identifier starts immediately after numeric literal :
#(shell):1:8
2020-08-02T10:54:36.059-0600 E QUERY [js] uncaught exception: SyntaxError: expected expression, got '-' :
#(shell):1:2
2020-08-02T10:54:36.059-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:8
2020-08-02T10:54:36.060-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:4
2020-08-02T10:54:36.060-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:13
2020-08-02T10:54:36.061-0600 E QUERY [js] uncaught exception: SyntaxError: unexpected token: identifier :
#(shell):1:3
2020-08-02T10:54:36.061-0600 E QUERY [js] uncaught exception: SyntaxError: expected expression, got '-' :
#(shell):1:2
2020-08-02T10:54:36.061-0600 E QUERY [js] uncaught exception: SyntaxError: identifier starts immediately after numeric literal :
#(shell):1:8
2020-08-02T10:54:36.062-0600 E QUERY [js] uncaught exception: SyntaxError: expected expression, got '>' :
#(shell):1:0
bye

Ngx-Charts show all x axis values but alternate x-axis labels

I am currently working on ngx charts, for examples i have 12 x-axis every values need to be plotted in graph, but only alternate x-axis label need to be displayed.
html code
<ngx-charts-area-chart [view]="view" [scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
[xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [results]="multi" (select)="onSelect($event)">
</ngx-charts-area-chart>
data.ts
var multi = [ {
"name": "Belarus",
"series": [
{
"value": 5776,
"name": "Jan 19"
},
{
"value": 4299,
"name": "Feb 19"
},
{
"value": 3995,
"name": "Mar 19"
},
{
"value": 6597,
"name": "Apr 19"
},
{
"value": 4954,
"name": "May 19"
},
{
"name": "June 19",
"value": 3865
},
{
"name": "July 19",
"value": 2349
},
{
"name": "Aug 19",
"value": 6910
},
{
"name": "Sept 19",
"value": 6224
},
{
"name": "Oct 19",
"value": 4161
},
{
"name": "Nov 19",
"value": 4825
},
{
"name": "Dec 19",
"value": 3835
}
]},{
"name": "Croatia",
"series": [
{
"value": 2576,
"name": "Jan 19"
},
{
"value": 5427,
"name": "Feb 19"
},
{
"value": 3097,
"name": "Mar 19"
},
{
"value": 4385,
"name": "Apr 19"
},
{
"value": 4849,
"name": "May 19"
},
{
"name": "June 19",
"value": 2867
},
{
"name": "July 19",
"value": 6241
},
{
"name": "Aug 19",
"value": 6517
},
{
"name": "Sept 19",
"value": 3808
},
{
"name": "Oct 19",
"value": 2068
},
{
"name": "Nov 19",
"value": 5121
},
{
"name": "Dec 19",
"value": 3876
}
]}]
In the above data set in x-axis I need to plot all values in the graph but only alternate labels need to displayed. This need to be applied for all types of ngx charts.

Duplicate calls to http in Angular on Subscribe

I'm new to angular and trying to implement a dashboard application. The dashboard contains 50+ different charts so I decided to capture all the data of these charts user one API call, the json file is as follows
{
"site": "bje",
"date": "2018-03-09T00:00:00",
"charts": [
{
"code": "INDK-01",
"dataset": [
{
"name": "Actual",
"data": [
{
"label": "05 Jan 2018",
"value": 351,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 373,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 353,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 379,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 356,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 371,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 371,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 368,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 369,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 371,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Budget",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Target",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
}
]
},..............etc
] }
The service .ts file contain a function that return the data as follows:
getDashboardData(): Observable<ProcessedData>{
return this._http.get<ProcessedData>(this.baseUrl)
.map(res => res);
}
As well I have created one re-usable component which accept an input of chart code (ex. "INDK-01" in above json sample) an in ngOnInit I have this code
ngOnInit() {
this._service.getDashboardData(this.selectedSite, this.selectedDate)
.subscribe(res => {
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
.
.
.
});
in dashboard home component I add multiple
the problem that it makes multiple calls to the API everytime I load dashboard page, is there any way to avoid that? like for example store the data in a global object and from each chart will filter to get the proper data.

You need to first shareReplay(1) your observable something like following to cache the data:
const sharedOb = this._service.getDashboardData(this.selectedSite, this.selectedDate).shareReplay(1)
sharedOb.subscribe(x=>{
// do your work here
})
Now you can subscribe to sharedOb as many as times you want, there will only be one server round-trip.

You could use ".share".
this._service.getDashboardData(this.selectedSite, this.selectedDate).subscribe(res =>
{
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
}).share();

getting something from yahoo weather API

I am trying to create a simple app to get a City name and display the weather with yahoo weather API. I am able to make a json request and get the answer but I am completely lost on how to retrieve the information from this json.
I can see the response.query , but when I am trying response.query.something I get undefined. Can someone explain to me how I can get the response.query.results.city thing?
Thanks in advance!!
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22greenland%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys
{
"query": {
"count": 1,
"created": "2015-11-23T16:18:30Z",
"lang": "vi",
"results": {
"channel": {
"title": "Yahoo! Weather - Greenland, GL",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Greenland__GL/*http://weather.yahoo.com/forecast/GLXX0012_f.html",
"description": "Yahoo! Weather for Greenland, GL",
"language": "en-us",
"lastBuildDate": "Mon, 23 Nov 2015 12:50 pm CGT",
"ttl": "60",
"location": {
"city": "Greenland",
"country": "Greenland",
"region": ""
},
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"wind": {
"chill": "15",
"direction": "220",
"speed": "15"
},
"atmosphere": {
"humidity": "63",
"pressure": "29.8",
"rising": "0",
"visibility": "6.21"
},
"astronomy": {
"sunrise": "10:45 am",
"sunset": "1:33 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Greenland, GL at 12:50 pm CGT",
"lat": "71.8",
"long": "-42.18",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Greenland__GL/*http://weather.yahoo.com/forecast/GLXX0012_f.html",
"pubDate": "Mon, 23 Nov 2015 12:50 pm CGT",
"condition": {
"code": "28",
"date": "Mon, 23 Nov 2015 12:50 pm CGT",
"temp": "27",
"text": "Mostly Cloudy"
},
"description": "\n<img src=\"http://l.yimg.com/a/i/us/we/52/28.gif\"/><br />\n<b>Current Conditions:</b><br />\nMostly Cloudy, 27 F<BR />\n<BR /><b>Forecast:</b><BR />\nMon - AM Clouds/PM Sun. High: 29 Low: 17<br />\nTue - Mostly Cloudy. High: 19 Low: 8<br />\nWed - PM Snow Showers. High: 12 Low: 6<br />\nThu - Mostly Cloudy. High: 10 Low: 0<br />\nFri - Mostly Sunny. High: 1 Low: -8<br />\n<br />\nFull Forecast at Yahoo! Weather<BR/><BR/>\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)<br/>\n",
"forecast": [
{
"code": "30",
"date": "23 Nov 2015",
"day": "Mon",
"high": "29",
"low": "17",
"text": "AM Clouds/PM Sun"
},
{
"code": "28",
"date": "24 Nov 2015",
"day": "Tue",
"high": "19",
"low": "8",
"text": "Mostly Cloudy"
},
{
"code": "14",
"date": "25 Nov 2015",
"day": "Wed",
"high": "12",
"low": "6",
"text": "PM Snow Showers"
},
{
"code": "28",
"date": "26 Nov 2015",
"day": "Thu",
"high": "10",
"low": "0",
"text": "Mostly Cloudy"
},
{
"code": "34",
"date": "27 Nov 2015",
"day": "Fri",
"high": "1",
"low": "-8",
"text": "Mostly Sunny"
}
],
"guid": {
"isPermaLink": "false",
"content": "GLXX0012_2015_11_27_7_00_CGT"
}
}
}
}
}
}

The response you get is a String, not an Object, so you have to Parse it into an Object using JSON.parse(response).
I think you can try PostMan and JSONView, it will help you to test any API easier.
Hope this can help you.

Just found out what I have to do ( hated js list ).
I used dot notation to get my temps.
So just for the record
var response; // here i have the jsonparse thing
//I want to access something I have to do
response.query.results.channel.wind.speed //and i will get wind's speed
If anyone could use the [] notation it would be great.
Thanks for your time .

Process JSON data for Google org chart

I have a JSON data that looks like this
{
"name": "k11",
"id": "GOLD1501131955983380",
"data": {
"rank": "Agent",
"email": "k11#gmail.com",
"registrationDate": "13 Jan 2015 11:55:15 GMT",
"contact": "123123"
},
"children": [{
"name": "k11a",
"id": "GOLD1501131956858350",
"data": {
"registrationDate": "Jan 13, 2015 7:56:15 PM",
"rank": "Agent",
"email": "k11a#gmail.com",
"contact": "123123213123"
},
"children": [{
"name": "k11a2",
"id": "GOLD1501131959324173",
"data": {
"registrationDate": "Jan 13, 2015 7:59:25 PM",
"rank": "Agent",
"email": "k11a2#gmail.com",
"contact": "123123123"
},
"children": []
}, {
"name": "k11a1",
"id": "GOLD1501131958998436",
"data": {
"registrationDate": "Jan 13, 2015 7:58:27 PM",
"rank": "Agent",
"email": "k11a1#gmail.com",
"contact": "123123123"
},
"children": []
}]
}]
}
}
What I need to is to process this data to be compatible with google org chart that should look like this
{
"cols": [{
"id": "GOLD1501131955983380",
"name": "k11",
"data": {
"registrationDate": "Jan 13, 2015 7:59:25 PM",
"rank": "Agent",
"email": "k11a2#gmail.com",
"contact": "123123123"
}
}, {
}]
"rows": [{
"c": [{
"v": "k11"
}]
}, {
"c": [{
"v": "k11a2"
}, {
"v": "k11a"
}]
}]
}
Somewhat like the structured require by google charts.
Kindly please help me

Categories

Resources