Checkbox experiments

by mark47

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<input type="text" id="enterValue" />
<a id="launchIt">Launch chart</a>

<!-- Main Chart Modal -->
<div id="modalChart" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalChartTitle" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="modalChartTitle">test</h3>

    </div>
    <div class="modal-body">
        <div id="container"></div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

JavaScript

$(function () {

    function callback($this) {
        $this.series[0].data[1].setState('hover');
        $this.tooltip.refresh($this.series[0].data[1]);
    }

    var chartZ = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            width: 300,
            height: 240
        },

        series: [{
            data: [
                [5, 11],
                [7, 9],
                [10, 16]
            ],
            type: 'scatter'
        }],
    }, callback);

    var grabVal;
    $("#enterValue").focusout(function(){
      grabVal = $(this).val();
    });
    
    $("#launchIt").on("click", function () {
        chartZ.series[0].setData([grabVal]);
        $("#modalChart").modal();
    });

});