I use such a map on my website, it's created by amCharts:
All regions are SVG path elements. I'm thinking how to put a chart.js (or any other) pie chart on each of them. The chart of chart.js is a canvas element. Is there any easy solution to achieve it? I could also change the map provider if neccessary.
This should be the effect:
There's a demo on the AmCharts website that shows how to do that. You essentially need to create image markers that you can place on your map using latitude and longitude coordinates and use the positionChanged event to create/update custom external divs which contain your pie charts.
Related
Highmaps provides a way to implement map with overlaid pie charts, is there a way to change pie with column?
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
The mappie series is not a part of Highcharts core. It is a custom series created with Highcharts.seriesType function (you can find it here: http://code.highcharts.com/highcharts.src.js) at the beginning of the demo. You can modify provided example and create series such as mapcolumn. Although, map is not very readable and tooltip does not work correctly when rendering columns instead of pies. You give it a try and create your own custom series.
Example:
http://jsfiddle.net/wsuhws7c/
I'm working on a project that's using maps to represent a Geo-locations.
each when I hover on any location it should bring a magnifying glass with a donut chart inside of it
I can do this by converting the donut chart from canvas to image and add it to OpenLayer vector as image.
But, the problem is this donut chart may contain a real-time data which could change each second.
So, there is anyway to directly add canvas to vector or similar way to do this.
I'm using Google Image Charts (yes, I know it's deprecated :-)) to draw circular icons on a Google Map, i.e.:
http://chart.apis.google.com/chart?cht=it&chs=48x48&chco=33FF33,000000ff,ffffff01&chl=a&chx=000000,0&chf=bg,s,00000000&ext=.png
Is there a way to draw square icons instead? Unfortunately all references to "cht=it" chart type seems to be disappeared from the Net.
Is there an alternative to Google Image Charts for drawing dynamic icons on a Google Map? I need to control dimensions, color, shape and label.
Is there an alternative to Google Image Charts for drawing dynamic
icons on a Google Map? I need to control dimensions, color, shape and
label.
Yes there is. What you're looking for is Drawing on the Map. Here you can use your custom icons, whatever shape they maybe.
Some actual examples for the things you've mentioned:
-Labels example
-Square shapes
-Custom shapes
-Draw on the Map
I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com
Does any one know if it is possible to use the Default Google Scatter Chart in the Google Visualizations Gallery to draw a scatter chart that has both a series with points only, a series with a line of best fit and on top of this a set of lines across the chart indicating limits. i.e. at +/- 20% etc.
The chart we need is actually a Control Chart with multiple series and individual formatting of each series displayed on the chart. i.e some series with only points other series with a line of best fit.
Does any one know of a Control Chart that has already been done using the Google Visualization API?
After working with the google visualization api for a while and searching the web I would have to say that the answer here is no.
You would have to build your own custom chart and from working with the api for a while I would rather do this with another charting library like jqPlot.
You can make separate line sets in the google scatterchart. The examples are on the scatterchart page.
http://code.google.com/apis/chart/docs/gallery/scatter_charts.html