Link to home
Start Free TrialLog in
Avatar of sanjshah12
sanjshah12Flag for United Kingdom of Great Britain and Northern Ireland

asked on

Adding datasource for a highchart from a textbox via JS

Hi,

I am populating a highchart data via JS, the data is coming from a textbox on the page, this content is dynamically replaced:

        <script>
            function myFunction() {
                var myvar = document.getElementById("TextBox1").value;

                Highcharts.chart('piechart2', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: 'Data, 2018'
                    },
                    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: [{ name: 'Permits', data: myvar }]
                });
            };
    </script>

Open in new window


the textbox contains the following sample code:
<input name="TextBox1" value="[{"name":"Closed","y":1},{"name":"Rejected","y":1}]" id="TextBox1" type="text">

Open in new window


Currently when the JS is executed the chart does not render, I believe it is because the myvar which is used for the data is not copied correctly. If I replace 'myvar' with the contents of the textbox the chart is rendered correctly.

Any help is appreciated.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sanjshah12

ASKER

Many thanks leakim971, you re correct the string needs to be converted to a JSON.