anychart not taking dynamically added data

Question

I am using anychart to draw a chart in my page, My code is like this

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

Everything looks okay to me, But chart is not working. but if I changed this line

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

to

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]]

Everything works. Can anyone point out what I am doing wrong here? And How I can overcome it?

Answer 1

It is a peculiar way to pass data but you can do that, just:

Option 1

You should use quotes in the input field:

<input id="chart-charitytomoney" value="[['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]]">

And you need to eval() the result:

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

Here is a sample: http://jsfiddle.net/yr35w6nu/8/

However, eval is no quite secure, if you want to store data in a string in a field like this consider using code like this:

Option 2

var data = JSON.parse($("#chart-charitytomoney").val().replace(/\'/g,'\"'));

shown in this sample: http://jsfiddle.net/yr35w6nu/9/

The same may be applied to your code with &quote;:

var data = JSON.parse($("#chart-charitytomoney").val().replace(/\"/g,'\"'));

Sample parsing quotes: http://jsfiddle.net/yr35w6nu/10/

Option 3

There is also a way to store CSV formatted string:

<input id="chart-charitytomoney" value="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\nRefer Friends,110.00;Gift Your Friends,200.00;Celebrate B\u0027day With Us,220.00;Celebrate Weekend,50.00\nPiggy Bank,4100.00\nGive a Single Gift,4050.00">

and then use it:

var data = anychart.data.set($("#chart-charitytomoney").val(),{rowsSeparator: ';'});

http://jsfiddle.net/yr35w6nu/13/