Combining flot and bootstrap for enhanced data visualization

Having some issues using flot.js to plot currents f in my code. It seems like including flot.js is causing the problem. The versions I have are jquery 3.4.0 and Flot 0.8.3.

The code runs smoothly when the flot library is not included.

Here's my index.php file:


    <html>
    <head>
        <title>Jupiter</title>
        <link rel="icon" href="./pics/jupiter.png">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/frontend.css">
        <link rel="stylesheet" href="./css/bootstrap-toggle.min.css">
        <link rel="stylesheet" href="./css/jquery-confirm.min.css">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/bootstrap-toggle.min.js"></script>
        <script src="./js/bootbox.min.js"></script>
        <script src="./js/jquery-confirm.min.js"></script>
        <script src="./js/jquery.flot.min.js"></script>
        <script src="./js/jquery.flot.time.js"></script>
        <script src="./js/jquery.flot.tooltip.js"></script>
    </head>
    <body>

Main content goes here
<div id="RFD_curent_1"></div>
</body>
<script src='./js/index.js'></script>
</html>

This is my index.js file:


    function initialize_currents(){
            var time=(new Date).getTime();
            for(var i=0;i<14400;i++){
                //data1.push([time+i-14400000,32]);
                data1.push([]);
            }
            for(var i=0;i<14400;i++){
                //data2.push([time+i-14400000,25]);
                data2.push([]);
            }
            //data.push([time,0]);
            var dataset = [{label: "0xbb36",data: data1},{label:"0xc563",data:data2}];
            $.plot($("#RFD_curent_1"), dataset, options);
        }
    $(document).ready(function() {
            initialize_currents();
    }

In Chrome console, I receive a warning followed by an error message:

jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'toLowerCase' of undefined TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.t.color.extract
(http://192.168.0.170/js/jquery.flot.min.js:1:695)
    at _ (http://192.168.0.170/js/jquery.flot.min.js:1:27080)
    at W (http://192.168.0.170/js/jquery.flot.min.js:1:13848)
    at new e (http://192.168.0.170/js/jquery.flot.min.js:2:1045)
    at Function.t.plot (http://192.168.0.170/js/jquery.flot.min.js:2:3828)
    at initialize_currents (http://192.168.0.170/js/index.js:109:11)
    at HTMLDocument.<anonymous> (http://192.168.0.170/js/index.js:434:9)
    at e (http://192.168.0.170/js/jquery.min.js:2:29453)
    at t (http://192.168.0.170/js/jquery.min.js:2:29755) undefined



jquery.min.js:2 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.t.color.extract (jquery.flot.min.js:1)
    at _ (jquery.flot.min.js:1)
    at W (jquery.flot.min.js:1)
    at new e (jquery.flot.min.js:2)
    at Function.t.plot (jquery.flot.min.js:2)
    at initialize_currents (index.js:109)
    at HTMLDocument.<anonymous> (index.js:434)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Answer №1

It became clear to me that the issue was rather straightforward - you used a comma (,) instead of a dot (.) when illustrating the float.

//data2.push([time+i-14400000.25]);

Answer №2

When working with Flot, it requires arrays of two-element arrays representing x and y values in its datasets. In this case, the provided array consists of empty subarrays which is not suitable. It would be more appropriate to populate the array like this:

data2.push([i, i]);

This can serve as a sample test data.

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

Combining PHP with the power of Jquery for seamless integration

I am in the process of developing a feature where, upon clicking a button using Jquery, it triggers a function to display images on the existing page. I aim for this function to remain active even when the user navigates to a different page via hyperlink, ...

The reveal/conceal feature will not reveal all elements at the outset

I've been working on implementing a show/hide elements filter. However, I'm facing an issue where all elements that are supposed to display initially are hidden instead. Additionally, the 'active' class is not being properly removed or ...

Why does Typeahead display a JSON object in the input field upon clicking?

My suggestion engine is working well, but I am facing an issue where the json object appears in the input element when I click on an item. I want only the OrgName to show up in the input value. <input class="form-control companySearch" type="text" valu ...

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

Is it possible to utilize a global constant in Angular without the need for injection into the controller?

I have defined a constant object in coffeescript: angular .module 'main', [] .constant 'CONFIG', IMAGEROOT: 'http://some-img.s3-website-ap-southeast-1.amazonaws.com/' When using the constant in html, I write it like ...

Create a link that allows users to download a file with just one click

By implementing a feature on my Node.js server, users can generate files by clicking a button on a webpage. The server then generates a .zip file that I want to make available for automatic download onto the users' clients. Once the download is comple ...

How to customize the arrow color of tooltips in Bootstrap 4

After spending an hour searching online, I still can't figure out how to change the tooltip arrow color to red. None of the code snippets I found seem to work for me. My latest attempt was: .tooltip-arrow { border-right-color: red; border-left-c ...

Showcasing the time variance using javascript/jquery

I am currently using a datepicker to select dates, with the intention of calculating the difference between the chosen dates and then displaying an alert with the calculated difference. Unfortunately, I am encountering issues with getting the code to work ...

Using the OR condition in the ternary operator within ReactJS

Recently, I have started working on a ReactJS project focusing on menus. In this project, I have successfully implemented logic for the active menu feature. For instance, when a user is on page 2, the corresponding menu item will be highlighted as active. ...

What is the correct method for retrieving values from a JSON array?

To extract information from a JSON file, I have created a function as shown below: function getarray(){ $http.get('http://localhost/prebuilt/countries.json') .success(function(data) { $scope.countries = data; }); return data; } Howe ...

Having trouble getting $compile to work in an injected cshtml file with Angular

Summary I am currently working on a large application where everything is designed to be very generic for easy expansion. One of the components I am focusing on is the dialog. Before suggesting alternatives like using ngInclude or angular templates, let m ...

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

This function is no longer supported Original query : I would greatly appreciate any assistance and guidance. I am attempting to create a function that moves selected products from the Cart to another table so I can reorder them according to customer de ...

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

Adding JSON data to an array with a click - a step-by-step guide

As I dive into working with React and integrating API JSON data into my project, I've encountered a small hurdle. I've implemented a function that allows users to enter a search query, resulting in a list of devices associated with their input be ...

Navigating through ajax requests on a Leaflet map

Currently, I have a leaflet map set up with the leaflet-panel-layers plugin to create a visually appealing layer control. To create my layers and overlays, I have two functions in place. The issue arises when trying to access external geoJSON files, as lea ...

Uncertain as to the reason behind why the ng-repeat-start and ng-repeat-end are causing an

To begin, let's provide some background on what I aim to accomplish: <tr ng-repeat-start="eachParam in myArray"> <td rowspan=2>On site</td> <td rowspan="2" class = "success">{{eachParam.support}}</td> <td ...

Transmitting messages to socket.io rooms using node.js

As I embark on building my first app in node.js - a chat application, I have encountered an issue with sending messages to the correct room. It seems that socket.room isn’t being stored, possibly due to my approach of refreshing the page for loading view ...

Creating a customizable dropdown menu in HTML with potential Javascript integration

I'm looking to add a drop-down menu similar to an <options> tag within an HTML form. However, I also want users to have the ability to type in their own input if they choose, in addition to selecting from a predefined list of options. Essentiall ...

What steps can be taken to eliminate the useSearchParams() and Suspense deployment error?

I'm encountering an issue where ⨯ useSearchParams() needs to be enclosed within a suspense boundary on the page "/PaymentPage". More information can be found at: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout Although I have wra ...