`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize data. From simple line charts to complex hierarchical tree maps, the chart element provides a number of ready-to-use chart types.
```html <google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]' rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'> </google-chart> ```
google-chart
https://wiki.ralfbarkow.ch/assets/google-chart/index.html
Main.elm
module Main exposing (main) import Dict import Html exposing (Html) import Html.Attributes exposing (attribute, property) import Json.Encode as Encode main : Html msg main = Html.node "google-chart" [ attribute "type" "pie" , property "options" <| Encode.object [ ( "title", Encode.string "Distribution of days in 2001Q1" ) ] , property "cols" <| Encode.list Encode.object [ [ ( "label", Encode.string "Month" ), ( "type", Encode.string "string" ) ] , [ ( "label", Encode.string "Days" ), ( "type", Encode.string "number" ) ] ] , property "rows" <| Encode.list (Encode.list identity) <| [ [ Encode.string "Jan", Encode.int 31 ] , [ Encode.string "Feb", Encode.int 28 ] , [ Encode.string "Mar", Encode.int 41 ] ] ] []
.