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/
Related
I am currently using Oracle APEX version 18.2.0.00.12 on Internet Explorer 11 and I am experiencing problems with getting my interactive grids to render correctly with regards to the widths of the columns.
I created an Interactive Grid on my page with the following query:
SELECT * FROM TABLE_NAME;
I did not change any of the default settings for the region; all I did was create the IG and then run the page.
When I run the page in IE, this is what I see:
Note: I have not yet added any data to the table.
The problem is that all of the columns are too narrow. However, when I run the same page in Google Chrome, this is what I see:
The columns are all sized proportionally in order to take up the full width of the IG, which is what I want.
I do not understand why the IG is rendered differently in IE versus Chrome. I know that I can set the Minimum Column Width for each column in the IG, but I would hate to do that every time I create an IG. Is there a different solution that would make the IG render in IE the same way that it does in Chrome?
Thank you in advance.
Actually remembered a solutuion. I cannot explain to you why this works, or how best to use it. But when I had this problem I sort of patched it by saving a default report.
But the strange thing, you had to manually adjust every column, even if it was to the same size as before, it just had to have been adjusted before the default report was saved. Then the grid would show as it should, but this isnt that good a solution since its only ok if everybody uses the same size display,..
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 Chart.js 2.5.0 and wondered if anyone could give me some pointers on the following functionality requirement.
I have a bubble chart that for arguments sake contains tweets.
I have a list view next to the chart that display the tweets. Connected to this is the ability to filter, so it will only display tweets with specific string value the user inputs.
What I would like to do is when the user utilities the filter, it only shows the bubbles corresponding to the filtered result. I am passing the pointIndex and the datSetIndex into my table. However, I am really struggling in working out how to update the chart so it hides the bubbles that are not matching the current filter output.
Any suggestions?
This doesnt solve my entire issue as Im using Vue which seems to be causing issues with updating the chart. However if you are using plain chart.js the blow fiddle gives one way to hide specific or all points
`https://jsfiddle.net/prmw1bm2/12`
it may help someone somewhere
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).