I followed the question here Retrieving object from TreeMap but I am unable to get the name out of it like for in
chart.data = [{
"name": "First",
"value": 190
}, {
"name": "Second",
"value": 289
}, {
"name": "Third",
"value": 635
}, {
"name": "Fourth",
"value": 732
}, {
"name": "Fifth",
"value": 835
}]
I want to get name like First, Second and so on. on hit event how do I do that?
Ok so it was bit deeper than I thought:
var series = chart.seriesTemplates.create("0");
series.columns.template.events.on('hit', function(ev) {
console.log(ev.target.dataItem.dataContext.dataContext.name);
});
instead of
console.log(ev.target.dataItem)
Related
I'm trying to use JSONata to convert arrays of "key/value" objects into properties of the parent object. My input looks like this:
[
{
"city": "Ottawa",
"properties": [
{
"name": "population",
"value": 37
},
{
"name": "postalCode",
"value": 10001
},
{
"name": "founded",
"value": 1826
}
]
},
{
"city": "Toronto",
"properties": [
{
"name": "population",
"value": 54
},
{
"name": "postalCode",
"value": 10002
}
]
}
]
I'm struggling to generate the output I need, I've seen examples that reference explicit elements, like in this answer, but I need the properties to be converted "dynamically" since I don't know them in advance. I think I need something like this, but I'm missing some particular function:
$[].{
"city": city,
properties.name: properties.value
}
This is the output I need to generate:
[
{
"city": "Ottawa",
"population": 37,
"postalCode": 10001,
"founded": 1826
},
{
"city": "Toronto",
"population": 54,
"postalCode": 10002
}
]
The properties arrays don't always contain the same keys, but the city attributes are always present.
You can use the reduce operator, as described in the Grouping docs here:
$[].(
$city := city;
properties{ "city": $city, name: value }
)
You can play with it live: https://stedi.link/uUANwtE
Please try this expression.
$[].{
"city": $.city,
$.properties[0].name: $.properties[0].value,
$.properties[1].name: $.properties[1].value,
$.properties[2].name: $.properties[2].value,
$.properties[3].name: $.properties[3].value
}
https://try.jsonata.org/s1Ea4kUvo
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
When we trash a mail after sending it, the UI displays it with only the "Trash" label. However, the API shows both "Sent" and "Trash"
{
"id": "16169c0c3d212e74",
"threadId": "16169c0c3d212e74",
"labelIds": [
"TRASH",
"SENT"
],
"snippet": "#Testing ",
"historyId": "1893418",
"internalDate": "1517897696000",
"payload": {
"partId": "",
"mimeType": "multipart/alternative",
"filename": "",
"headers": [
{
"name": "MIME-Version",
"value": "1.0"
},
{
"name": "Received",
"value": "by xx.xx.xx.xx with HTTP; Mon, 5 Feb 2018 22:14:56 -0800 (PST)"
},
{
"name": "Date",
"value": "Tue, 6 Feb 2018 11:44:56 +0530"
},
{
"name": "Delivered-To",
"value": "xxx#xxx"
},
{
"name": "Message-ID",
"value": "xxx"
},
{
"name": "Subject",
"value": "TEST2"
},
{
"name": "From",
"value": "xxx"
},
{
"name": "To",
"value": "xxxx"
},
{
"name": "Content-Type",
"value": "multipart/alternative; boundary=\"f403045c3c98fab46e05648518a7\""
}
],
"body": {
"size": 0
},
"parts": [
{
"partId": "0",
"mimeType": "text/plain",
"filename": "",
"headers": [
{
"name": "Content-Type",
"value": "text/plain; charset=\"UTF-8\""
}
],
"body": {
"size": 423,
"data": "----"
}
}
]
},
"sizeEstimate": 1810
}
Some mails also have labels like [SENT, INBOX]. Is there any way to get the latest or most relevant label. I would like to categorize mails based on the labels and multiple labels create contradictions.
After you send an email it gets the SENT label. When you are trashing the email you are adding the TRASHED label. It does not remove any other labels that had been added.
I would suspect that the UI version of Gmail has a filter that does not display trashed mails in the sent mail box.
Solution: When you trash your email make sure to delete the SENT label or just filter out all other labels in your application if it has a trashed label.
The gmail api returns the data it has its up to you to either ensure that it has only the correct data by deleting other labels after you trash an email or filtering out the labels you are not interested in.
While amcharts shows the India map correctly (showing the disputed regions as part of India) when displaying only India (http://jsfiddle.net/zxhseguw/5/)
"dataProvider": {
"map": "indiaLow",
"areas": [ {
"id": "IN-KA",
"value": 4447100,
}, {
"id": "IN-UP",
"value": 38763
}]
},
it shades it differently when rendering it on world map (http://jsfiddle.net/zxhseguw/6/)
"dataProvider": {
"map": "worldLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
I wonder, if there is a way to make it render India correctly, just like its possible in Google Charts by setting origin='India'
I'm assuming you're referring to the region around Kashmir, correct? Try using worldIndiaLow instead of worldLow, which includes more of that disputed area as part of India.
"dataProvider": {
"map": "worldIndiaLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
Updated fiddle
Basically, no bubbles are displayed because the group which I use for the chart is empty.
what my data structure looks like :
[{
"site": "Site",
"service": "Long Term Care",
"value": 67.52,
"quarter": "Q1",
"date": "2015-02-13T22:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 67.19,
"quarter": "Q2",
"date": "2015-05-15T21:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 66.87,
"quarter": "Q3",
"date": "2015-08-14T21:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 66.57,
"quarter": "Q4",
"date": "2015-11-14T22:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Assisted Living",
"value": 75.36,
"quarter": "Q1",
"date": "2015-02-13T22:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 75,
"quarter": "Q2",
"date": "2015-05-15T21:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 74.65,
"quarter": "Q3",
"date": "2015-08-14T21:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 74.31,
"quarter": "Q4",
"date": "2015-11-14T22:00:00.000Z",
"groupId": 2
}]
I want to display a bubble for each row in my data source. I created a dimension based on the quarters (I've also tried using the date field but with the same result) and a group based on the value field (each value is a unique float number). But when printing the resulting group in the console, it returns an empty array. Now I'm not sure if it is even possible to do what I have in mind.
Rest of the code:
ndx = crossfilter(myData);
dateDimension = ndx.dimension(dc.pluck('quarter'));
print_filter(dateDimension);
valueGroup = dateDimension.group(dc.pluck('value'));
print_filter(valueGroup);
minValue = dateDimension.bottom(1)[0].value;
maxValue = dateDimension.top(1)[0].value;
testChart = dc.bubbleChart("#test-chart");
testChart.width(850).height(350).dimension(dateDimension).group(valueGroup)
.renderLabel(false)
.maxBubbleRelativeSize(0.3)
.radiusValueAccessor(function (p) {
return p.value.value;
})
.x(d3.scale.ordinal().domain(["Q1", "Q2", "Q3", "Q4"]))
.xUnits(dc.units.ordinal)
.y(d3.scale.linear().domain([0, maxValue + 10])).yAxisLabel("", 20);
dc.renderAll();
Here is the JsFiddle
Here is a picture of what I expected the chart be like.
Lots of issues here, but the main thing is getting your groups properly defined for the visualization you want to do. Here's an update to your JSFiddle that may get you started: https://jsfiddle.net/yewk7c0r/15/
Basic idea for groups is to define your dimension at the level of granularity you need for your visualization and then define your group using reduceSum (or a custom grouping if you want to do average or something like that):
ndx = crossfilter(myData);
dateDimension = ndx.dimension(function(d) {
return [d.quarter, d.service];
});
valueGroup = dateDimension.group().reduceSum(dc.pluck('value'));