Databases
StackOverflow2013
Postsdbo
POChart.js line graph not updating when input values are changed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChart.js line graph not updating when input values are changed
    text
    copied!<p>I'm a bit stuck on this problem involving Chart.js and I'm trying to figure out whether the bug is occurring because of my code or if it's something to do with the API.</p> <p>I have a simple chart that takes some weight information from a database via ajax, and displays the information in a table and in a Chart.js line graph. I have a toggle button that switches the inputs and display numbers between kgs and pounds (using somewhat stupid logic i'm planning on cleaning up later) however when using kg's nothing displays in the graph but the table inputs are fine and using the console nothing seems to be wrong with the graph data.</p> <p>It seems bizarre but multiplying <code>data[i].weight_measurement</code> by 2.20462 seems to make it display, however any other multiplier (or no multiplier) just gives a blank graph. In all cases the table displays fine.</p> <p>Here is the relevant code:</p> <pre><code>// loop through data rows, appending html on new lines for (var i = 0; i &lt; data.length; i++){ if (islbs == false){ var user_weight_date = data[i].weight_date; var user_weight = parseFloat(data[i].weight_measurement).toFixed(2); var user_weight_id = parseInt(data[i].weight_entry_id); }else{ var user_weight_date = data[i].weight_date; var user_weight = parseFloat(data[i].weight_measurement * 2.20462).toFixed(2); var user_weight_id = parseInt(data[i].weight_entry_id); } // output data to a table for debugging $('#output').append("&lt;br /&gt;&lt;b&gt;date: &lt;/b&gt;"+user_weight_date+"&lt;b&gt; weight: &lt;/b&gt;"+user_weight+"&lt;button class=\"remove_weight_button\" id=\""+user_weight_id+"\"&gt;x&lt;/button&gt;"); // add weight info to weight chart data array lineChartData.datasets[0].data[i] = user_weight; lineChartData.labels[i] = user_weight_date; } // redraw the chart new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); </code></pre> <p>Also if relevant here's part of the ajax call to initially store the data</p> <pre><code>// ajax call to submit weight form data to the database, calls getWeightData() to refresh html on completion $("#weight_tracker_form").submit(function(){ if (islbs === true){ $converted_weight = $("#weight").val() / 2.20462; } else{ $converted_weight = $("#weight").val(); } $.ajax({ type: "POST", url: "weight_tracker_process.php", data: { weight: $converted_weight, date: $("#date").val(), weight_unit_lbs: islbs, action: "insert" }, success: function(){ getWeightData(); </code></pre> <p>The data is stored as a float in mysql</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload