How can I include a D3 (Scatterplot) Chart inside a SAPUI5 Control - d3.js

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

Related

Does kendo angular provides heat map chart?

Does kendo provide any way to implement heat map chart similar to highcharts heat map chart?( Highcharts heatmap demo example)
I just found this heatmap.component.ts in their Angular GitHub project. So, yes, it can be done with custom code.

Animated Webix chart

like other chart tools, is there any option to develop animated webix charts,
Animation like
When Loading rotation of Donut,
Click to Zoom,
Block Seperation in pie,
Label Ruler in pie,
I am afraid that Webix Charts are not the best choice if you want charts with animation effects and other visually complex things. Webix Charts are great for loading, presenting, grouping, filtering data, and for CRUD operations on them, but they are not as sophisticated as charts from some other libraries that are dedicated to charts specifically.
Webix allows for third-party components integration. That's why I would recommend you to use some other library charts and integrate them into your Webix UI. You can use some of the ready-made integrations from this repository and you are very welcome to contribute your integration. You can use these guides in the process:
https://docs.webix.com/desktop__chart_integration.html
https://blog.webix.com/using-third-party-libraries-with-webix-ui/

nvd3: control guideline programmatically

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?

How to make d3.js charts interact with dc.js

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.

combining dimple.js with d3.js

I want to add zooming functionality using d3.js in a bar chart created using dimple.js. See following link for what I did so far. http://jsbin.com/rejof/2/edit
I want to combine both zooming functionality in dimple chart. Thanks in advance.
I don't think you can easily do this, you would probably need to modify the dimple source code as I believe zooming relies on a different dom structure to the one dimple uses. You might find it easier to recreate the chart you require in raw d3, rather than modifying a dimple chart to zoom. Of course I'd love to be proven wrong.

Resources