[Question] worldmap general question

[znavoyan]

Hello, I'm not sure if this is a right place to post a question. If it is not right place, please suggest. I'm trying to show statistics on grafana worldmap panel in the following way. I have a list of world cities (Berlin, Prague, Johannesburg, ... ) and for each city a circle should be shown on the corresponding place on the map. The color of circle should indicate if there is a problem or not. Besides that, I want additional information to be displayed when hovering with mouse.
The first question is if it is possible to achieve the mentioned with worldmap-panel plugin :)
2. As data source I use graphite, is it possible to use it for this case? Or I should use other datasources like InfluxDB, ElasticSearch ? in the documentation it is written that in case of graphite, country codes can be used, I tried and it worked, However I need not country codes but cities.
3. Can you point out some documentation or give an advise how to start? It is not very clear from the included documentation.

Thanks in advance,
Zaven.

[daniellee]

Hi,

Yes, this is a good place to ask questions! I think what you want to do is possible. Graphite is definitely supported.

There is nothing inbuilt for cities but you could build it yourself very easily if you know which cities you want. This file might be a good starting point: https://github.com/grafana/worldmap-panel/blob/master/src/data/probes.json

You'll have to look up the latitude and longitude for each city. At the moment, there is no way to upload a custom location file (it's on the backlog). What we do in the WorldPing app is to use the JSON endpoint option to return a custom json file. In our case, the list of cities is dynamic.

You would use thresholds to change the colors of the circles. For example, if there are more than 10 errors then the circle should be red.

I will try and structure the documentation a bit better so that all this is a bit more obvious. I just released a new version and updated the readme with some more screenshots.

[znavoyan]

Hi, thank you for the prompt response.
I have noticed probes.json file but didn't understand how to use it. My script send the following information to graphite: echo "WP.DE.Berlin.6017 15 date +%s" | nc 127.0.0.1 2003
In worldmap plugin's Metrics tab I configure WP.*.Berlin.6017.aliasByNode(1). It shows points on the map. The colors I can control by the value (15 in this case).
However when I try to point out 'frankfurt' as it is defined in probes.json it shows nothing. I guess it tries to find the key in states.json only. How to specify worldmap plugin to use probes.json configuration instead?
Regarding mouse hover. I want to hover mouse over the circle and popup with additional information to be showed. Is it possible, if yes how to do that ?

[znavoyan]

Worldmap interpret DE as Delaware and cannot found CZ. I guess it read states.json file only. But when I tried to add CZ and change DE coordinates in states.json files nothing happened. The file is located in two places src/data and dist/data. I tried to change in both places and restarted grafana-server. In both cases nothing changed. Is there any other location of states.json? How to point out which configuration for country codes should be used ?

[daniellee]

The states.json file is saved in the dashboard json when you save the dashboard for the first time. So you will either have to edit the dashboard json manually or just recreate the dashboard (delete it and create a new one). The states.json from the dist/data directory is the one that is used. The probes.json is just sample data that I used for testing our worldPing app.

However, if you change one of the included location json files then be aware that they will be overwritten next time you update the plugin.

There are a few options for which location data to use:

My recommendation is to copy one of the location json files (countries, states or probes), modify it and then serve it using a json endpoint.

The only information shown on the popup is the location name and the value of its metric.

[simar7]

Hey @daniellee , I'm trying to display some custom location (more cities than the stock states/countries) and tried your above suggestion by serving the custom created JSON and using the JSON endpoint location data source. However I'm unable to see any requests being made from the grafana dashboard to my web service serving the location data payload.

What else can I try? I've basically modified this file to make it serve the location (with correct lat/lon) that I have.

[daniellee]

@simar7 if you check the network tab in Chrome, can you see if it is calling your endpoint? You are probably getting a Cross Origin (CORS) error and in that case you will have to use the jsonp option.

Can you show a screenshot of your worldmap options tab?

[simar7]

Hey @daniellee the following are my options:

But I think the real problem here was the following error (found them through the chrome network inspector logs):

 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Is there any documentation on how to use the JSONP endpoint? Thanks again for the help!

[daniellee]

Yes, as I thought. CORS problems but I am wondering why localhost:3000? What will the url be in production, will you have cross origin problems there? Or are you just testing?

If you're just testing and are getting CORS errors it can be because everything is localhost with different ports which counts as different domains. Then you can use the Allow-Control-Allow-Origin chrome extension to temporarily turn off cross origin checks in Chrome. Just remember to turn it off before visiting other sites :-)

For a jsonp endpoint you need to wrap the json document in a callback (you can call it whatever you want) and then put the name of the callback in the Jsonp Callback field in the Worldmap settings.

myCallbackThatCanBeCalledAnything(
[
  {
        "key": "AK",
        "latitude": 61.3850,
        "longitude": -152.2683,
        "name": "Alaska"
  }
]);

[muskahya]

Hi, I have read all questions and answers but still cannot point out how I have the circle on a specific city which is also not in probes. Could you please clarify me

[sslupsky]

I have a similar issue as @muskahya . I've read everything I can about the worldmap plugin but am having problem with my own custom json endpoint.

I have tagged the data in influx with an eui. The tag is "dev_eui".

I created a json file as follows:

[
{
"key": "a8610a30371e7708",
"latitude": 53.48984099999999,
"longitude": -113.47412100000003,
"name": "Edmonton"
}
]

I have confirmed that the file is loading in the browser and that there is no CORS problem.

I have tried substituting my tag name for "key". That is, renamed "key" as "dev_eui" in the json file. That does not work either.

How does the worldmap plugin do the match? What exactly is it matching?

[amotl]

Dear @muskahya,

if your metrics are stored in InfluxDB in TABLE format, you might enjoy reading about #177.

With kind regards,
Andreas.

[sslupsky]

For anyone else that finds this thread and wondering about the relationship between the metric configuration fields and the database fields I can clarify some of the issues we encountered. We inspected the code and determined that for an influx configuration, the "ALIAS BY" field is mandatory. The contents of this configuration option is used to select the tag to match for the json / jsonp endpoint configuration. This requirement is mentioned in the documentation:

The Group By clause should be the country code and an alias is needed too. The alias should be in the form $tag_<field name>.

It is a little confusing which alias they are referring to because of the reference to "country code" and "field name". Specifically, for the influx configuration, the "ALIAS BY" metric configuration should be set to $tag_<your influx tag to match to>, not the field name as indicated in the documentation. This tag is then matched against the value of the "key" field in the json file.