How do I remove the legend that appears in the bottom of the Google geoChart? I know that if I don't pass data.setValue to the chart object it wont show, but I need them to populate the map. All I want to do is get rid of the colors. Any ideas?
See : http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Configuration_Options
"An object with members to configure various aspects of the legend, or 'none', if no legend should appear."
So basically, when you're passing your configuration options into the API, you want to include the following:
legend: 'none'
A simple example set of chart options would be:
var options = {
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']},
legend: 'none',
}
The modified version of the marker example provided by google on: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Examples
Set the option legend to none.
legend: 'none'
This hides the legend/colorAxis displayed at the left bottom corner of the chart.
So apparently there isn't a way to do this. If you are using google geoMap wich renders a Flash object then there is a simple property you set to false in the geoMap object to not render the legend on the bottom left. I did how ever using jQuery manage to remove it but that just doesn't flow nicely given that it has to exist in the DOM before you can remove it. If you are seeking to use a world map I strongly recommend jVecotor Map.
It renders exactly the same in old IE browsers and has less vectors in the map so it is faster to load since the DOM is not over saturated.
Related
I'm working with chart.js and I followed this to create a custom HTML legend.
The thing is, the hide/show functionality is not working. The first legend click hides the whole chart, while the others produce the error:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
so it traces back to t.getDatasetMeta.
I gotta say it's working great with line/bar charts, so its only my doughnut chart which breaks.
Let me know if you need more info.
Oh and thanks :P
EDIT: fiddle
The problem is that you have only one dataset and your code use the index of legend item clicked to hide datasets[index].
On the contrary you need to hide single item data as below:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
Check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/
I am using chartjs to draw a line chart. I am making these charts dynamically and there can be 2 to 10 charts depending on the different data types. Right now i want to update the chart when i click a button or a text. This update will change the min and max of the y-axes ticks. I have try to do it in the javascript console on one chart by doing this
myChart.options.scales.yAxes[0].ticks.min=some_value;
myChart.update();
but the problem is how would i change it when i click on a text or button. Is i have to make a legend?
this is my jsfiddle for a test run.
Any kind of help would be much appreciated.
You can use jQuery:
Add the jQuery library
Add a button, I added <button id="action">action</button>
Add a jQuery trigger that executes the 2 lines on click:
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
})
See: https://jsfiddle.net/gdqkLtc2/3/
I am creating a markers-based Geochart to display the location of schools. I have my data in a Google docs spreadsheet. I'm using 3 columns: lat, long and marker size. Currently, the tooltips display lat and long. Ideally, they would display information about each school instead but removing them would be fine, too. See what I have so far on jsfiddle.
Some of the other Google visualizations seem to allow a trigger:'none' option for tooltip (e.g., Pie Chart). Am I correct that there is no such thing for GeoChart?
It seems there's an experimental feature that allows assigning a tooltip role to a particular data column. I tried to use that to no avail.
I tried finding and hiding the tooltip div but I couldn't figure out how to access any elements in the iframe that contains the map. I'd be perfectly happy with this kind of solution if I could get it to work!
I realize this is not exactly what Geochart seems meant for but I'm using other Geochart region maps on the same page and would like to keep the same aesthetic.
I know this is an old question, but maybe it can still help.
Check out this example:
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('string','tooltip');
data.addColumn('number','Example');
data.addRows([[41.151636,-8.569336,'Portugal',{v:0,f:'test PT'}]]);
data.addRows([[ 39.059575,-98.789062,'USA',{v:1,f:'test US'}]]);
You can now also disable the tooltip adding, which was not previously available:
tooltip.trigger:'none';
Here is an example: http://jsfiddle.net/cmoreira/njB6m/
I create dinamically a chart for a website. I have a key/value map, I sort the values descending, and then create the url:
http://chart.googleapis.com/chart?
chs=400x200&cht=bhs&chbh=a&chdlp=l&chg=25,0&chma=0,0,0,5&chtt=Chart+test&
chxr=0,0,8,1&chds=0,8&chxt=t,y&
chd=t:8,5,3&
chxl=1:|Label_8|Label_5|Label_3
The values are set by chd=t:8,5,3, and the labels are set by chxl=1:|Label_8|Label_5|Label_3. However, in the chart image the labels are reversed.
I searched the documentation, but I didn't get why it is like this. Is it because I didn't set a value correctly, or is this the desired functionality?
I could reverse the label texts in chxl from code to be displayed how I want. Is this the right way?
i haven't found any mention about it either, but just made a try with -1 and it works. So use it like:
chxl=-1:|Label_8|Label_5|Label_3
Using the Pie Chart ( http://code.google.com/apis/visualization/documentation/gallery/piechart.html ), is there anyway I can add/remove a data after the page was loaded?
For example, after a user click on a link I want to be able to remove one of the parts of the pie and when he clicks another link I want to add a new part.
Thanks.
Joel
Yes, it is possible. I've thrown together an example on JsFiddle. It's probably not exactly how you would do in a production environment but it should give you an idea.
Basically what I do is:
Make the DataTable and PieChart accessible from outside the drawChart() function (or whatever your draw method is called)
Use the removeRow() method on the DataTable object
Redraw the chart.
Joel, I did what you asked using a ckeckbox instead of links. When the checkbox has unchecked, I called data.removeRow(data.getNumberOfRows()-1) as jensgram points out. And when it was checked I called addRow(theDeletedRow).
Just take care that the added/removed row should be the last one of the RataTable (removing the first row doesn't make all other elements in the array go up), to keep the deleted value in a variable so you can add it again later, and try to specify colors in your options, so each part of the pie doesn't change of color (it gives the appearance that it is a completelly different pie, instead of the same one without just one part).