Wt

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

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!

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

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

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

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?

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.