Hide Chart.js bubble points based on filtering - chart.js

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

Related

PowerApps: Filter by user no delegation

Need some help with PowerApps - I am trying to filter the gallery where the Person column (ROMEmail) equals the logged in user.
This code is working, but the blue circle of death comes up - whilst in test at the moment, i dont have over 500 records, but will do within a month of trialling this
Any ideas on how to workaround this? Using a collection or variable perhaps? I haven't really used these yet so a detailed resolution would be greatly appreciated.
SortByColumns(Filter('Reviews', StartsWith(LocationName, TextSearchBox1.Text),ROMEmail.Email = User().Email), "Modified", If(SortDescending1, Descending, Ascending))
A collection would be your best choice.
To add a collection in your app replace the code where you grab your data by something like this:
ClearCollect(localData,'Reviews')
This collects all the data in a locally collection. The ClearCollect replaces all your data by the new ones.
After this you can sort and filter directly on your collection. For example in a gallery. Using your code it would look like this:
SortByColumns(Filter(localData, StartsWith(LocationName, TextSearchBox1.Text),ROMEmail.Email = User().Email), "Modified", If(SortDescending1, Descending, Ascending))

Selectable cells in UITableView with ProMotion

I’m getting crazy with Pro Motion table and I cannot find any discussion about this online.
I’m using a PM::TableScreen and I need to have selectable table rows. I manage the raw selection in an array but I don’t know how can I get the cell object to call cell.accessoryType = UITableViewCellAccessoryCheckmark if is selected or cell.accessoryType = UITableViewCellAccessoryNone if not selected.
Here is the gist of my screen: I try to intercept the cell passing a value in the arguments (row) but I cannot find a method to get the cell object.
In my original idea the place for the selection is inside my tapped_cell method byt maybe there is a better way to manage a multiselection.
My Gist
You don't want to memoize the table data. I've created a pull request with the fix:
https://github.com/robypez/rm_quiz/pull/1
Hard to summarize here, although I know Stackoverflow doesn't like us relying on links.

Hide tooltip for Google Visualization API GeoChart

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/

Google Charts: Bar chart labels are reversed

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

Adding and removing parts from pie with google visualization

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).