0

I've been playing around with CanvasJs - but I'm having a problem generating a chart using form input fields that represent a data point.

For example, if I have the following input field that I want to graph:

<input id="box1">: 1st value
<input id="box2">: 2nd value
<input id="box3">: 3rd value

I have tried the following modification, trying to hold the input variables in an array, albeit without success:

var diff =  {
        first:  $('#box1').val(),
        second: $('#box2').val(),
            third:  $('#box3').val()
        };

var chart = new CanvasJS.Chart("chartcontainer", {
      title:{
        text: "Graph"              
      },
      axisY:{
      title:"%",
      suffix: "%"
      },
      data: [//array of dataSeries              
        { //dataSeries object

         /*** Change type "column" to "bar", "area", "line" or "pie"***/
         type: "column",
         dataPoints: [
         { label: "first", y: diff.first },
         { label: "second", y: diff.second },
         { label: "third", y: diff.third },                                    
         { label: "fourth", y: 40 },
         { label: "fifth", y: 50 }
         ]
       }
       ]
     });

See fiddle - sorry, I'm including this to show the html and code, but I cannot figure out how to add the canvasjs cdn.

Is it possible to use non-static values in the graph from a form input?

1 Answer 1

2

I figured out the issue - I needed to parseInt the jQuery object that my array was assigning.

Instead of:

...

  dataPoints: [
         { label: "first", y: diff.first },
         { label: "second", y: diff.second },
         { label: "third", y: diff.third },                                    
         { label: "fourth", y: 40 },
         { label: "fifth", y: 50 }

I used parseInt() which fixed the graphing issue:

      dataPoints: [
             { label: "first", y: parseInt(diff.first, 10) },
             { label: "second", y: parseInt(diff.second, 10) },
             { label: "third", y: parseInt(diff.third, 10) },                                    
             { label: "fourth", y: 40 },
             { label: "fifth", y: 50 }
       ...
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.