New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected.

I ensured that I copied the HTML, inserted the script tags before and after the JavaScript code provided. What could I be overlooking? Is there a specific piece of code that needs to be included for the HTML file to display like the example in the URL? Am I missing a crucial element?

Though I realize this may seem like a basic question, everyone has to begin somewhere. Your assistance is greatly appreciated!

Answer №1

Your best bet would be to create an HTML file and add the example code into it. Then, you can simply open the HTML file in your browser for visualization. Using Chart.js framework is key here, so make sure to include it in your HTML file like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

Here's a snippet of how your HTML file structure should look:

<!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Title</title>
  </head>
  <body>
     <div class="container">
         <div class="row my-3">
                <div class="col">
                    <h4>Bootstrap 4 Chart.js</h4>
                </div>
            </div>
            <div class="row my-2">
                <div class="col-md-6 py-1">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chLine"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 py-1">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chBar"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row py-2">
                <div class="col-md-4 py-1">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chDonut1"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 py-1">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chDonut2"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 py-1">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chDonut3"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
    
    <script>
    // Your Chart.js code goes here
    </script>
  </body>
</html>

You can also check the separated code blocks for reference:

// Your Chart.js code examples go here
<div class="container">
    <!-- Your chart elements go here -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible that the images are unable to load on the page

The frontend code successfully retrieves the image links sent by the backend but encounters issues displaying them. Despite confirming that the imgUrl data is successfully fetched without any hotlink protection problems, the images are still not appearing ...

What makes Django forms the better choice over HTML forms?

Greetings! As a beginner in the world of Django, I am currently struggling to grasp the concept of Django forms. I find myself questioning the utility of Django forms when we already have the option to use HTML forms. Can someone please clarify this for ...

tips for recognizing the selected element

seeking assistance in resolving the issue with the script. once the user selects an item .menu_button, a function called initForm() is invoked. This function is expected to output only console.log(N) but instead, it outputs 3: console.log(1) console.l ...

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

When utilizing the multipart/form-data content type in a form, the files being sent are transmitted as blank

I am currently developing a VueJS component that functions as a form to collect user information and enable multiple image uploads. The form is set with enctype="multipart/form-data" and exhibits the following structure : <template> <div> ...

Integrating autoprefix-cli into ANT build

I've been attempting to integrate autoprefix-cli into my ANT build. The code snippet below shows what I've tried so far. <target name="auto"> <apply executable="autoprefixer-cli.bat" verbose="true" force="true" failonerror="true"> ...

Issues with MySQL not functioning properly when using Promise.All in a Node.js environment

When it comes to running multiple mysql queries asynchronously in express node.js, MySQL works well with simple callbacks. However, I wanted to take it a step further by using async await with promise.all. I also experimented with promise.allSettled, but u ...

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

Finding the correct closing tag in HTML can be accomplished using an algorithm

Currently working on my custom HTML parser in JAVA and have completed the lexer. Now diving into coding the parser to create a DOM tree and ensure the proper construction of my HTML. For example, understanding that an img tag is considered a void tag as p ...

Trouble rotating camera in THREE.JS?

How can I adjust my camera to look behind, with the center of the pong table being at x=0,z=0? I've tried changing the camera.lookAt settings but haven't had success. You can see the current camera view here. scene = new THREE.Scene(); scene ...

What is the best way to extract the class name from ui.item or event using the function(event, ui)?

Is there a way in jQuery to extract the class name from a function with two parameters, event and ui? For example, consider the following code snippet: $(document).tooltip({ show: null, position: { my: "left top", at: "left bottom ...

Measuring the quantity of 'table' elements with jQuery

This HTML code below defines a table structure. Now tables can be dynamically added to this structure. <div class="tableStyle myWebsiteTable"> <table cellspacing="0" cellpadding="0" id="site0" class="site active"> <thead> ...

Creating a group object based on ID using react-native and JavaScript - a step-by-step guide

I have an array of objects that I need to reorganize so that each object with the same guid is grouped together. For instance, given this array; [ {"guid":"3a03a0a3-ddad-4607-9464-9d139d9989bf","comment":"text&quo ...

What is the method for obtaining a date in the format of 2018-05-23T23:00:00.000+00:00?

Recently, I've been attempting to filter data based on dates in my database. The format in which the dates are saved is as follows: 2018-05-23T23:00:00.000+00:00 This was my initial approach: router.get('/byDate', function (req, res) { ...

merge a pair of scopes within Angular

I have a dilemma with merging two different scopes. Can someone suggest the most efficient method to achieve this? Here are details of the scopes in question; the second one originates from a service. The initial scope retrieves information from the datab ...

CKEditor not functioning properly when generated using AJAX and PHP in JavaScript file

I am facing an issue where I am using PHP and AJAX to generate a CKEditor textarea. The CKEditor JavaScript files are included in the main HTML file, and the PHP and AJAX functionalities are working correctly. However, when the form is displayed, the CKEdi ...

Using React JS to automatically execute an event based on a specific state value

Is there a way to initiate an action from a main component when the child component's state reaches a specific value? Let's consider a scenario where I have a Parent component and a Child component, with the parent's state containing active ...

Determine the overall sum following the modification of rows

Need assistance with calculating the Grand Total of all rows to display at the bottom of a table using JQuery 1.9. Below is the JavaScript code: <script language="javascript"> $(".add_to_total").on('change', function() { var total = 0; $( ...