Complex charting solution required

[Meenakshise]

I would like to build a report of the sample which I have attached. Can you please tell me if this is possible using D3.
In my report lots of charts are displayed. Like 1 for Heart Rate, Temperature, Respiration Rate and so on. I refer to this as a chart section below.

Some of the features that I require in my reports are mentioned below. Chart should be able to behave as a chart to display various chart types along with that it should also be able to display as a tabular view to display data in each cell. Some sections display charts like line chart or bar chart or combination of more than 2 chart types in a single chart or tabular format.
I have attached a PDF which has a sample type of charts that I require along with the below lists indicated in that chart for more clarity.

1. The Chart section should be able to show in the form of a grid.
2. In each grid cell I should be able to show a text - Tabular chart.
3. Should be able to strikethrough a column completely with a red line
4. Should be able to leave a vertical line space inside the chart based upon some logical conditions that we have (for ex, if the patient has a 24 hours of gap between the observations then we should show a vertical gap)
5. Should be able to add a legend on the right side. Sometimes the legend should be mapped to a chart section (in such case legend should be aligned against the chart section row) , sometimes it can be common to all the chart sections. Here the chart section I refer to as heart rate, respiration rate and so on.
6. I should be able to show multiple graph types in a single chart section - refer multiplegraphs-1 attachment
7. In the chart section the ranges are shown as a separate label which needs to be aligned to the chart grid rows. Is this possible within the chart or we need a separate control which needs to be aligned to the chart rows.
8. The chart section should not span across pages.
9. Multiple Y-axis. Not sure if we will have multiple x-axis. But multiple y-axis.
10. Does it support all the browsers and mobile devices like android and ios?
11. Can we have an interactive chart?
12. Does it have 3D support?
13. Can we place an icon inside the chart grid cell?
14. Can we show an overlay on the chart?
15. Can we write a display a letter with an exponential like A to the power of 2
16. To how much extent can we compress the chart to fit more pages and the font is still visible and looks nice
17. Zooming option
18. Panning

horizontal scrolling- this could be a separate chart altogether. please refer horizontal-scrolling-chart attachment
I have marked the numbers in the chart. Please look at the chart. And let me know if all these are possible or not. If possible, can you build a code pen project of the sample report which I have attached -ptn0445789-EWSReport-2 (1) . I can play around with that. May be one in client side with multiple pages to see the performance impact as well

I have attached 2 images and 2 pdf files. Please have a look at all of them. Mainly at the PDFs first

ptn0445789-EWSReport-2 (1).pdf

[curran]

Yes, it is possible with D3 (perhaps with the exception of "Does it have 3D support?").

It's unclear who the audience for your question is. Are you looking to hire a contractor to work with? This looks more like a statement of work than a question about the library.

[Meenakshise]

Hi @curran

No, we are building the report for one of our client. Can we get into a chat? Because it makes more easier to check if all my requirements will be fulfilled by your library or not?

Can we build a report which is more than 50 to 60 pages and each page you have at least 6 to 7 chart. Will it result in any performances issues?

Can I have horizontal scrolling in the chart?

Is your library completely into SVG or do you support canvas as well?

Which is good? SVG or canvas?

Building a very big report using many charts which are SVG images will have any performance issues? How does it all works when we export it to a pdf?

Is it possible to generate a below attached report which is a combination of html + chart and export it to a pdf? If you look at this report it has many more charts. The 3rd column in the report is the chart which is represented in the form of grid and they are either line chart or a tabular data or bar chart.

How the D3 library different from Canvas Library ?

ptn0445789-EWSReport-2 (1).pdf

[curran]

Hi @Meenakshise ,

we are building the report for one of our client. Can we get into a chat? Because it makes more easier to check if all my requirements will be fulfilled by your library or not?

We are in a chat here. It sounds like you are asking for free professional services? If you'd like to book a paid call with me, please reach out separately to curran@datavis.tech.

Can we build a report which is more than 50 to 60 pages and each page you have at least 6 to 7 chart. Will it result in any performances issues?

Are these "pages" Web pages? Or pages of a PDF? If you want 60 different Web pages, surely you can create a Web site with 60 different pages using some Web framework. That is outside the scope of D3.

Can I have horizontal scrolling in the chart?

It depends what you mean, but probably yes, you can add a horizontal scrollbar, or use brushing/zooming on the chart itself.

Is your library completely into SVG or do you support canvas as well?

I would not call it "my library". D3 is agnostic to how things get rendered, so yes it can be paired with Canvas or SVG.

Which is good? SVG or canvas?

That depends on your requirements. SVG is usually great. Sometimes if there are performance problems with SVG, Canvas may be a better solution, but has drawbacks of being a raster-based system (for example it doesn't look good when you print it on paper, and you need custom code to deal with Hi-DPI displays).

Building a very big report using many charts which are SVG images will have any performance issues? How does it all works when we export it to a pdf?

I mean, this all depends on how you organize the page(s). The design choice of having one large Web page that scrolls vertically for 60 pages worth of content is itself questionable and may have performance problems independently of D3 usage. Creating PDFs from Web pages is a whole other ball game that is also out of scope for D3 itself.

Is it possible to generate a below attached report which is a combination of html + chart and export it to a pdf? If you look at this report it has many more charts. The 3rd column in the report is the chart which is represented in the form of grid and they are either line chart or a tabular data or bar chart.

Probably, yes. This is a custom software development ask. It probably makes sense to hire someone to spend 5-10 hours evaluating this scope of work.

How the D3 library different from Canvas Library ?

D3 is a JavaScript library. Canvas is not a JavaScript library but rather a Web standard. See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

[Meenakshise]

Thanks for the reply @curran . Yes it is a web page which is a combination of html + css + charts. In each page I will have some 6 to 8 charts approximately. And you can think of building a report of 20 pages with each page having 6 to 8 pages. Will this have any performance impact or is it possible to build this web page and yes, I will be exporting this to a pdf as well.

Sometimes we also have a requirement to schedule few reports and then generate the report on that day and get the PDF and send it to the user. As this is kind of server side process? Is this possible? Any thoughts on this? Because the report has to be rendered in the browser and then it has to be exported to a pdf. How can this be done as it will be the back end code?

If we develop the report using D3 SVG and realize it has performance issues. How easy it is to change it to use D3 Canvas charts?

And D3 SVG and D3 canvas charts. what are the limitations in Canvas or vice versa?