Clickable Bar Chart - kendmaclean/pharo12 GitHub Wiki

Okay, let's build a another simple monthly sales app that graphs the totals in a BarPlot using Pharo 12.

1. Copy to Playground

| chart data canvas barPlot allElements|

"1. Define your data"
data := {
    'Jan' -> 2500.
    'Feb' -> 4000.
    'Mar' -> 3000.
    'Apr' -> 1500.
    'May' -> 5000.
}.

"2. Create a canvas to display the chart"
canvas := RSCanvas new.

"3. Create the bar chart"
chart := RSCompositeChart new.
chart container: canvas.

"4. Create a bar plot and add it to the chart"
barPlot := RSBarPlot new xTickLabels: (data collect: #key); y: (data collect: #value).
chart add: barPlot.

"6. Build the chart"
chart build.

"7. Get the bar elements from the chart"
allElements := canvas shapes select: [:each | 
		each model notNil and: [ 
			each class = RSBox]].

"8. Add interaction to each bar"
allElements doWithIndex: [:bar :index |
    | categoryData |
    categoryData := data at: index.
    
    "Add tooltip showing the data value"
    bar @ (RSPopup text: [:e | categoryData key, ': ', categoryData value asString]).
    
    "Add highlight on mouse over"
    bar @ RSHighlightable new.
    
    "Add click interaction"
    bar when: RSMouseClick do: [:evt |
        | message |
        message := 'Clicked on ', categoryData key, ' (Value: ', categoryData value asString, ')'.
        
        "Display a notification - for demonstration"
        "Transcript clear; show: message; cr."
        
        "Alternative: Open an inspector on the data"
        categoryData inspect.
        
        "Alternative: Open a dialog"
        UIManager default inform: message.
    ] for: [self].
].

"9. Add padding around the canvas"
canvas @ RSCanvasController.

"10. Open in a window"
canvas open setLabel: 'Clickable Bar Chart'.

2. How to use

In the Playground click "Do it" or Ctrl+D.