View Source Contex.Gallery.BarCharts (ContEx v0.5.0)
A gallery of Bar Charts.
plain/0- An introductory example
Have one to share?
Do you have an interesting plot you want to share? Something you learned the hard way that should be here, or that's just great to see? Just open a ticket on GitHub and we'll post it here.
Link to this section Summary
Link to this section Functions
Some plain charts.
A simple vertical bar chart
Originally taken from https://github.com/mindok/contex/issues/74
Rendering took 0 ms - Size: 3.87 Kb
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(%{})
A simple horizontal bar chart
Originally taken from https://github.com/mindok/contex/issues/74
Rendering took 0 ms - Size: 11.515 Kb
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(%{})A simple stacked bar chart
Originally taken from https://github.com/mindok/contex/issues/74
Rendering took 0 ms - Size: 4.966 Kb
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(%{})Bar charts using a log scale.
See Contex.ContinuousLogScale for details.
A stacked sample
This graph represents a distribution of values, rendered as a stacked sample.
Notice how the large value difference (data is in minutes) makes a log scale mandatory, but the axis is not really readable on the far end.
Rendering took 21 ms - Size: 5.001 Kb
palette = ["fff", "eee", "ff9838", "fdae53", "ddd", "fff"]
series_cols = ["b0", "b1", "b2", "b3", "b4"]
data = [
%{
"b0" => 10.4333,
"b1" => 1.4834000000000014,
"b2" => 2.0332999999999988,
"b3" => 16.7833,
"b4" => 265.40000000000003,
"lbl" => "2023-03-09"
},
%{
"b0" => 9.8667,
"b1" => 1.5665999999999993,
"b2" => 4.58340000000000,
"b3" => 83.0333,
"b4" => 359.15,
"lbl" => "2023-03-08"
},
%{
"b0" => 7.8333,
"b1" => 2.9166999999999996,
"b2" => 1.4666999999999994,
"b3" => 9.600000000000001,
"b4" => 379.2833,
"lbl" => "2023-03-07"
}
]
test_data = Dataset.new(data, ["lbl" | series_cols])
options = [
mapping: %{category_col: "lbl", value_cols: series_cols},
type: :stacked,
data_labels: true,
orientation: :horizontal,
custom_value_scale:
ContinuousLogScale.new(
domain: {0, 1000},
log_base: :base_10,
negative_numbers: :mask,
linear_range: 1
),
colour_palette: palette
]
Plot.new(test_data, BarChart, 500, 400, options)
|> Plot.titles("Stacked bars", "Log axis")
|> Plot.axis_labels("", "")
A stacked sample with automatic domain and custom ticks
This is the same data as above, but using a custom set of ticks that makes the values readable, and we get the axis domain out of the data-set.
Rendering took 1 ms - Size: 4.442 Kb
palette = ["fff", "eee", "ff9838", "fdae53", "ddd", "fff"]
series_cols = ["b0", "b1", "b2", "b3", "b4"]
data = [
%{
"b0" => 10.4333,
"b1" => 1.4834000000000014,
"b2" => 2.0332999999999988,
"b3" => 16.7833,
"b4" => 265.40000000000003,
"lbl" => "2023-03-09"
},
%{
"b0" => 9.8667,
"b1" => 1.5665999999999993,
"b2" => 4.58340000000000,
"b3" => 83.0333,
"b4" => 359.15,
"lbl" => "2023-03-08"
},
%{
"b0" => 7.8333,
"b1" => 2.9166999999999996,
"b2" => 1.4666999999999994,
"b3" => 9.600000000000001,
"b4" => 379.2833,
"lbl" => "2023-03-07"
}
]
test_dataset = Dataset.new(data, ["lbl" | series_cols])
options = [
mapping: %{category_col: "lbl", value_cols: series_cols},
type: :stacked,
data_labels: true,
orientation: :horizontal,
custom_value_scale:
ContinuousLogScale.new(
dataset: test_dataset, axis: series_cols,
tick_positions: [0, 5, 10, 15, 30, 60, 120, 240, 480, 960],
log_base: :base_10,
negative_numbers: :mask,
linear_range: 1
),
colour_palette: palette
]
Plot.new(test_dataset, BarChart, 500, 400, options)
|> Plot.titles("Stacked bars", "Log axis")
|> Plot.axis_labels("", "")