How to display several fields in Geo Map shape's tooltip

#1

Hi guys, I am trying to render pre-aggregated data in my shape map (one row per shape) and display several fields in the tooltip such as district name, number of rides, total cash payments, total credit card payments, etc. How can I do that?

#2

Hi there, yes it is possible to achieve that. There are two ways you can do it, one when you declare the map in a static way, and the other when you add the shapes in a dynamic way (using external queries). For example, if you are defining a Map using a declarative or static way, you only need to define the shapes using the .set('shapes', [{...}]) instead or .set('shape', "http://..."), see the Shapes GeoJSON section in ChartFactor documentation.

Now, to show several pre-aggregated data, just add the wanted fields to the .rows() function. Take a look at the following piece of code.

let provider = cf.provider("Elasticsearch");
let source = provider.source('shapes_additional_rows');
// Add Metrics
let metric0 = cf.Metric("metric","sum");
// Add fields to data source.
let myData = source
    .rows("state_name", "district_name", "number_of_rides", "total_cash_payments", "total_credit_card_payments")
    // You can define rows of this two ways also
    //.rows(["state_name", "district_name", "number_of_rides", "total_cash_payments", "total_credit_card_payments"])
	/*.rows(
				cf.Row("state_name", "State"),
				cf.Row("district_name", "district_name"),
				cf.Row("number_of_rides", "number_of_rides"),
				cf.Row("total_cash_payments", "total_cash_payments"),
				cf.Row("total_credit_card_payments", "total_credit_card_payments")
			)*/
	.metrics(metric0);
	
let color = cf.Color().metric(metric0);
color.palette(['#ffffb2','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#b10026'].reverse());
color.autoRange({ dynamic: true });

let myChart = myData.graph("Geo Map")
  .set("shapes", [{
       "name": "State",
       "shape": "https://chartfactor.com/resources/us-states.json",
       "options": {
           "dataField": {
               "name": "state_name",
               "type": "ATTRIBUTE",
               "originName": "state_name",
               "originalType": "keyword",
               "label": "State",
               "keyword": true
           }
       }
  }])
  .limit(1000)
  .set("zoom", 4)
  .set("center", [41.07935114946899,-101.90917968750001])
  .set('zoomDelta', 0.2)
  .set('zoomSnap', 0.2)
  .set("color", color)
  .set("legend", "right")
  .element("visualization-id")
  .execute();

If you want to add the additional rows dynamically, using a external query visit the Shapes data options in the documentation and see how it works.

Hope this can help you…