Chartisan with Livewire

Level 54

@jgravois can you pass in the parameters via your Request?

Level 33

not sure how I could do that ... the docs don't explain further than it can be done

Level 54

@jgravois aren't you calling chartisan via a route? if so you should be able to pass data to it that way.

Level 33

will give that a try

Level 54

Documentation is a bit light for this. Especially with the mention of routes. Let me know how you get on.

Level 33

Documentation is too light on this so I am going to spin off in a new direction with keeping the current month in chart and providing a table of YTD rather than trying to do what I was trying of allowing the user to select a month and have the chart magically transform.

1 like

Level 54

@jgravois The presence of that $request is tantalizing....

I'll have a fiddle over the weekend and if I work out how to do it, i'll let you know.

Level 33

would be appreciated ... it would be a better UIX

Level 54

@jgravois I've given it a fiddle locally. To get data into the chart in the first place, you can change the url from using the chart helper

const chart = new Chartisan({
    el: '#chart',
   url: "@chart('sample_chart')",
});

to the one that you'll see if you run

php artisan route:list -c

so in my case:

const chart = new Chartisan({
    el: '#chart',
    url: 'api/chart/sample_chart?foo=foo1&bar=bar1&baz=baz1'
});

Level 56

Or as @\chart(...) is a blade directive that will output the chart route he could try:

const chart = new Chartisan({
    el: '#chart',
   url: "@chart('sample_chart')?dt=2020-11-01",
});

And process dt as a query parameter, as I pointed out in my other response earlier.

Level 54

@rodrigo.pedra ah. that part of the docs is very light in explanation, which sparked my interest. Thanks for clarification on the blade directive

1 like

Level 56

No worries @automica ,

I just posted a proof of concept down below using Alpine for changing the month dynamically.

Overall I am really impressed with Chartisan ease of use.

Level 56

From the quote you used:

by having total control of how the HTTP request is performed and allows for instance, appending headers or changing the request method. You can also append query parameters as usual by appending them on the chart URL at the url property.

So the way to send additional parameters is to send them as query parameters.

In that sense your chart object would become:

class MonthlySalesChart extends BaseChart
{
    public function handler(Request $request): Chartisan
    {
        $dt = $request->query('dt');

        $monthlies = Invoice::mtd($dt);

        $labels = collect($monthlies)->pluck('last_name')->toArray();
        $totals = collect($monthlies)->pluck('gross')->toArray();

        return Chartisan::build()
            ->labels($labels)
            ->dataset('Sales', $totals);
    }
}

This way the method signature stays compatible with its base class method.

And in your JavaScript code you would append that as a query parameter, the same way it has on the code sample down below the quote you posted

chart.update({
  //                                            V added as query paremeters
  url: 'https://chartisan.dev/chart/example.json?start=01-01-2020&end=01-02-2020',
  options: {
    headers: {
      'Authorization': 'Bearer someauthenticationtoken'
    }
  }
})

Reference: https://chartisan.dev/documentation/frontend/updating#HTTP-Request