Use variable to assign data points in creating CanvasJS graph?

问题

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:

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 }
       ...

来源：https://stackoverflow.com/questions/23092612/use-variable-to-assign-data-points-in-creating-canvasjs-graph

标签

canvasjs