Displaying bar chart with in the Map

Question

I'm using Geo chart to display a map. On page load it gets data from SQLServer and based on logic shows different colors for states inside the map as in the image below:

For example if we take example of deaths caused in India and the reason for it. Suppose say X state has highest percentage of deaths. So it's marked with highest color. This is already obtained.

Requirement:

Now the cause of death can be many say suicide, natural, accident's e.t.c. I can get these data too from Database. I want to put a Bar chart within this map say much like the one in the image below:

Is there a way I can do it in geo chart or using any other method? Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:22

Well, this is simple.
You need a SVG map of the regions you want to show (google it).
Then you can create SVG rectangles (the different color bars in the chart) on your SVG map.

You can use inkScape to prepare the map, and create bounding rectangles for your charts.

Since SVG is a simple XML file, this you can do entirely in code, or even javaScript, if you fetch the data via AJAX.

Drawing 3 rectangles goes like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs id="defs4" />

  <g id="charts">
    <rect
       y="98.076492"
       x="82.857178"
       height="465.71429"
       width="125.71429"
       id="rect4140"
       style="opacity:0.72123892;fill:#d65757;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <rect
       y="99.505066"
       x="242.85713"
       height="465.71429"
       width="125.71429"
       id="rect4140-2"
       style="opacity:0.72123892;fill:#6dd657;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <rect
       y="93.790779"
       x="399.99997"
       height="465.71429"
       width="125.71429"
       id="rect4140-9"
       style="opacity:0.72123892;fill:#5e76ff;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

If you don't want to do all the SVG coding yourself, you can use a library, like d3.js.

Here's an advanced example:
http://bl.ocks.org/emeeks/4531633

If you do it all on the server, you can convert the SVG into a PNG, and display this to the users (in case they still use IE8).
See here for more information:
Converting SVG to PNG using C#

Thanks @Stefan I tried working with SVG but the bars aren't static in my case. It's variable. So based on the data extracted from the database the bars should be displayed on the screen. Can it be achieved using SVG? I also found out Proportional Symbol Maps are used to display such query using pie charts inside the map. But I couldn't find any code to understand it — K C, Aug 10 '15 at 05:18
@K C: Yes, the bars aren't static. That's why you load the data with AJAX, and put the bars into the svg. You can either insert empty rectangles with height 0 and display: none, which you then change with javascript. Or you can save the rectangle's position in JavaScript, so you can dynamically add rectangles (as many as you need) at that position. — Stefan Steiger, Aug 13 '15 at 09:03
If you have "dynamic coordinates", you'll need a method or framework that can map/project your geocoordinates into SVG X + Y coordinates (like for example d3.js). This ain't simple, so I'd use d3.js, in order to not have to do it yourselfs. — Stefan Steiger, Aug 13 '15 at 09:06

Displaying bar chart with in the Map

1 Answers1