Get Highchart data from textarea

Question

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<button onclick="build()">Click me</button>
<div id="container"></div>
<textarea id="chartCode" name="w3review" cols="30" rows="15" >
{
  series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],    
    exporting: {
      sourceWidth: 900,
      sourceHeight: 400,
    }
    
  }
</textarea>

const chart = document.getElementById('chartCode').textContent


console.log(chart)
Highcharts.chart('container', chart);

I'm trying to make a simple page where you add this section of the highcharts code into the textarea and click build and the chart will build with the code you input. I think it has to do with .textContent being a string.

https://jsfiddle.net/b2p7nrLc/3/

I using other methods to build the chart but could not get it working

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Nov 23 '22 at 08:52

score 0 · Answer 1 · answered Nov 23 '22 at 12:40

It's not working because the chart variable is a string and Highcharts requires to have a JS object to create a chart. You can keep the JSON strucutre and use the JSON.parse method:

Highcharts.chart('container', JSON.parse(chart));

Or use some other method to create an object: Converting a string to JSON object

Live example: https://jsfiddle.net/BlackLabel/89hmkqnf/

Get Highchart data from textarea

1 Answers1