I am using the angularjs wrapper of the Chartjs. I am updating the graph when the new data receive from a push event program. Also I am coloring in-between selected graph data sets.
When I go to another page and come back to the graph page again, the opacity of the color of the dataset getting increased and ultimately opacity goes away.
It seems to me that the data set colors are doesn't get cleared when I revisit the page. However this issue get solved when I refresh the page.
How can I clear the previous data set details when I revisit.
I tried the chart.clear() but didn't work
angular-chartjs is outdated and don't really work with the newer versions of chartJS.
Check this issue out: #677.
The issuer gives an example on how to implement chartJS with a wrapper. You need to be aware of the fact that chartJS alone don't handle the colors anymore. You need to set them on your own.
On the other hand if you really don't want to do it on your own you could try my wrapper implementation for chartJS.
Related
i want to make a react app that allows to filter a sankey-diagram with a slider.
I'm rather new to react, so i'm still a bit overwhelmed.
This is the current state:
https://codesandbox.io/s/react-d3-sankey-3gbfjh
The code for the sankey Diagram is based on the example on observable: https://observablehq.com/#d3/sankey
There are several issues at the moment:
The filtered data is only available after the slider is used once
The plot does not change even though the data does
The second part is solved if i add the data to the dependency array in the useEffect hook i use to draw the chart, then the new chart is however drawn on top of the previous one.
I'm glad for any help with this.
I got it to work now. As i figured above the data should be included in the dependency array. To clear the plot when changing the data i use this code:
svg.selectAll("*").remove();
My approach appears to be similiar to this actually:
https://blog.griddynamics.com/using-d3-js-with-react-js-an-8-step-comprehensive-manual/
I'm working with React Force Graph (2D - https://github.com/vasturiano/react-force-graph) and trying to display custom tooltip on node hover.
This custom Tooltip (dummy component) would display data that's not returned by node - I'd like to add some details to the tooltip, and those are not stored in node data that's returned for example by onNodeHover).
I've seen that I could use nodeLabel which displays simple text label... but it accepts only strings and some simple string interpolations. Unfortunately I can't pass a component as params.
Does anyone know what would be a good approach to this? How this could be handled? Extra points for working examples :D
So here's the answer:
nodeLabel doesn't accept React Node but can easily accept string. So workaround for that problem is just passing the whole stringified html code to nodeLabel and RFG will handle that! This is the best solution I believe (althou native RFG tooltip doesn't support left/right - top/bottom switching in case tooltip would be cut by the edge of screen, but thats minor problem).
other solution that I wouldn't recommend would be to create useCursorPosition and whenever onNodeHover returns something else than null we can set state of displayNode to true (and display it conditionally based on this state) in positions returned by useCursorPosition. This solution is flaky thou, because sometimes onNodeHover doesn't return null I user scrolls fast outside the canvas boundaries (hence the tooltip stays displayed forever). In this solution it's also recommended to use requestAnimationFrame to limit the listener on cursor position.
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I've created a React Application with a grid that you can filter and I used Griddle for my grid and then added a control that shows the number of visible rows when filtering. However, when filtering there is about a 1/2 second delay from when I calculate the new new values to write out and when the update is done by React. As you can see in the gif below the console is writing out logging in my code that goes to the bottom of the stack and then from there it's all React code.
I profiled this issue in chrome and the results of that are shown in the image below. The top two calls are the last parts of my code. As you can see that code executes quickly and then there is 1/2 a second spent doing the Mixin.closeall call. Any ideas on what could be causing this?