Project

General

Profile

Charting Library and Bootstrap 5 (Specifically stacked bar)

Added by Mark Travis 5 months ago

I'm getting close to implementing some reporting using charts and I'm curious how the Charting library interacts with other charting libraries based on Bootstrap 5.

I would like to create some stacked bar charts, but I don't specifically see that mentioned in the charting library.

Something like this would be perfect: https://think.design/services/data-visualization-data-design/stacked-bar-chart/


Replies (7)

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Matthias Van Ceulebroeck 5 months ago

Hello Mark,

I do not believe that this is currently something supported by Wt in a default implementation.

To facilitate this, you'll have to implement your own WAbstractItemModel and WAbstractItemView.

I'd probably look at using std::tuple to store datapoints, which will then indicate each section of the bar.

As for styling, that is currently handled completely separately from the theme, it's essentially now just a WPainter to which we render axis, and bars (or something else depending on the type of chart). As such it doesn't have any style classes per item we can change, and apply a theme to.

There are a lot of configurable options to change the chart's appearance, but they will all have to be made in code (e.g. setPalette), not CSS.

I hope this is helpful,
Matthias

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Mark Travis 5 months ago

Very helpful, thank you!

I noticed in the web-browser inspect mode that none of the data points to make the charts are delivered to the browser, so that they could be picked off to hand over to a package such as chart.js. It's a very tight Wt integration.

That would be an interesting project to expose the necessary elements to incorporate something like chart.js. Maybe once revenue starts flowing and I can hire some other programmers I could look at it again.

Maybe something for Wt V5.x

Thanks!

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Matthias Van Ceulebroeck 5 months ago

I believe it was set up like this, since many years ago having JS in the browser wasn't a given. So this avoids that possibility, and essentially guarantees output and consistency.

But indeed it is far from extensible.

I know for a fact that a colleague has worked with some chart JS library before, I'll ask around to see how they approach that, and update you on it soon.

Best,
Matthias

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Mark Travis 5 months ago

Hi Matthias! Yes, I'd love to get any information about how others have implemented Chart.js. Thanks!

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Matthias Van Ceulebroeck 4 months ago

Hello Mark,

I ask around, and they indeed did a custom implementation. How the implementation work right now is that:

  1. they use a certain library to visualize the data (say e.g. Chart.js)
  2. a wrapper (in JS) around that library was written, to easily manage the library
  3. a widget (in C++) was created that manages this wrapper, so the widget will offer certain methods to manage the data (this is both with a model or by manually defining a serie, that option is open to you, whichever is handiest for you) and add visuals/labels
  4. the widget (C++) also has a render(Wt::WFlags<Wt::RenderFlag>) override method. This manages the set-up of the JS object (on full render) or updates to the UI otherwise), this passes the data in the expected format managed by the wrapper (JS)

I hope this gives somewhat of an idea. I will look into creating a more plug-in approach, but will have to look into some existing libraries, and see how we can generically handle those.

Best,
Matthias

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Mark Travis 4 months ago

Thanks Matthias!

I created a fork in Wt to integrate D3js. It seems to be the least complicated to implement at a basic level as it's all self-contained in one library file. (But it will probably be the most complicated to extend to all of the functionality.)

I plan to use WLeafletMap as a guide as the wrappers and widgets seem to be about as similar as I can find at this moment.

If successful, it will be my first open-source contribution. (I've always been on the product management side in the past.)

Hopefully, I can get the basics in place (including the docs), and others can help extend it over time.

Will that work?

RE: Charting Library and Bootstrap 5 (Specifically stacked bar) - Added by Matthias Van Ceulebroeck 4 months ago

That's very interesting and I look forward to seeing what you can do with it!

I am not familiar with D3js (I'm not familiar with a lot of JS generally), but it looks like a very broad library that offers a lot. So from a glance, that looks great.

It's obviously a bit early to say whether this will be a good approach, that is generic enough for Wt. But I will be certain to discuss this matter further internally.

    (1-7/7)