The message "The data format for the chart type is incorrect" pops up every time I try to input an array for a line graph

I am attempting to dynamically send array data to draw a chart. My goal is to receive input values [x and y] from the user using HTML. I have been successful in retrieving the data from HTML, but when I pass it to the chart, the format is not being recognized. I am referencing code from this website, where values are passed statically. However, I need to pass them dynamically. Any assistance would be greatly appreciated.

<html>

<head>

    <title>JSChart</title>

    <script type="text/javascript" src="jschatrs.js"></script>

</head>

<body>
    <tr>
        <td>
            <input type="text" id="xText" name="xvalue">
        </td>
        <td>
            <input type="text" id="yText" name="yvalue">
        </td>
    </tr>

    <div id="graph">Loading graph...</div>
    <button onclick="db()">Try it</button>

    <script type="text/javascript">
        function db() {
            var p = document.getElementById("xText").value;
            var q = document.getElementById("yText").value;
            var myData = new Array([0, 0]);
            myData.push([p, q]);
            alert(myData);
            var myChart = new JSChart('graph', 'line');
            myChart.setDataArray(myData);
            myChart.setLineColor('#8D9386');
            myChart.setLineWidth(4);
            myChart.setTitleColor('#7D7D7D');
            myChart.setAxisColor('#9F0505');
            myChart.setGridColor('#a4a4a4');
            myChart.setAxisValuesColor('#333639');
            myChart.setAxisNameColor('#333639');
            myChart.setTextPaddingLeft(0);
            myChart.draw();
        }
    </script>

</body>

</html>

Answer №1

The reason for this issue could be attributed to how input elements store their value property as a string data type. To resolve this, consider parsing them as integers:

let x = parseInt(document.getElementById("inputX").value, 10);
let y = parseInt(document.getElementById("inputY").value, 10);

Answer №2

One possible reason for the issue could be that the values retrieved from xText and yText are in string format rather than numeric.

If you are dealing with whole numbers, consider using this code:

var p = parseInt(document.getElementById("xText").value, 10);
var q = parseInt(document.getElementById("yText").value, 10);

For non-whole numbers, you can try the following:

var p = parseFloat(document.getElementById("xText").value);
var q = parseFloat(document.getElementById("yText").value);

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 there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

The validation function for email addresses in Express-validator seems to be malfunctioning

I've encountered an issue with the validation process in my code. Everything seems to be working fine except for the .isEmail method, which keeps flagging even valid email addresses as invalid. No matter how I adjust the validation rules, the problem ...

Calculating collision between circles in Three.js

I've been working on incorporating circle to circle collision for a pool game, aiming to make the balls bounce apart correctly upon impact. Despite trying various tutorials and scouring multiple questions on stackoverflow, I haven't found a solut ...

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...

What is the best way to access the data stored within a Promise object in a React application?

Below is the snippet of my code that handles parsing application data: async function parseApplication(data: Application) { const fieldGroupValues = {}; for (const group of Object.keys(data.mappedFieldGroupValues)) { const groupValue = data.mappedF ...

Comparing AJAX to a source script request

As I was exploring the Google API today, I came across their sample code where they simply request a URL using: <script src="src="https://www.googleapis.com/customsearch/v1?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1.."></script> Before seeing this, I ha ...

Quick and hassle-free form editing is a breeze with our user-friendly platform

Currently, the forms I have require certain files to be filled out before the submit button can be clicked. What I need is for the 'Title' field at the top of the list to also be marked as required. I know how to accomplish this for text fields, ...

Array logging mistakenly outputs a number

I needed to access the data from JSON outside of the xml function so that I could use it in multiple functions. When I initially logged the data, it displayed arrays with objects in it. However, when I checked the length instead, it returned zero. After re ...

The embedded component is throwing an error stating that the EventEmitter is not defined in

Currently, I am delving into the realm of angular and facing an issue. The problem lies in emitting an event from a component nested within the main component. Despite my efforts, an error persists. Below is a snippet of my code: import { Component, OnIn ...

The video on mobile is not loading properly, as the play button appears crossed out

There seems to be an issue with GIFs not loading on mobile devices, even though they are implemented as mobile-ready. <video src="/wp-content/uploads/2017/09/5.mp4" preload="metadata" autoplay="autoplay" loop="loop" muted="muted" controls="controls" ...

Using Jquery to retrieve data from PHP for validation in a datepicker widget

I am currently working on a project where I need to retrieve an array of invalid dates from a PHP file and highlight them in red on the date picker. However, the code below is not correctly populating the unavailableDates array as expected. It seems to d ...

Utilize esbuild to load Bootstrap JavaScript libraries

I have been attempting to incorporate the bootstrap JS into my esbuild setup: // index.js import 'jquery-import' import 'bootstrap' // jquery-import.js import jquery from 'jquery' window.jQuery = window.$ = jquery; The build ...

Bootstrap: The card-image-overlay has extended beyond the boundaries of the image

Apologies for this question, but CSS is not my thing. I just can't wrap my head around it. I'm attempting to superimpose some text and a button on an image, but the result is that they overflow from the image; https://i.sstatic.net/IlfdP.png T ...

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

Repetitive outcomes are observed when iterating through elements with Selenium in Python

I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...

In certain browsers, the link changes color to white

As I assist my brother in setting up a website for his business, we encountered an issue. In some browsers, hyperlinks appear as white and therefore invisible. Interestingly, the hyperlink is white in Firefox, but not when browsing in incognito mode, see t ...

What strategies can I use to reduce duplication in my HTML and JavaScript code?

Struggling with messy HTML and JS code? If you're using Bootstrap-3 and jQuery-1.11.0, dealing with dropdowns might be tricky. Especially when it comes to switching icons based on the dropdown state and ensuring only one dropdown is open at a time. Is ...

Error encountered: Unexpected token while trying to implement React + Node.js tutorial on a blog platform

I recently started following a tutorial on Site Point in an attempt to create my own React app. However, I hit a roadblock at these specific steps: mkdir public npm install npm run developement The first command failed for me because I already had a &a ...

Could the php function json_encode() be a security risk if used within a script tag?

A while back, I had read OWASP's XSS Prevention Cheat Sheet and created a wrapper function that included JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP by default to ensure safety. However, a user on Freenode/##php pointed out that this approac ...