sanjshah12
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:
the textbox contains the following sample code:
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.
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>
the textbox contains the following sample code:
<input name="TextBox1" value="[{"name":"Closed","y":1},{"name":"Rejected","y":1}]" id="TextBox1" type="text">
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER