Jaxon

<div class="row">
    <div class="col-md-12">
        <div id="flot-graph">
            &nbsp;
        </div>
    </div>
    <div class="col-md-8 buttons">
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq(Flot::class)->drawGraph()) ?>>Draw graph</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq(Flot::class)->clearGraph()) ?>>Clear graph</button>
    </div>
</div>

                                    

<?php

use Jaxon\Jaxon;
use Jaxon\Flot\FlotPlugin;

class Flot extends \Jaxon\App\FuncComponent
{
    public function drawGraph()
    {
        $flot = $this->response()->plugin(FlotPlugin::class);
        // Create a new plot, to be displayed in the div with id "flot"
        $plot = $flot->plot('#flot-graph')->width('450px')->height('300px');
        // Set the ticks on X axis
        // $ticks = [];
        // for($i = 0; $i < 10; $i++) $ticks[] = [$i, 'Pt' . $i];
        // $plot->xaxis()->points($ticks);
        $plot->xaxis()->expr(0, 16, 1, 'plots.xaxis.label');

        // Add a first graph to the plot
        $graph = $plot->graph(['lines' => ['show' => true], 'label' => 'Sqrt']);
        $graph->series()
            ->expr(0, 14, 0.5, 'plots.sqrt.value', 'plots.sqrt.label');

        // Add a second graph to the plot
        $graph = $plot->graph([
            'lines' => ['show' => true],
            'points' => ['show' => true],
            'label' => 'Graph 2',
        ]);
        $graph->series()->points([
            [0, 3, 'Pt 1'],
            [4, 8, 'Pt 2'],
            [8, 5, 'Pt 3'],
            [9, 13, 'Pt 4'],
        ]);

        // Draw the graph
        $flot->draw($plot);
    }

    public function clearGraph()
    {
        $this->response()->clear('flot-graph');
    }
}

// Register object
$jaxon = jaxon();

$jaxonAppDir = dirname(__DIR__, 2) . '/public/app';
$jaxonAppURI = '/app';

$jaxon->setOption('js.app.export', false);
$jaxon->setOption('js.app.dir', $jaxonAppDir);
$jaxon->setOption('js.app.uri', $jaxonAppURI);
$jaxon->setOption('js.app.minify', false); // Optionally, the file can be minified

$jaxon->setOption('js.lib.uri', '/js');
$jaxon->register(Jaxon::CALLABLE_CLASS, Flot::class);

                                    

var plots = {
    xaxis: {
        label: x => `x${x}`,
    },
    sqrt: {
        value: x => Math.sqrt(x * 50),
        label: (series, x, y) => `${series}(${x} * 50) = ${y}`,
    },
};
jaxon.dom.ready(() => {
    // Call the Flot class to populate the 2nd div
    // <?= rq(Flot::class)->drawGraph() ?>;
});