Non-static values for chart using CanvasJS?

Question

I'm trying to figure out how to make a dynamic bar chart using CanvasJs.

The basic set up for the chart is as follows:

var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",//theme1
        title:{
            text: "Basic Column Chart - CanvasJS"              
        },
        animationEnabled: false,   // change to true
        data: [              
        {
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
            ]
        }
        ]
    });
    chart.render();
} 

My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.

User's will input numbers and the chart should update based on their input.

Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.

I've also tried setting var input = $('input').html and setting y as input but it does not work.

Thanks!

Answer 1

If anyone else is trying to figure this out here is how this is handled: Use variable to assign data points in creating CanvasJS graph? .

This also works with Charts.JS.