Chart Widget Integration

Bootstrap Studio Help
1

Hello,

I am well aware that I can add Chart.js separately and program it outside of the widget. However, I find the current implementation is very restrictive. I was hoping to implement stacked bar charts. This does not appear to be an option. I would like to link the data Labels and Datasets to external resources such as JSON files returned by a web service. It appears I am locked into fixed values which can be overwritten with JavaScript code but this seems to be a major hole in the Chart.js implementation.

Perhaps I am missing something and can use the widget provided as-is and just need a few more hints on how to accomplish my goals as stated above.

Thank you!

Ben

1 Like
2

I added some JS code to see if I could manipulate the Widget directly to no avail. Below are my two different attempts. The Chart widget has an ID of crimeByDOW. The error I receive for both crimeByDOW.update and $('#crimeByDOW').update(...) is:

Type Error: ... .update is not a function

$(document).ready(function() {
    //crimeByDOW.update({     // Does not work
    $('#crimeByDOW').update({
        options: {
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });
})

Any ideas would be appreciated!

Ben

3

Below are a couple of snippets of the HTML source code. As you can see my MyChart.js code is last in the controllable list of script includes at the bottom of the page.

``` 
</blockquote>

<p>&lt;div class="row"&gt;
&gt;                                         &lt;div class="col-md-6 col-md-12"&gt;
&gt;                                             &lt;div id="crimeByDOW"&gt;&lt;canvas
&gt; data-bs-chart="{&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Revenue&quot;,&quot;backgroundColor&quot;:&quot;#4e73df&quot;,&quot;borderColor&quot;:&quot;#4e73df&quot;,&quot;data&quot;:[&quot;4500&quot;,&quot;5300&quot;,&quot;6250&quot;,&quot;7800&quot;,&quot;9800&quot;,&quot;15000&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:false},&quot;title&quot;:{&quot;display&quot;:true,&quot;text&quot;:&quot;Crime
&gt; By Day of Week&quot;}}}"&gt;&lt;/canvas&gt;&lt;/div&gt;
&gt;                                         &lt;/div&gt;
&gt;                                     &lt;/div&gt;</p>

<blockquote>

</blockquote>
4

So researching this item a bit more based on the limited doc for BootStrap Studio:

https://bootstrapstudio.io/tutorials/charts

The JS code provided manipulates a single instance of a chart. It appears that BSS injects the appropriate code. The Dashboard I am designing requires multiple Chart objects on the screen. Looking at the Source Code generated, it appears the injected code does not provide a referencable ID that I can use to access an individual Chart from multiple that are displayed in my Dashboard. Perhaps I am missing something obvious?

Any workarounds available or am I on my own and must hand-code all of my charts due to this limitation?

I changed my code to reflect what exists in the documentation and it no longer throughs an error in the Web Inspector but likely the code is applying the new setting to every chart on the web page.

$(document).ready(function() { let chart = document.querySelector('canvas').chart; chart.update({ options: { scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } }); })

Any ideas would be greatly appreciated!

5

I resolved my issue by manually writing Custom Code. It also appears with the chart.js library that you cannot have more than one chart on a single page unless you instantiate them in a single script section. If I create logic for each chart in separate .js files, only the last chart displays. If I combine the logic into a single $(function), both charts appear on the tab as I want. Odd behavior! Check out the following reference...

https://stackoverflow.com/questions/53172262/multiple-charts-in-one-page-with-chart-js

6

Sorry for replying so late! You can give each of your charts a unique id, and then use it to select the appropriate canvas element.

document.querySelector('#graph1 canvas').chart // the first chart
document.querySelector('#graph2 canvas').chart // the second chart

Each of these chart instances can be manipulated individually. Hope this helps!

7

Where do you add the Unique ID? To the Div? The Chart Widget doesn't have a place to add an ID that I could find. Or do I add the ID in the DIV container to the Attributes area since I could not find it in the properties for the Chart Widget?

1 Like