https://echarts.apache.org/examples/en/editor.html?c=circle-packing-with-d3
i am trying to implement this Circular packing example found on Apache Echarts into my react web app.
With the rest of the Echart examples, implementing the Echarts component is easy - but i think this is a custom example. Can you help? Here is the example in js
https://echarts.apache.org/examples/en/editor.html?c=circle-packing-with-d3
Also, what since it is custom - what sort of Api stuff does it follow? Is it like a treemap since it takes the same dataset?
Related
I'm working on a React Native project where I want to implement a layout that has auto placing functionality while fitting all the children as tightly as possible. It just happens that CSS has a wonderful feature that allows grids to autoplace children, sadly React Native doesn't support CSS grid. I've seen a variety of React packages that seem to do this, but there's no implementation for React Native. Examples for React are:
react-grid-layout, Muuri, bin-packing-grid.
I have managed to get the items sorted using a binary packing algorithm, but the visualization is still an issue I can't seem to get working.
My question: is there a package for React Native that can do this or is there an algorithm for the visualization of a binary packed item array that works on React Native?
The grid should be able to auto place children as following. https://i.ibb.co/H72mXRG/Whats-App-Image-2022-07-09-at-2-05-23-AM.jpg
I also thought about using a grid that would work with coordinates (X and Y position), but I couldn't find a working example for React Native. This would also be a viable option.
Any clues in the right direction would be much appreciated.
I have finally found a package that does this. The name is autoresponsive-react-native.
Docs, Github. Little outdated, but works perfectly. No Typescript support though.
This package (autoresponsive-react-native) supports platform independent handling for grids. Since the core functionality is independent from the visualization, it works on multiple platforms
This is the graph I want to replicate for a react application
This is the data
I could not find any implement using the "recharts" library online. If it's not possible or feasible with recharts, and solution with d3.js would be great.
i need a javascript plugin can design an dynamic IVR diagram and in output can get object for pass to server side.
i found mxgraph but not for IVR.
Here is a sample IVR app: https://gojs.net/latest/samples/IVRtree.html
Call diagram.model.toJson() to save it as JSON-formatted text.
I don't see why mxGraph would not work for this kind of task. In fact any reasonable graph drawing library should be able to able to do that.
I know for sure that you can easily implement great looking IVR diagrams (which are mostly just simple trees with a possibly dynamic automatic layout and a custom visualization for the nodes) with yFiles for HTML. That library has been created specifically to be highly extensible and as such allows for easily adding your own specific visualization for nodes and edges. Also trees and "near-tree" can easily be laid out automatically and you can create a dynamic interactive visualization of such a tree like in this decision tree demo.
Disclaimer: I work for the company that creates the latter of the above mentioned libraries, but I do not represent my employer on SO.
There are many libraries available for IVR diagrams. You can use d3.js, Gojs and JointJs.
In my first ever react app, I'm using ant.design as front-end library. Now I need to create different sort of graphs especially pie charts in my app. So I explored components of ant.design but didn't get any good option in this regard.
Is that possible to create charts/graphs especially pie chart using any of antdesign component? If not then what is the best suited solution in this regard?
If you want to stick with the Ant team there is AntV which is very capable, but does not have React components and (like Ant.Design 6 months ago) only has Chinese documentation. Browsing the docs using Chrome auto-translate works very well, however.
Then there are many JS charting packages with React wrappers:
https://github.com/fraserxu/react-chartist
https://github.com/reactjs/react-chartjs
http://www.fusioncharts.com/react-charts/#/demos/ex1
...etc.
For a more light-weight React-first solution go with
https://github.com/recharts/recharts
https://github.com/fundkis/reactchart
Is it possible to use SAPUI5 together with chart.js and also use a odatamodel as input for the chart?
Would be also nice if there are any example how to implement it.
I know UI5 has also possibility to plot charts but the are very poor.
I want plot a chart with different background color to higlight some data.
Similar to this
To answer your question: It is possible and a similar implementation was made in the past.
I'm reffering to SAPUI5 custom controls which implemented a subset of d3.js on which chart.js is based. Since this implementation is two years old, it probably won't work with the most recent UI5 version (1.34.6), but there is definitly some value for your implementation in reading the code and the SCN article for it.
I won't share an implementation example here since it would require a complete implementation of a custom element like Qualiture mentioned.