A few examples for new users

[travelmassive]

Thanks for creating a fantastic library for Elixir!

I'm currently using Contex for:

• The sparklines on our website to show members upvotes and comments on our posts
• Our backend moderation stats page

I recently needed to develop a few "one off" charts for a static marketing page, and decided to try Contex for that too. However I struggled a little bit to find straight up example code for some of the charts. As a new user of the library, it took me a little longer than usual to get started as I was trying to hunt down some simple copy-paste examples that could work out of the box.

Anyway, I eventually made a couple of charts and thought I'd share the code in case you wanted to add more examples to help other users. Alternatively, I could put this in a gist. Sorry if I've put this in the wrong place!

Cheers, Ian

---

data = [
  ["Blog (400)", 400],
  ["Instagram (399)", 399],
  ["Twitter (348)", 348],
  ["YouTube (200)", 200],
  ["Tiktok (72)", 72]
]

dataset = Contex.Dataset.new(data, ["Channel", "Count"])

opts = [
  mapping: %{category_col: "Channel", value_col: "Count"},
  colour_palette: ["16a34a", "c13584", "499be4", "FF0000", "00f2ea"],
  legend_setting: :legend_right,
  data_labels: true,
  title: "Social Media Accounts"
]

Contex.Plot.new(dataset, Contex.PieChart, 600, 400, opts)
|> Contex.Plot.to_svg()

data = [
  ["Tiktok", 7.7],
  ["Twitter", 8.7],
  ["YouTube", 10.2],
  ["Blog/Website", 17],
  ["Instagram", 17.5]
]

series_cols = ["Series 1"]
test_data = Contex.Dataset.new(data, ["Category" | series_cols])

options = [
  mapping: %{category_col: "Category", value_cols: ["Series 1"]},
  type: :stacked,
  data_labels: true,
  orientation: :vertical,
  colour_palette: ["4c4bdc"],
  series_columns: series_cols
]

Contex.Plot.new(test_data, Contex.BarChart, 500, 400, options)
  |> Contex.Plot.titles("Combined Reach (M)", "")
  |> Contex.Plot.axis_labels("", "")
  |> Contex.Plot.plot_options(%{})
  |> Contex.Plot.to_svg()

data = [
  ["Writing", 248],
  ["Adventure", 166],
  ["Food", 145],
  ["Travel Guide", 109],
  ["Photography", 94],
  ["Lifestyle", 78],
  ["Family", 75],
  ["Video", 71],
  ["Sustainability", 55],
  ["Luxury", 55],
  ["Womens Travel", 48],
  ["Vanlife", 46],
  ["Journalist", 39],
  ["Solo Travel", 29],
  ["Podcast", 25],
  ["Accommodation", 24],
  ["Outdoors", 24],
  ["Nomad", 20],
  ["Fashion", 20],
  ["Hiking", 18],
  ["Flying", 17],
  ["Cruise", 16],
  ["Points", 13],
  ["Wellness", 12],
  ["Slow Travel", 11],
] |> Enum.reverse()

series_cols = ["Series 1"]
test_data = Contex.Dataset.new(data, ["Category" | series_cols])

options = [
  mapping: %{category_col: "Category", value_cols: ["Series 1"]},
  type: :stacked,
  data_labels: true,
  orientation: :horizontal,
  colour_palette: ["1e293b"],
  series_columns: series_cols
]

Contex.Plot.new(test_data, Contex.BarChart, 500, 400, options)
  |> Contex.Plot.titles("", "")
  |> Contex.Plot.axis_labels("", "")
  |> Contex.Plot.plot_options(%{})
  |> Contex.Plot.to_svg()

[mindok]

That's awesome thanks Ian. When I get a chance, I'll add them to the context-samples project - anything that helps get developers productive quickly is really appreciated!

[travelmassive]

Here's one more example, a stacked bar chart.

(The stacked bar chart took me the longest to figure out how to generate, so this would be helpful example in the docs).

data = [
  ["Tiktok", 4.7, 3],
  ["Twitter", 6.7, 2],
  ["YouTube", 5.2, 5],
  ["Blog/Website", 7, 8],
  ["Instagram", 10.5, 7]
]

series_cols = ["Series 1", "Series 2"]
test_data = Contex.Dataset.new(data, ["Category" | series_cols])

options = [
  mapping: %{category_col: "Category", value_cols: ["Series 1", "Series 2"]},
  type: :stacked,
  data_labels: true,
  orientation: :vertical,
  colour_palette: ["4c4bdc", "c13584"],
  series_columns: series_cols
]

Contex.Plot.new(test_data, Contex.BarChart, 500, 400, options)
  |> Contex.Plot.titles("Combined Reach of Brand + Individuals (M)", "")
  |> Contex.Plot.axis_labels("", "")
  |> Contex.Plot.plot_options(%{})
  |> Contex.Plot.to_svg()

[mindok]

Closed with PR #83 - ExDocs now has a number of gallery modules (thanks to @l3nz ) where sample code is used to automatically generate the SVG output that is embedded in the docs. Currently not released, but you can access from GitHub master, then run mix docs to generate the docs locally.

Thanks for the samples!