ContEx LinePlot showing bouncing line unexpectedly

Phoenix Forum Questions / Help
, ,
1

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.

image
image1200×917 20.3 KB

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.

image
image1200×917 24.8 KB

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.

1 Like
2

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.

1 Like
3

Correct! It’s a Catmull-Rom spline used to smooth the line - the algorithm can overshoot in certain circumstances.

4

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:

1 Like