Dynamically Update Bar Chart in Javascript With Sliders Values

Question

I am attempting to create a bar-chart that dynamically responds to input from a slider.

(1) I want to access the slider values in an outside script. Currently, I have tried to do this by defining a function that used document.getElementById().value. When I run alert to check if this value is being stored, I get undefined. What's going on here?

(1b) In copy-pasting code into plunker, it says "unexpected start tag," and it is ignored. Why is this happening?

(2) Given the current code, I want to take the slider value, multiply it by a known constant and then order the bar charts by these outputs. What would be the best way to proceed in doing this sort of thing?

Code attached here: https://plnkr.co/edit/C0iV74mBkFbFM0BVG7Ax?p=streamer

<script>
...
var test;
function kk()
{
    test = document.getElementById('cardiovascular').value;
    alert(test)
}   
...
</script>

<h4> Cardiovascular Mortality </h4>
<div id="cardiovascular"></div>
<body onload="onload();">   
<input type="button" value="click" onclick="kk();"/>
</body>

score 1 · Answer 1 · edited May 23 '17 at 12:24

A couple of issues. According to w3schools, The value property sets or returns the value of the option (the value to be sent to the server when the form is submitted). Your id is assigned to the input's parent div.

Assuming you know the number of items i'd do something along the lines of this quick codepen I made.

As a general coding tip, rather than complicating your code by trying to do everything at once i'd break your task into smaller more manageable chunks. That way it's much easier to sort through and debug your code. It might help with your random errors as well.

In terms of ordering your bars according to their values, id hit up this post here although i'd say something like this is much easier using jQuery if at all possible. You can check out an example of this here.

Good luck and please don't forget to up-vote an answer if it answers your question.

<p>value for chart 1</p>
<input id="value_for_chart1" type="text" value="3"/>
<p>value for chart 2</p>
<input id="value_for_chart2" type="text" value="3"/>
<input id="trigger_button" type="button" value="click" onclick="kk()"/>

<div class="bar-container">
   <div id="bar-two" value=""></div>
   <div id="bar-one" value=""></div>
</div>

#bar-one {
   width: 0px;
   height: 50px;
   background-color: red;
}
#bar-two {
   width: 0px;
   height: 50px;
   background-color: green;
}

function kk() {
var chart1value;
var chart2value;
var fixedValue = 100; //or whatever your fixed value is
var barWidth1 = document.querySelector("#bar-one");
var barWidth2 = document.querySelector("#bar-two");
   //Return value of input. We use parseInt here to convert the string"value" to the integer value
   chart1value = parseInt(document.getElementById('value_for_chart1').value);
   chart2value = parseInt(document.getElementById('value_for_chart2').value);
   chart1value = chart1value * fixedValue;
   chart2value = chart2value * fixedValue;
   //assign value to bar chart item, you can grab this value later for sorting
   document.getElementById('bar-one').value=chart1value;
   document.getElementById('bar-two').value=chart2value;
   //set the css width property of the bar to its value
   barWidth1.style.width = chart1value + "px";
   barWidth2.style.width = chart2value + "px";
}

Dynamically Update Bar Chart in Javascript With Sliders Values

1 Answers1