User input to create D3 pie chart

Question

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 1

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