Merging HTML, CSS, and JavaScript in a single file to Generate a Bell Curve with the help of Google Charts API

I'm looking to streamline my code by combining HTML, CSS, and JS into a single HTML script for the existing "Bell Curve Using Google Charts API" project.

Check out the project here

I've tried putting the CSS in style tags and the JS in script tags within the head section, but it's not working as expected. I'd appreciate any guidance or assistance with this. Here is the code snippet:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // JS code here
    </script>
  </head>
  <body>

    <style>
      /* CSS styles here */
    </style>

    <h1>Bell Curve with Google Charts API</h1>
    <div id="chart_div"></div>

  </body>
</html>

Despite my efforts, I keep encountering a "Data Table Not Defined" error when running the code.

Answer №1

Upon inspecting the console errors in Chrome, you may notice that an error related to "jStat" is displayed, indicating that this 3rd party library required by your JavaScript code is not defined.

test.html:50 Uncaught (in promise) ReferenceError: jStat is not defined
at createArray (test.html:50)
at addData (test.html:42)
at prepareChart (test.html:25)

If using CodePen, it's important to note that the additional JS include can be hidden under "Settings". Ensure to manually add the script to your HTML file. Insert the following tag before the <script> line for loader.js:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstat/1.7.0/jstat.min.js"></script>

Answer №2

To ensure your code works correctly, simply include these references in the same order as listed below. There is no issue with your current code.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstat/1.7.0/jstat.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

Below is what you should see on your screen: https://i.sstatic.net/VNhoG.png

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

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

Equivalent of ResolveUrl for loading scripts without the need for server technology

I am in the process of converting an ASP.NET web page into a plain HTML web page. Most of the work is done, however, I am having trouble replacing the ASP.NET Page.ResolveUrl function when setting a reference to a javascript file: <script src="<%= ...

Issues with jKit Pagination (Controlling Size by Height)

I'm currently utilizing the jkit paginate feature to limit the number of items by height, with the setting at 910 pixels. Everything works fine when there is enough content to exceed this limit and create a second page. However, if the content falls ...

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

My current goal is to create a json file using a form and then update that file with another form. Both of these processes are handled in the process.php file. I have managed to successfully update the json file if it is named as data.json initially in pro ...

Using res.sendfile in a Node Express server and sending additional data along with the file

Can a Node.JS application redirect to an HTML file using the res.sendFile method from express and include JSON data in the process? ...

Utilize the composition API in Vue.js 3 to call a function and pass in a parameter

I'm having trouble calling a function from another component. When I click on a button in my parent component, formTelemarketing(), it should send data to my other component nAsignedCalls() and call the function getCalls(param) in that component. Thi ...

Stop the bootstrap navbar from resizing

I implemented a bootstrap navbar that looks like this... <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div& ...

Is it possible to utilize Angular's dependency injection in place of RequireJS?

As a newcomer to Angular, I am wondering how I can organize my code into separate files without using requirejs or any other framework. After watching a brief introductory video, it seemed possible. Currently, my app looks like this and functions well: v ...

Ensure the child element is selected immediately following an h2 tag using HTML and CSS

Consider the following brief HTML snippet: <div ...> <h2 class="test">...</h2> <p>...</p> </div> Is it feasible to retrieve the child element (p in this case) after the h2? I have been contemplating poten ...

"Step-by-step guide on positioning a video in the center over another

I am designing a landing page and I want to incorporate a background video with a centrally aligned logo on top of the video. My goal is for the center of the logo to always align with the center of the background image, regardless of how the page responds ...

Unlimited webpage scrolling downward

Recently, I was given a project to enhance a webpage and encountered an unusual issue. When the screen resolution drops below 900px (such as on small laptops and tablets) and you reach the bottom of the page, you can continue scrolling endlessly after seei ...

Raycasting is functioning properly on objects created within the program, however, it seems to be ineffective on imported OBJ models

As a newcomer to three.js, I am currently exploring raycasting and encountering some confusion regarding its functionality with imported 3D models. Specifically, when I import an obj model and attempt to determine if there is contact with the imported 3D ...

Adsense displays empty ad banners regardless of their predetermined size

Having trouble with Adsense banners? I have a page with three fixed-size banners (336 x 280) and sometimes they appear blank. It's random - one might work while the others don't, or none may work at all. The code is the same for each banner: < ...

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

How can you retrieve the chosen option's value in select2 and subsequently assign it to an input text using jquery?

I am a beginner in the world of jQuery and JavaScript, so please forgive me if this is a basic question. I am currently encountering an issue where I am unable to set the value obtained from a selected option in select2 to a text input field. Here's m ...

Ways to minimize an array of objects by shared key values?

Suppose I have an array of objects structured like this: var jsonData = [ {"DS01":123,"DS02":88888,"DS03":1,"DS04":2,"DS05":3,"DS06":666}, {"DS01":123,"DS02":88888,"DS03":2,"DS04":3,"DS05":4,"DS06":666}, {"DS01":124,"DS02":99999,"DS03":3,"DS04" ...

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

I am looking to sort a JSON array in JavaScript based on a search text. The sorting should prioritize items that match the search text at the beginning of their value, followed by alphabetical sorting for the remaining results. Even if the search text is f ...

Automating link clicking on a webpage using Selenium and Python based on text or style characteristics

Struggling to navigate the bet365.com website, particularly with the page that lists all horse races happening today. The URL in question is . My goal is to click on one of the race links displayed on this page. Below is the HTML source code: < div cl ...

Creating a dropdown in HTML that overlaps another div requires using relative and absolute positioning

Having created a navigation bar with dropdown menu items that reveal on hover, I encountered an issue. Below the navigation bar lies a slideshow of images. Whenever I hover over the dropdowns, the slideshow div obstructs the view, making it impossible to s ...