We have multiple charts developed in d3.js. We are creating a dashboard where user can add multiple charts which will be visible in one view.
Is is possible to create interactivity between these charts and dc.js? Or do we need to develop these charts in dc.js again?
Please suggest an alternate in case of No.
Related
I want to create my own chart with d3.js and use it with dc.js such that I can interact with the chart along with other charts with crossfilter support. Is there any way to do so?
To be exact I want to show a graph like in this.
I'm working on a project where I want to represent different data with the same date range on x-axis using nvd3 (angular).
My idea is to synchronize guideline among different charts and onmousemove or using a slider I want to show programmatically guideline with a tooltip in each chart (e.g. like heroku does)
Can anyone give a hint to a solution or if it's possible to control interactive guideline programmatically?
I'm trying to implement a scatter plot chart chart inside an SAPUI5 application. I've done some research with other charting frameworks that are more common with SAP (Vizframe), but they are limiting in its supported features (ex: vizframe doesn't support a regression line).
I cannot find an easy way to integrate a d3 chart into a SAPUI5 control. Can anyone provide some guidance on how this can be accomplished? Examples help!
Here's the chart I'm trying to implement:
https://bl.ocks.org/ctufts/298bfe4b11989960eeeecc9394e9f118
Best way is to implement your own custom control based on D3. Library is already available at the SAPUI5 resources here;
jQuery.sap.require("sap/ui/thirdparty/d3");
Some examples;
http://jsbin.com/zutamig/edit
http://jsbin.com/hacuw/1/edit?html,output
https://blogs.sap.com/2014/07/17/custom-sapui5-visualization-controls-with-d3js/
Chart library based on ChartJS, if you want to check;
https://github.com/SAP/openui5-charting-custom-controls
Developing Custom Controls;
https://www.youtube.com/watch?v=W3Qkev2yk9w
https://www.youtube.com/watch?v=Nw8SnXZFqrs
Building Custom Controls to Visualize Data;
https://www.youtube.com/watch?v=cY-WCWC1qxE
I'm trying to refactor some custom d3 code that I wrote to render a series of crossfilter-driven charts by bringing in dc.js.
My main problem is that I have some chart types that are not supported by dc.js (e.g. a Sunburst Partition) and I'm trying to figure out how to render them in conjunction with a dc.js chart group.
Filtering a single dc.js chart will automatically render / redraw all other charts belonging to the same chartGroup. Is it possible to somehow hook into that global re-render event, so that I can re-draw the non-dc charts at the same time?
I understand that there are listeners on each individual chart, e.g. chart.on("postRender", function(chart){...}) but there doesn't seem to be a way to hook into re-rendering a group of charts. Is there a good pattern by which this could be accomplished?
The "right" way to do this is to register your chart in the dc registry with dc.registerChart
You just need to implement .redraw() and .render() on some object (your chart or a wrapper), and pass that object as the first argument.
Put it in the same group (second arg) as the charts it should respond to.
render() creates the dom elements from scratch, and redraw() updates them when the data changes.
Depending on how the chart is used, you may also have to implement .filterAll() and .anchorName()
I need to create a multibar chart using NVD3.js. All the example are showing bars belongs to the same Y1-Axis. I need to show bar1 for Y1-Axis and bar2 for Y2-axis.
Is it possible? How can I achieve it?
It's not possible with NVD3 as it's built for re-usability. You could try drawing multiple bar charts alongside each other or try using pure d3.
Have not done/tried stuff like this.
If you manage to find a solution, please do share your solution. It's interesting.
Update
Have you noticed how the charts in the NVD3 homepage work. All 4 charts change based on the selection of categories on the MultiBarChart legend. You could try something similar.