How do I create dynamic infographics in SharePoint?

Question

I'm looking to add a dynamic infographic with the ability to update it using a SharePoint data library or list. Has anyone accomplished this (that is easy or quickly updatable). For example, I want to have a picture with a map of the world and click on a continent to display certain data about that area.

Any suggestions, links or info is appreciated!

Answer 1

I have developed similar module to hover over different countries to display the Sales figures with color codes.

The implementation is fairly easy, most boring part is to create the image-map (Area) for each country :(

Implementation :

• Create a list with country code(lookup ) , County Name , data columns...etc
• Use client-side object model to pull the data from list in a JSON object.
• Have the HTML ready with Image-map (Area) , use the title or alt to store the country code.
• Use Jquery live function to attach a delegate on hover state for area tag ( use the same css class for all area tags)
• Add the logic to on hoverfunction to pull the data based on the country code with is part of the area tag.

Have fun :)

Answer 2

SharePoint is Web based, so you can run any Web based mapping tool on it. The tricky part is to connect the data to the map, as you'll have to do it manually (or use a third party tool).

I have two live examples:

• an older one that uses FusionMaps (Flash-based): http://blog.pathtosharepoint.com/2009/05/05/live-demo-fusionmaps-on-sharepoint/

• a simple, more recent one based on Google Maps: http://www.bradshawweil.com/Pages/OurTerritory.aspx

These days people prefer pure JavaScript (non-Flash) solutions as they offer better compatibility with mobile devices.

My examples have a simple hover behavior, you can of course build more complex scenarios.