I'm experimenting with Google's GeoCharts. I have state data and city data that I want to display over the city data. This means I want to use the geochart regions and markers display mode at the same time. Can this be done, or faked? I can't seem to find a way but was wondering if anyone else has had success.
As stated in documentation mode parameter could be region or marker. So they could not be used together. I would recommend you to try jVectorMap library which supports such kind of behavior.
with some CSS hacking you can use the markers mode and color the region you want.
It's not easy, you would have to know wich 'child' path of the svg map you want to color and make advanced css rules.
For example:
#map_canvas path:nth-child(57) {
fill:#cccccc;
}
Check out the last example of this page, from my website:
http://cmoreira.net/interactive-world-maps-demo/advanced-customization/
Hope it helps!
Cheers
VectorWorkz GeoChart lets you define region color binding and marker binding within the same instance, take a look at the VectorWorkz online demo.
I could do it by overlapping two charts one for region, one for markers
(using absolute divs with z-index)
you need to use transparent color as style for the marker layer
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
defaultColor: 'transparent'
and put it on the top layer
or maybe put one chart with type "marker" over another of type "region" ?
:)
Related
I understand that I can get down to the metro level using the following in my options:
region: 'US-602',
resolution: 'metros',
But our client is asking for an even more specific map. First, they want it to be a square and every Geochart I've seen or tried in Google has been a fixed rectangle (fixed as in same proportion - I understand you can change the width and height). And I don't want to turn off 'keepAspectRatio' to make it a square since that will only stretch the map.
Is there any way I can specify specific coordinates (or do anything else) in Geochart to create my own custom region? I would think Google would allow you to customize something like region instead of pick from a list of fixed options.
Or is there any other plugin that will allow me to do this?
you can create custom maps for the GeoChart, however it gets a tad tricky. GeoChart expects your maps to be named in a certain way and be in a certain format, so you would have to reverse engineer how the maps are structured in order to draw your own. You can set to your own maps source by writing
google.visualization.GeoChart.setMapsSource(newSourceUrl).
read more
I'm using this nice tool pod to generate ODT-Files in my django-application. Is there a way to change the backgroundcolor of a table-cell based on its value?
Sure, in LibreOffice its easily found on the menu.
Format -> Conditional Formatting.
You could generate a tag for the color in your django application and then have a post process LibreOffic Writer macro going through the tags and change the background color of the cells accordingly.
I'm working with the Visualization API and column chart package for Google Charts. I can generate a graph with the data I want, but can I modify parts of the chart after the page has loaded? Specifically, I want to change the color of one column. I've done this by editing the DOM in Chrome's Element's Panel tool, but is there a way I can actually code this into my page, or am I out of luck? Thanks!
I had a similar challenge. In my case I needed a different color for each bar in a bar chart, something that the vis api doesn't support.
I ended up with this (using jquery, but no reason why it can't be done just using native dom functions)
statusCols btw is just an array of html colors...
function colorBars(){
$("#masterstatus g rect[fill='#3366cc']").each(function(){$(this).attr("bar", 'true')})
$("#masterstatus g rect[bar='true']").each(function(barNo){
$(this).attr("fill", statusCols[barNo]);
});
}
The secret (as it sounds like you have already discovered) is in identifying the dom element to change, that's the $("#masterstatus g rect[fill='#3366cc']") bit - I'm just selecting bars in the default color and iterating through them, in your case you want to pic an ordinal (eg the third one in the collection)
Hope that helps.
Actually I hope even more that someone else comes up with a better way...
i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!
I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?
In the Configuration Options of the chart, specify
backgroundColor: { fill:'transparent' }
This worked for me in Chrome and Firefox.
It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.
Setting a transparent background for Google Charts:
// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};
JSFIDDLE DEMO
backgroundColor: "00000000" worked for me.
If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.
fill-opacity="0.0"
Example:
$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');
Use the eq:() selector to select the rectangle you want to be transparent.
On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".
When you paste the chart, you can still choose to link it, and it will paste with the background transparent.