javascript - 動的に追加されたデータを取得しないanychart

Question

Anychart を使用してページにグラフを描画しています。私のコードは次のようなものです

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />  
<input id="chart-charitytomoney" value="[[&quot;Charity 4&quot;,10.00],[&quot;Charity 2&quot;,20.00],[&quot;Charity Donate&quot;,100.00],[&quot;Donate Your Humanity&quot;,5920.00],[&quot;Gift your Work&quot;,3155.00],[&quot;Celebrate Baby Shower&quot;,770.00],[&quot;Refer Friends&quot;,110.00],[&quot;Gift Your Friends&quot;,200.00],[&quot;Celebrate B\u0027day With Us&quot;,220.00],[&quot;Celebrate Weekend&quot;,50.00],[&quot;Piggy Bank&quot;,4100.00],[&quot;Give a Single Gift&quot;,4050.00]]">
<div id="chart-container" style="height:550px!important"></div>
            <script type="text/javascript">

                $(document).ready(function(){
                anychart.onDocumentReady(function () {
                    var data = $("#chart-charitytomoney").val();
                 
                    // create column chart
                    chart = anychart.column();

                    // turn on chart animation
                    chart.animation(true);

                    // set chart title text settings
                    chart.title('Charities by donation');

                    // create area series with passed data

                    alert(data);
						var series = chart.column(data);

                    // set series tooltip settings
                    series.tooltip().titleFormatter(function () {
                        return this.x
                    });

                    series.tooltip().textFormatter(function () {
                        return '$' + parseInt(this.value).toLocaleString()
                    });
                    series.tooltip().position('top').anchor('bottom').offsetX(0).offsetY(5);

                    // set scale minimum
                    chart.yScale().minimum(0);

                    // set yAxis labels formatter
                    chart.yAxis().labels().textFormatter("${%Value}");

                    // tooltips position and interactivity settings
                    chart.tooltip().positionMode('point');
                    chart.interactivity().hoverMode('byX');

                    // axes titles
                    chart.xAxis().title('Product');
                    chart.yAxis().title('Revenue');

                    // set container id for the chart
                    chart.container('chart-container');

                    // initiate chart drawing
                    chart.draw();

                });
                });
            </script>

私にはすべて問題ないように見えますが、チャートが機能していません。しかし、この行を変更すると

 var data = $("#chart-charitytomoney").val();

に

var data = [["Charity 4", 10.00], ["Charity 2", 20.00], ["Charity Donate", 100.00], ["Donate Your Humanity", 5920.00], ["Gift your Work", 3155.00], ["Celebrate Baby Shower", 770.00], ["Refer Friends", 110.00], ["Gift Your Friends", 200.00], ["Celebrate B\u0027day With Us", 220.00], ["Celebrate Weekend", 50.00], ["Piggy Bank", 4100.00], ["Give a Single Gift", 4050.00]]

すべてが機能します。ここで私が間違っていることを誰かが指摘できますか? そして、どうすればそれを克服できますか？