ChartView – 30 chart types, one class, zero excuses 📊

madru

Hi everyone,

It started innocently. I was porting an old app to Objo and needed one bar chart with rotated labels. Then the labels wanted values inside the bars. Then the bars wanted to be stacked. Then someone said "radar chart", and I stopped sleeping. 😅

The result is ChartView: a single, self-contained Canvas subclass with 30 chart types. No plugins, no dependencies, no native code. Copy one class into your project and you're done.

What's in the box:

Bars: grouped, stacked, 100 %, horizontal (all three). Values inside the bars, labels rotated when they don't fit.
Lines and areas: plain, smooth, stacked, 100 %.
The serious stuff: combo with a second axis, Pareto with the 80 % line (your quality manager will cry tears of joy), heatmap.

Round things: pie, doughnut, polar and spiral in three flavours each. Hit-testing is pixel-exact on every wedge, because I couldn't live with a tooltip that "roughly" knows where you are.
Funnel and pyramid: for when management wants to see the sales funnel and the org chart in the same meeting.

Scatter and bubble: bubble area is proportional to the value, so your 1.4 billion bubble finally looks as big as it should.
Candlestick, HLOC and Gantt, with a real date axis. Now you can watch your project deadline and your share price drop in the same window.

Radar: because some things can only be explained with a spider web.

And everything works everywhere:

tooltips on hover, fully styleable (colour, font, corners)
a SeriesClicked event
legends, subtitles, axis titles, German or English number formats
printing and PDF as vector graphics: zoom in to 6400 % and it's still sharp.

Usage is boring (in a good way):

Var chart As New ChartView
chart.Kind = ChartView.KindPareto
chart.Title = "Why we keep repainting things"
chart.SetLabels(["Pimples", "Scratches", "Dust", "Dents"])
chart.AddSeries("Failures", [191, 132, 45, 12])
Self.Add(chart)

That's it. It sorts, adds up, draws the cumulative line and makes you look clever.

License: free for private, educational and non-commercial use. 🎉
If you want to use it in a commercial app (you know who you are 😉), just send me a private message here in the forum, and we'll sort out a small commercial license. No lawyers, no paperwork, promise.
And if you simply like it: a quick "thanks" or a screenshot of ChartView in your app makes my day just as much. 😊

Feedback, bug reports and "can it also do X?" are very welcome.

Cheers

Guido (Madru)

chartview.zip

61kB

Richard_And_Trisha

@madru
I already include your chart view in my application. click on the label on top of the category summary and I can have pie, spiral, horizontal and vertical bar

Richard_And_Trisha

@madru how to close the chart floating on top of the window???

madru

Richard_And_Trisha

Hi, not really sure what you're referring to....

A chart created in code with Self.Add(chart) sits on top of everything else at its position. You can:

myChart.Visible = False          # hide it (show again with True)
Self.Remove(myChart)             # remove it from the window completely
myChart.SetBounds(x, y, w, h)    # or give it its own place, so it doesn't overlap

For a chart that should resize with the window, also set LockLeft, LockTop, LockRight and LockBottom as needed.

If it's something else, a screenshot would help.

Richard_And_Trisha

as you can see on the screen shot, click on the label in the middle listbox which is for category and the chart showup but I have not idea to close the chart...

so I think I can use either visible to false or do the remove(my chart)

will give it a try.

your chart view is brilliant and sooooo easy to use...

I remember using chart director from MBS and it was quite complicated to do

rgb

I buy a licence, 20 USD / EUR price are very good!

madru

1st update

chartkitdemo.objo

34kB

Richard_And_Trisha

got it working using Self.Remove(myChart) where MyChart is declare in the window level instead of method level

I use right click on the category label to pop up the context menu and left click to close the chart!!!

by the way I already using you new update with an new extra page for charts

madru

Richard_And_Trisha

OK, got it. How about something like:

AddHandler myChart.LabelClicked, AddressOf OnLabelClicked

Sub OnLabelClicked(index As Integer, label As String, isRightClick As Boolean)
  If isRightClick Then
    ShowMyMenu(label)          ' context menu for this category
  Else
    Self.Remove(myChart)       ' close the chart
  End If
End Sub

will add it later today ....

madru

2nd update

Event LabelClicked(index As Integer, label As String, isRightClick As Boolean)
Event ChartContextClick(x As Double, y As Double, seriesName As String, index As Integer)

LabelClicked fires on a left or right click on a category label:

Bar, line, area and combo charts: the X-axis labels, including rotated ones; the click area follows the slanted text.
Horizontal bars and Gantt: the labels on the left.
Heatmap, HLOC and candlestick: the column and date labels.
Polar, radar and spiral: the names around the outside and the ring names.
Pie, doughnut, funnel and pyramid: the legend entries, since the legend lists the labels there.

also added ShowClickAreas: for debugging that draws all click areas (labels red, data blue) with a counter; checkbox "Show click areas" in the demo.

archive.zip

44kB

Richard_And_Trisha

I was about to ask you about .LabelClicked and you got a new version up already... so fast!!!

Richard_And_Trisha

a quick question... what would be the code for ShowMyMenu(label) like when doing OnLabelClicked()???

the usual way to show context menu an getting value is usually depends on value x and y.... and OnLabelClicked does not have the value

madru

Richard_And_Trisha

Hmm, good point – I hadn’t thought of that at all 🙁
To open a context menu at the click position, you normally need the x/y coordinates, and ‘LabelClicked’ doesn’t pass these on. I’ll have a look into that …

Garry

Wow - this is a fantastic addition to the community @madru!

Do you have a website or way to be contacted about this control? If you like, I'm very happy to add it to the Objo Showcase for people to find easily?

madru Then someone said "radar chart", and I stopped sleeping.

I know that feeling 😆 !

madru

Good morning, please excuse the delay, there were more changes to make than I thought.

The problem was that the clickable areas were created as a side effect of rendering, which is always reassuring.

Exactly when Objo renders a chart is, quite reasonably, decided by Objo. In the demo, for example, charts are added to the window before they have received such luxuries as data or dimensions. If Objo then sees no particular reason to redraw them, the clickable areas remain based on information that was correct at some point in the past.

Hover tooltips make this slightly less obvious by triggering a redraw when the mouse moves over a bar. Thus, as long as the user politely hovers first, everything appears to work.

This has now been made somewhat less ceremonial. On every click, ChartView recalculates the clickable areas using the current size and data. It performs an invisible render to an off-screen image and only then evaluates the click. As a result, click handling no longer depends on whether the chart happened to be rendered recently enough.

A click now takes responsibility for its own geometry, which seems only fair.

The fix is in version 2.7. The current version is 2.8, which also adds RightClickOnChart: set it to False if only labels should react to a right-click. Just replace the class; your code stays as it is. And if a click ever lands somewhere unexpected again, ShowClickAreas = True shows exactly where ChartView thinks the clickable areas are.

archive.zip

47kB

madru

Garry

feel free

Garry

Thanks. It's now listed:

https://objo.dev/showcase/class/chartview

If you'd like anything changing please let me know.

madru

I will change the integer constants to enumerations later today (maybe tomorrow), V3 is on it's way

Var chart As New ChartView
chart.Kind = ChartView.KindPareto
chart.Title = "Support tickets by cause"
chart.SetLabels(["Setup", "Login", "Sync", "Export"])
chart.AddSeries("Tickets", [191, 132, 45, 12])
Self.Add(chart)

will become

Var chart As New ChartView
chart.Kind = ChartView.ChartKind.Pareto
chart.Title = "Support tickets by cause"
chart.SetLabels(["Setup", "Login", "Sync", "Export"])
chart.AddSeries("Tickets", [191, 132, 45, 12])
Self.Add(chart)

bgrommes

Garry I definitely want to see more business-oriented stuff like this in the showcase. While there's nothing wrong with games and they speak to the performance of the VM and the efficiency with which drawing and events happen, if the showcase is dominated by games then it reinforces the notion that Objo is some kind of specialist or toy environment and that would miss a big opportunity for the product. I recall one of the other Basic dialects has such a showcase page and it's way too full of games and relatively obscure apps and, worse, all of them are finished apps, not useful libraries like this.

I am nowhere near as prolific as you or some others here, but I am working on some things that I hope will help in this regard :-)

Garry

I hear you loud and clear. I am initially curating the showcase and thus far games have been the most impressive things shared by the community. I definitely would love to see a broad range of app types from the community.