Looking for a good tutorial for connecting data to the Pie Charts and Score Boards

Looking through the documentations I see that October has built in carts and score Board features, however is there a walkthrough or video showing how to connect live data to them?

I am still muddling my way on developing within October so please treat me at a beginner pace because there is a huge amount of info to consume…

Hi @dblackmon,

If you’re referring to Scoreboard, it doesn’t automatically connect to live data — you need to pass the values yourself.

For example, if you are showing a scoreboard inside a controller, you can pass data to your view like this:

public function index()
{
    // Provide data to the view
    $this->vars['scoreboardData'] = 'XYZ';

    // Render the default ListController index
    return $this->asExtension('ListController')->index();
}

Then in your partial (the .htm file), you can display the value:

<?= $scoreboardData ?>

From there, you could replace 'XYZ' with values coming from your database query, API call, or any calculation you need.

So the scoreboard widget itself is just a UI element — it’s up to you to decide what “live data” you want to push into it.

I guess that would be one of the other places I am struggling… The “XYZ” part Im not sure if I can use a SQL statement there, or do I create a View in SQL and then call it from code in October to view what I want to see…

I am pretty old school on the learning part. It helps me to see a couple different examples of how the same thing can be accomplished. Unfortunately no one seems to do documentation like that anymore. Plus all of the Youtube videos out there for October are so old thats its difficult to consider whats relevant or not…

@dblackmon please clone this plugin: GitHub - octobercms/test-plugin: Test Suite & Playground for October CMS

You will see how it’s done :slight_smile:

2 Likes

I appreciate the link…

Looking at the People section and I see the scoreboard part. It appears that the only part that is connected to live data is the first circle chart. Is that correct and if so is there a reason why Mary Smith is reading -2000 and the other two are not reading values.

I just to make sure before I dive too deep into this, because changing the names of the tree indviduals have no affect on the scoreboard.

Thank you,

Doug

So after diving into it deeper it appears it has zero connection to live data, so unfortunately that example is useless.

Hi @dblackmon
This is how i use the implementation for showing data in the scoreboard in the controller the data is collected from different models

public function index(){
        parent::index();
        $this->vars['reservations_total'] = Reservation::count();
        $this->vars['total'] = Reservation::sum('total');
        $this->vars['paid'] = Payment::sum('paid_amount');
        $this->vars['costs'] = Cost::sum('amount');
    }

Then I’n the view

<div class="scoreboard">
    <div data-control="toolbar">
    <div class="scoreboard-item title-value">
            <h4>Reservations made</h4>
            <p><i class="icon-list"></i> <?= $reservations_total ?></p>
        </div>
        <div class="scoreboard-item title-value" >
            <h4>Reservation total amount:</h4>
            <p><i class="ph ph-currency-dollar-simple"></i><?= $total ?></p>
        </div>
        <div class="scoreboard-item title-value" data-control="goal-meter" data-value="<?= $total  != 0 ? ( $paid / $total) * 100 : 0 ?>">
            <h4>Total paid:</h4>
            <p><?= $paid ?>$</p>
        </div>
        <div class="scoreboard-item title-value" data-control="goal-meter" data-value="<?= $paid != 0 ?  $costs / $paid * 100 : 0 ?>">
            <h4>Costs total:</h4>
            <p><?= $costs ?>$</p>
            <p class="description"><?= $paid - $costs ?>$ profit</p>
        </div>
    </div>
</div>
<?= $this->listRender() ?>

I don’t know if this is what you meant with live data.

Hope this helps. Im still figuring out how to update the date with ajax so maybe this is a good thread to wrap all the information together.

1 Like

@adamo I don’t see any date input in your view yet. How are you currently handling the date selection? You could use data-attributes to trigger a function and re-render the scoreboard dynamically when the date changes.

Thank you for your example, however I dont think it solves what I am trying to do.

So ultimately I am tracking jobs in my sign shop. I have a database storing all the info. I am taking this in small step, so ultimately I would like a total count of each job on what phase the status is.

Some of the status include the following:

Awaiting Assignment
On Hold
Production
Awaiting Invoicing
Awaiting Pickup
Completed

Do I need to create a SQL view to get the totals of each and some how tell the scoreboard to look at the values, or do I create a SQL query on the fly through October, which I feel would be counter productive. Or is there a way to get October to total them.

@dblackmon, why the example of adamo wouldn’t work for your case? it shows how to pass the data to the view.

Thanks for the tip, I was trying to do this with some Events like relationExtendRefreshResults or onRelationButtonAdd etc. the idea is to change the scoreboard when CRUD`ing related date to a reservations view. For example if a reservation field changes in the backend the data would be updated.

@adamo got it — so you want this to happen without refreshing the page, since your current code only fetches the updated data on reload.

To achieve real-time updates, you could use WebSockets / broadcasting, which would automatically push changes to the frontend. That said, this approach might be a bit overkill for simply updating a scoreboard, as the setup can be fairly heavy.

A simpler and more practical alternative would be polling every X seconds:

It’s easier to implement, but keep in mind it may result in some unnecessary AJAX calls.

@apinard Thanks for the suggestion, I’ll check this out.