Support automatic data refresh

[pinzonjulian]

Hey!
Just came across apexcharts.rb while investigating about options for charting in Rails other than Chartkick. Answering the template's questions:

Is your feature request related to a problem? Please describe.
Yes, I'm trying to create a feature that refreshes the chart's data every x seconds. I can't find any option in the docs that would allow me to do this with the gem's dsl.

Describe the solution you'd like
I'd love to see something similar to what chartckick does which is passing a url and a refresh parameter

<%= line_chart url, refresh: 60 %>

Describe alternatives you've considered
I'm looking into just using Apexcharts js wrapped in a stimulus controller but I like to maintain things as close to vanilla Rails as possible in my apps.

Thanks!

[pinzonjulian]

For now, I've decided to handle this using Stimulus JS (which I use extensively in my Rails app)

I've created a charts_controller.js that receives a URL parameter. Options carries the id of the chart. This is important to be able to use the Apexcharts.exec function.

<div data-controller="chart" data-chart-url="<%= post_metrics_path(@post) %>">
  <%= bar_chart(@series, @options) %>
</div>

Stimulus controller

import { Controller } from "stimulus"
import ApexCharts from "apexcharts"

export default class extends Controller {
  connect(){
    this.chart = this.element.firstElementChild // note that I'm grabbing the chart being the first element in the div. You could also do it with the explicit ID itself if you wanted
    this.chartId = this.chart.id
    this.url = this.data.get('url')
    this.scheduleUpdate()
  }

  scheduleUpdate(){
    if (!this.url) return;
    this.time = 5000;
    this.poll = setTimeout(this.updateSeries, this.time, this.url, this.chartId, this.time);
  }

  updateSeries = () => {
    // .. ajax call or something similar that on success uses ApexCharts.exec(chartId, 'updateSeries'
    this.poll = setTimeout(this.updateSeries, refreshInterval, url, chartId, refreshInterval);  
  }

  disconnect(){
    ApexCharts.exec(this.chartId, 'destroy');
    clearTimeout(this.poll)  // make sure you clear the timeout. Specially if you're using Turbolinks in Rails
  }
}

Checkout these resources for more info:
https://apexcharts.com/docs/methods/#updateSeries
https://apexcharts.com/docs/update-charts-from-json-api-ajax/