New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question] worldmap general question #47

Open
znavoyan opened this Issue Nov 8, 2016 · 9 comments

Comments

Projects
None yet
4 participants
@znavoyan

znavoyan commented Nov 8, 2016

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.

@znavoyan znavoyan changed the title from [Question] show to [Question] worldmap general question Nov 8, 2016

@daniellee

This comment has been minimized.

Member

daniellee commented Nov 9, 2016

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.

@daniellee daniellee added the question label Nov 10, 2016

@znavoyan

This comment has been minimized.

znavoyan commented Nov 10, 2016

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

This comment has been minimized.

znavoyan commented Nov 15, 2016

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

This comment has been minimized.

Member

daniellee commented Nov 16, 2016

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:

image

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

This comment has been minimized.

simar7 commented Jan 16, 2017

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

This comment has been minimized.

Member

daniellee commented Jan 17, 2017

@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

This comment has been minimized.

simar7 commented Jan 17, 2017

Hey @daniellee the following are my options:

screen shot 2017-01-17 at 12 51 18 pm

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

This comment has been minimized.

Member

daniellee commented Jan 18, 2017

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

This comment has been minimized.

muskahya commented Oct 13, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment