How to make a world map with clickable countries in AMcharts? - amcharts

Google maps is a bit of a nightmare in terms of getting GEOjson polygons for every country on a map, making them clickable, etc.
I came across AMcharts and it looks like a dream come true. Is there a way in AMcharts to make a world map that allows you to:
•select multiple countries at once,
•have click events for each country,
•displays the country's text on the map?
EDIT: I am using Angular 2.

have click events for each country
You can use listeners in the configuration object to bind an event while using Angular. Then use clickMapObject event to capture the click on a country.
You can get the map object from the event.
"listeners": [{
"event": "clickMapObject",
"method": function(e) {
var mapObject = e.mapObject;
}
}]
select multiple countries at once
You can implement the multi-selection using the event above. Check the example here:
https://codepen.io/team/amcharts/pen/864a70d0dc7140cb09ca507229166a11
displays the country's text on the map?
The country name is displayed on the tooltip. I recommend to use that instead of having the names displayed on the map, as many of them would overlap.

Related

How do i use actions to change the view of my pie chart in Tableau?

So i am learning about Tableau and wanted to figure something out, I have created a Pie Chart visual which displays my Brand Share by region as a Percentage below:
I want to change my view where once i click my map on Dashboard this visual goes from the current above to Top 3 Brands by SUM(2021) per country.
Currently when i click my map on my Dashboard, this visual changes to 100% of the country selected but i suppose that is expected based on my filters etc.
We need to create a Set and a Parameter. Here's the link:
https://help.tableau.com/current/pro/desktop/en-us/sortgroup_sets_topn.htm
Here's how it works on the Sample superstore data.

Share different values on same tooltip in dc.js

Is it possible to show a tooltip with all the same x values of a composite chart? I mean, if we have a JSON with
{"date":"1/18/2001", "Open":54.77, "High":56.19, "Low": 52.63, "Close": 55.50}
show something like this:
If the same data is used for all the parts of the composite chart (i.e. same group but different valueAccessors, you can use compositeChart.shareTitle(true) to pass the same title accessor down to all the child charts.
This works well if you're reducing multiple values into an object like your example.
Then you just need to set baseMixin.title to display all the parts with newlines.

How to query Umbraco's 7.X page setting (Grid Layout) to create a menu?

I'm using Umbraco 7.3.3 to create a home page with a verical parallax scroll menu. My approach is to create a Editor/View for each specific section and use a setting (from Grid Layout property editor) to render the ID that I'll use as anchor for my main navigation.
I've also tried to create the sections as Child Documents but it's lacks the ability to freely reorder the sections.
Is the first option the best approach to create a Grid Layout with Parallax Scroll navigation? Can someone point a different/better way to create a "scroll down" navigation menu?
The backbone is OK but I don't know how to query CurrentPage's settings under MainNavigation.cshtml Partial (I'm using Fanoe Starter Kit).
How can I query by a specific CurrentPage's setting?
I'm expecting something like:
// first try (Does NOT work)
CurrentPage.GetProperty("content").Where(s => s.some lambda expression)
//another tried option based on GetGridHtml method (Does NOT work)
CurrentPage.GetGrid("content")...
Here is the setting configuration for each row that should have a navigation item in menu:
[{
"label": "Section Name",
"description": "Type the section name",
"key": "id",
"view": "textstring",
"applyTo": "row"
}]
I've made an extra research and I found (here and here) that there is no API that handles the serialized JSON stored by the Grid Layout Editor.
Limitations With the above usage scenarios in mind, consider the grids limitations. First of all, all content entered into the grid is stored as a single property value on the content node, as a big JSON object. This means that as soon as the values are stored in the database, there is no managed api to drill into the grid content and target specific cell content - so a grid layout is not a recommended storage of reusable content - it simply wasn't designed for this scenario. If you wish to reuse content in multiple pages, it is still recommended that you store these pieces of content as separate content nodes, so they can be stored, cached and queried as usual.

Tableau, Action on Non-Map messes up Double Map

First workbook on Public Tableau allows user to hover or select datapoints on two separate maps, and other panels react accordingly (refer to tab Business Ratings)
Two maps are filtered separately, i.e. businesses in Brooklyn are selected in Brooklyn map, businesses in Ludhiana are selected in Ludhiana map, and it worked really well .... so far
Second workbook on Public Tableau adds action to Grade panel. If user hovers over a business, only that business should display on one of the maps.
But the problem, it displays on BOTH maps, which is what I don't want. And when I check the Location(Location) filter, it selects ALL locations, instead of the ones I specified. It's as if adding action to Grade totally wiped out my efforts.
How do I fix this?
I believe I solved my problem.
Before, Grand_Avg was defined as
{ EXCLUDE [Location (Location)] : AVG([Number_Rating]) }
So when I created action to select [Location (Location)], it somehow removed the filters I originally placed on [Location (Location)] for both separate maps.
But now, I defined Grand_Avg as
{ EXCLUDE [Location] : AVG([Number_Rating]) }
And now, I can create action to Hover and Select the Location in Grade panel and it works better. Here is updated workbook.

Change crossfilter groups via a checkbox

I'm trying to build a visualisation to graph what I've been reading this year.
Currently I have everything grouped via Quantity of novels. I'm wondering if it's possible to change the group in real time or if I'm stuck with a group once I've set it.
The code that I've got now to calculate the groups looks something like this:
function groupByType(dimension){
if($('#ValueType').is(':checked')) {
console.log("Pages")
return dimension.group()
.reduceSum(function(d) {
return d.Pages;
});
} else {
console.log("Volumes");
return dimension.group();
}
}
Whenever the checkbox (#ValueType) is clicked I'm calling a dc.redraw on the entire graph which I was hoping would change the way the group is being calculated but it's not doing so. Is there way to change the group dynamically or would I be better off just refreshing the page and passing a parameter when it loads?
It's a bit hard to tell, but it looks like every time you check or uncheck the checkbox, you create a new group. You do not want to do this as the groups stick around and continue getting updated. Things will just get slower and slower.
Just create the 2 groups upfront (and perhaps even 2 dc.js charts) and then let the checkbox control which group is assigned to the chart or which chart is displayed.

Resources