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();
Related
I am trying to render a line chart using vega-lite in my react app. It gets rendered as follows:
As per the specs it should get rendered as follows (notice the circular data points in green line chart):
I copy pasted the spec in vega editor and it rendered correctly as above. You can try it in this vega editor
Here is the full spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"date": "Apr 05 22",
"total": 15,
"threadsCount": 6,
"commentsCount": 9
},
{
"date": "Jan 20 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 02 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 20 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Mar 03 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 13 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 31 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 19 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 25 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 06 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 24 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 21 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 14 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 04 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Apr 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 20 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Mar 16 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 21 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 15 22",
"total": 1,
"threadsCount": 0,
"commentsCount": 1
},
{
"date": "Mar 15 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 19 22",
"total": 5,
"threadsCount": 2,
"commentsCount": 3
},
{
"date": "Jan 29 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 22 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Jan 27 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 07 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 03 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Feb 14 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 07 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 12 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 26 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Apr 02 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 15 22",
"total": 6,
"threadsCount": 1,
"commentsCount": 5
},
{
"date": "Apr 08 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 12 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 31 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Mar 23 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
}
]
},
"width": "container",
"vconcat": [
{
"layer": [
{
"width": 680,
"height": 250,
"mark": {
"type": "line",
"color": "green"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative",
"title": "Number of comments & threads created"
}
}
},
{
"width": 680,
"height": 250,
"mark": {
"type": "circle",
"color": "green",
"opacity": "55%"
},
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative"
},
"tooltip": [
{
"field": "date",
"type": "temporal",
"title": "Date"
},
{
"field": "threadsCount",
"type": "quantitative",
"title": "Threads Created"
},
{
"field": "commentsCount",
"type": "quantitative",
"title": "Comments Created"
}
],
"size": {
"condition": {
"param": "highlight",
"empty": false,
"value": 170
},
"value": 50
}
}
}
]
},
{
"layer": [
{
"width": 680,
"height": 60,
"mark": {
"type": "line",
"strokeWidth": "2px"
},
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": [
"x"
]
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "(Select duration in lower chart to zoom in. Double click to reset zoom.)"
},
"y": {
"field": "total",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false
},
"title": ""
}
}
}
]
}
]
}
What might be wrong?
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"
], [...]
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.
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 .
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