Jamshed Qureshi Jamshed Qureshi - 2 months ago 16
Javascript Question

User input to create D3 pie chart

I'm trying the create a pie chart using d3pie.js user input values. Below is my code that is functional but takes random numbers on button click.

But I wan't the new segment value to be taken from user input field. I tried assigning the jquery function to a variable and then assigning that variable to value like below but that didn't work. I also tried to directly define the Jquery function to define value.

Attempt 1 (Didn't work):

var a = $("#first").val();
var num = 4;

$("#addData").on("click", function() {

adata.push({
label: num.toString(),
value: a
});

pie.updateProp("data.content", adata);
num++;


Attempt 2 (Didn't work):

adata.push({
label: num.toString(),
value: $("#first").val()
});


Below is my working code, would really appreciate some inputs from the folks on this.

var adata = [
{
"label": "JavaScript",
"value": 5,
},
{
"label": "Ruby",
"value": 3,
},
{
"label": "Java",
"value": 2,
}
];
--------------------
"data": {
"sortOrder": "value-desc",
"content": adata
--------------------
var num = 4;
$("#addData").on("click", function() {
adata.push({
label: num.toString(),
value: Math.floor(Math.random() * 10) + 1
});
pie.updateProp("data.content", adata);
num++;

--------------------
<input type="text" class="form-control" id="first">
<button type="button" class="btn btn-default" id="addData">Add Value</button>

Answer

Problem is because you are passing a string in value, it expects a number.

in your code

adata.push({
  label: num.toString(),
  value: a //incorrect it has to be a number.
});

need to do

 adata.push({
  label: num.toString(),
  value: +$("#first").val() //make it a number so + is appended.
});

working code here

Comments