Stacked bar chart with mouseover

[Kolja]

So I'm trying to get my bar chart to display a mouseover, which in it self is not a problem.

Modification of your official stacked bar chart example, notice the String parameter embedded in the second param and the title (from typed svg) call:

column : BandScale String -> ( String, List ( Float, Float, String ) ) -> Svg msg
column xScale ( xAxisLabel, values ) =
    let
        block color ( upperY, lowerY, str ) =
            rect
                [ x <| Scale.convert xScale xAxisLabel
                , y <| lowerY
                , width <| Scale.bandwidth xScale
                , height <| (abs <| upperY - lowerY)
                , fill (Fill color)
                ]
                [ title [] [ text str ] ]
    in
    g [ class [ "column" ] ] (List.map2 block colors values)

But how do I get the data I want to display in the tooltips?

column is called like this in your example

List.map (column xScale) (List.map2 (\a b-> ( a, b )) xAxisLabels scaledValues)

So I changed

scaledValues =
            List.map (List.map (\( y1, y2 ) -> ( Scale.convert yScale y1, Scale.convert yScale y2, "this will get displayed" ))) transposedValues

but how do i get the transposedValues or values to still have the original values?

I suspect Stackresult needs to be changed to not only generate yLower and yUpper but also an original value to handle this gracefully?

[Jakub Hampl]

So perhaps a hint: The data is List ( a, List Float ) which is an associative list essentially.

In stack result, you get a labels field that shows the order of the top level list in how it relates to values. The inner list has the same order.

In the example, you can get the column data like this:

List.map2 (\yearValue crimeRate ->
     (List.map (\(y1, y2) -> (Scale.convert sScale y1, Scale.convert yScale y2, crimeRate)) yearValue
) yearValues samples

If you need the exact value, you will need something like this:

get : a -> List (a, b) -> Maybe b
get needle haystack =
    haystack 
        |> List.filter (\x -> x === needle)
        |> List.head

List.map2 (\yearValue crimeRate ->
     (List.map2 (\(y1, y2) label -> (Scale.convert sScale y1, Scale.convert yScale y2, get label crimeRate)) yearValue labels
) yearValues samples

I hope I've understood your question and that this helps!

[Kolja]

Can't get that to work as the type of samples doesn't seem to be what your example thinks it is?
As in https://code.gampleman.eu/elm-visualization/StackedBarChart/ samples is
List ( String, List Float )
but your mapping it like it's List (List ( String, List Float )) what am I missing here?

[Jakub Hampl]

I think the transpose is making it somewhat confusing. The point is you can use map2 and get to retrieve the original data.

I think this demonstrates well that the stacked bar chart example needs to be reworked though - it seems a bit too complex to be useful.

[Kolja]

But do you think that's just the example or the api of elm-visualization?

Implementing my colors also felt weird, as it feels kinda wrong in elm (or in general) to rely on the order of lists that are not connected.

[Jakub Hampl]

I think the action here is to rework the stacked example and see how it goes. As such I'll close in favour of #39.