enkr1

enkr1

ContEx LinePlot showing bouncing line unexpectedly

Hi community,

I am trying to plot a line graph with Elixir’s ContEx charting system. I’m assigning the dataset with Dataset.new/1, before assigning the chart with LinePlot.new/2 and rendering the SVG with Plot.new/3. The data I’m passing into Dataset.new/1 is formatted as {x_value, y_value}.

[
	{1, 10.1},
	{2, 10.1},
	{3, 8.5},
	{4, 6.0},
	{5, 0.0},
	{6, 0.0},
	{7, 0.0},
	{8, 0.0},
	{9, 0.0},
	{10, 0.0}
]

---

The issue is that the plotted line graph will either dip below or rise above the actual value. Eg. The line rises slightly from x=1 to x=2 even though both y-values should be 10.1. Similarly, the line dips slightly below 0 from x=5 to x=6, even though both y-values should be 0.


When I use the same data to plot a bar chart with BarChart.new/2 instead of LinePlot.new/2, the chart appears to be correct.


Here are the code snippets that may be causing the issue.

barchart_helper.ex:

defmodule MyWeb.Helpers.BarchartHelper do
  alias Contex.{Dataset, BarChart, Plot, LinePlot}

  def make_bar_chart_dataset(data), do: Dataset.new(data)

  def make_pipeline_chart(dataset) do
    LinePlot.new(dataset) # or BarChart.new(dataset) to plot a barchart
  end

  def render_bar_chart(chart, title, subtitle, x_axis, y_axis) do
    Plot.new(500, 400, chart)
    |> Plot.titles(title, subtitle)
    |> Plot.axis_labels(x_axis, y_axis)
    |> Plot.to_svg()
  end
end

test_chart.ex:

defmodule MyWeb.TestLive.TestChart do
  use MyWeb, :live_component
  use MyWeb, :chart_live

  def update(%{total_resources: total_resources} = assigns, socket) do
    {:ok,
     socket
     |> assign(assigns)
     |> assign(:total_resources, total_resources)
     |> assign_dataset()
     |> assign_chart()
     |> assign_chart_svg()}
  end

  def assign_dataset(%{assigns: %{total_resources: total_resources}} = socket) do
    socket |> assign(:dataset, make_bar_chart_dataset(total_resources))
  end

  def assign_chart(%{assigns: %{dataset: dataset}} = socket) do
    socket |> assign(:chart, make_pipeline_chart(dataset))
  end

  def assign_chart_svg(%{assigns: %{chart: chart}} = socket) do
    socket
    |> assign(
      :chart_svg,
      render_bar_chart(chart, "Title", "Subtitle", "X axis", "Y axis")
    )
  end

  def render(assigns) do
    ~H"""
    <div>
      <%= @chart_svg %>
    </div>
    """
  end
end

Thank you in advance.

Best wishes,
Jing Hui P.

Marked As Solved

enkr1

enkr1

Thank you @hauleth @mindok!

def make_pipeline_chart(dataset) do
  options = [
    data_labels: false,
    smoothed: false,
    custom_x_formatter: &my_fn/1
  ]

  LinePlot.new(dataset, options)
end

Cheers! :heart:

Also Liked

hauleth

hauleth

Disable smoothing as this is what is causing that visual glitch. If you look closely you will see that the data is still the same, just the visual representation of interpolated data “in between” the points is visually below 0.

Where Next?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement