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
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#
Related
I'm attempting to set a custom value for an exported SVG, using paper.js.
For example, I'm exporting an image, resulting in something like:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="850" height="78" ...
I'd like to be able to replace the with and height with some other values, like
width="20cm" height="1cm"
so that my image gets resized properly, once sent to some device, like a printer.
Is it possible to do that? How?
(not sure this question to be related to Printing a Exported svg of original size in paper.js )
I've been doing a tutorial on Treehouse on responsive web design. At this point in the tutorial we are asked to convert an image to an svg so it can scale fully responsively.
Rather than use Adobe Illustrator, which I don't own, I used the freeware Inkscape. Once the image is converted we are asked to open the image in a text editor and remove the height and width requirements from the svg declaration and add the object selector to our max width rule to our style css:
img, object {
max-width: 100%;
}
However, after removing height and width the image is not responsive but instead oddly clipped like so:
Does anyone know what error I have made? Or what I should have removed?
Sorry if the question has been asked before, I can't find it.
edit1, the code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
width="319"
height="177"
sodipodi:docname="logo.gif">
<metadata
id="metadata2991">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs2989" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview2987"
showgrid="false"
inkscape:zoom="0.94984326"
inkscape:cx="159.5"
inkscape:cy="88.5"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg2985" />
<image
width="319"
height="177"
xlink:href="
It is the "height" and "width" in the first SVG tag that I have removed.
Inkscape now provides an option to enable viewbox if you save the file as "optimized svg".
Very handy!
The fact that you have just put a raster image in your SVG isn't the actual reason for what you are seeing.
All it means is that when the scaling of the SVG works properly (see below), you won't see the benefits of using vector artwork. When you scale up vector artwork, you don't get the "jaggies" (blockiness) that you get when scaling up bitmaps. If your SVG just contains a bitmap, it is pretty much the same as just using the bitmap.
The actual problem here is that Inkscape doesn't include a viewBox attribute in the SVGs it saves.
When you remove the "width" and "height" attributes, they default to "100%". Which tells the browser to scale the SVG to fit the parent container. Unfortunately for this scaling to work, the browser needs to know what the dimensions of the SVG content are. That is what the viewBox attribute is for.
Illustrator adds the viewBox attribute, Inkscape does not.
To see what I mean, add the following to your <svg> tag after removing width and height:
viewBox="0 0 319 177"
You should find that your image is no longer clipped, and will resize when the page is resized.
As you can read it here ( and for completing qed's answer):
Select the object(s) to export
Open the document properties window ( Ctrl+Shift+D)
Select "Resize page to drawing or selection"
File > Save As Copy...
Select Optimized SVG as the format
You've done something wrong if you're "converting" raster to vector graphics. Not having used Inkscape, I can't say, but at least according to Wikipedia it's not capable of performing conversions.
You haven't converted anything, your image is in Graphics Interchange Format!
To see what a "real" SVG file looks like, open up the example from the wiki page.
Scenario: I need to replicate the solar power plant field configuration on web page(set of rectangles for mirrors and receiver).
I need to dynamically add rectangles to webpages with given X,Y,width and height parameters using c#.net. I will receive the user input a set of coordinates for rectangles as X,Y full page graph.
Eg: (-42.34,-240.34,2.25,16.65)
(10.34,-140.34,10.25,5.65)
The coordinates I receive from user input are related to X & Y full page graph that includes negative coordinates also. But the DrawRectangle accepts the X & Y values as positive and only integer values.
My query is how should I relate the user input X & Y Coords ( -ve & +ve) on the web page and float width values to integer?
When I try to convert to Int, the rectangles are either getting overlapped or not displaying at all. The set of input values for rectangles are closer and there is difference in point values only.
Given the objective (and ignoring the required Graphic.DrawRectangle), Your best bet is to use SVG. The SVG format is actually a XML file that describes the image you want, so you can generate it on server side and cache it as text (either on clint or server), also the SVG uses vectorial graphics (as the name suggests*) wich allows for arbitrary resolution.
*: SVG stands for Scalable Vector Graphics.
I recommend you this tutorial at 3w.org on SVG to get you started.
Here are examples of a SVG:
Inline SVG in HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG test</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="50" height="30" />
</svg>
</body>
</html>
SVG in img element
rectangle.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="50" height="30" />
</svg>
index.htm
<!DOCTYPE html>
<html>
<head>
<title>SVG test</title>
</head>
<body>
<img src="rectangle.svg" alt="rectangle" />
</body>
</html>
I recommend the second option (separate file). Note that this are woking drafts, well supported working draft. So, check browser compatibility.
It may be the case that you would prefer not to output the SVG text directly, in that case, check Drawing SVG in .NET/C#? here, at StackOverflow.
We have an online designer that uses Raphael to manipulate SVGs. We're preparing a large library of clip art to use for this, but have run into a very strange problem.
Some of the SVGs are running into a problem where they render fine in a browser, but once we pull them into Raphael they become completely unrecognizable.
Here's an image showing the effect:
And here's the code for the svg (generated by an illustrator export from a .ai file):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="83.641px" viewBox="0 0 100 83.641" enable-background="new 0 0 100 83.641" xml:space="preserve">
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0
58.263,0.056 "/>
</svg>
Appears that your process for importing files into a path might be flawed, or, some unaccounted-for transformations have been applied. For example, this code works fine:
var paper = Raphael("paper");
paper.path(
"M58.263,0.056 L100,41.85 L58.263,83.641 L30.662,83.641 " +
"L62.438,51.866 L0,51.866 L0,31.611 L62.213,31.611 30.605,0"
).attr( { 'fill': 'black' } );
See http://jsfiddle.net/sgMH6/
How do you "pull" these files into Raphael? What's your process/code for that?
Edit: more information; import plugin is https://github.com/wout/raphael-svg-import/blob/master/raphael-svg-import.js
It appears that the plugin you're using might have a faulty polygon implementation routine. This is a hunch, but, seems like 0 numbers are not being processed correctly. Your SVG graphic does contain some zero coordinates.
In function Raphael.fn.polygon, there is a section that goes like this:
var d = parseFloat(c[j]);
if (d)
poly.push(d);
If you change that to this, instead, it might work for you:
var d = parseFloat(c[j]);
if (!d) d = 0;
poly.push(d);
This is a very rudimentary fix and it might possibly break other things. At any rate, take a look at a working example with a modified plugin fix - http://jsfiddle.net/pkzGJ/ ; if this is indeed a bug, you should submit it to the plugin author.
I am starting to learn RaphaelJS, but it does seem to be a steep learning curve as I am not very versed in javascript. But it seems like such a good library that I am willing to put the time in to learning it.
What I would like to know is:
How can one use an existing vector image in RaphaelJS
(If I download a "vector" image can I tell RaphaelJS to draw the coordinates?)
Is there a way to convert an image (jpg, gif or whatever) into a vector graphic that RaphaelJS can use.
My confusion is that on the sample pages the images are drawn in coordinates which makes sense to me. However, if a download a vector image from the net, where are the coordinates?
I am aiming to make images on my web page that are clickable, much like the RaphaelJS example of the map of Australia that has a hover event on it.
The easiest vector image format to read is svg since svg is XML and XML is just plain text.
Convert your vector image to svg using something like Illustrator or Inkscape and then open it in your text editor. You'll find that most of the shapes like <path /> and <rect /> have a direct equivalence in Raphael. For example, the <path /> object defines path coordinates in its d attribute and it has the same syntax as paths in Raphael:
<path
style="fill:none;stroke:#000000;stroke-width:12"
d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
/>
You can convert that to Raphael's:
var path = paper.path(
"m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
);
path.attr({fill:'none',stroke:'#000000';'stroke-width':12});
Take note though of any transformations applied to objects and groups (the <g /> element), you'll have to repeat them in Raphael. Say for example you see the following:
<path
style="fill:none;stroke:#000000;stroke-width:12"
d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
transform="translate(-124,370)"
/>
then after creating the path in Raphael you'll need to apply the translate():
path.translate(-124,370);
You can probably write a script to convert svg files to Raphael syntax or load the svg file in the browser as text and use the browser's XML DOM parser to process it and draw it using Raphael.