使用HTML文本框值作为HighCharts百分比

Question

I have the following code:

HTML Code

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                            ]
        }]
    });
});

The output of this code is a Pie Chart with a value of Chrome(15),IE(31) and Firefox(53) inside of a div.

Here is the set of Textboxes and a button:

    Number of Arson: <input type="text" id="arson" name="arson">
    Number of Homicide: <input type="text" id="homicide" name="homicide">
    Number of Physical Injuries: <input type="text" id="physicalinjuries" name="physicalinjuries">
    Number of Carnapping: <input type="text" id="carnapping" name="carnapping">
    Number of Ethical Law Violation: <input type="text" id="elv" name="elv">
<input type="submit" id = "chart" value="Submit">

Is it possible to pass the value of textbox and use it as a custom percentage(slices) in a chart(PIE) when the button is clicked?

My goal here is call a PHP Function that will use this select (count) from tablename and pass it to the textbox then when the button is pressed that value will be sent to the PIE Chart.

Answer 1

$('#chart').on('click', function() {

   var value = Number($('#arson').val());

   var myChart = $('#container').highcharts();

   myChart.series[0].data[0].update(value); 

});