Highchart stringify / parse series data as json

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
    <button id="btnSave" type="button">1. Save Data</button>
    <button id="btnEdit" type="button">2. Edit Data</button>
    <button id="btnLoad" type="button">3. Load Data</button>
    
    <p><label>This gets stored into DB:<input type="text" id="txtSaved" /></label></p>
    
  </body>

</html>

// Code goes here
var chart;

$(function () {
   // Init a pie chart:
   $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        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: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33
            }, {
                name: 'Chrome',
                y: 24.03,
                sliced: true,
                selected: true
            }, {
                name: 'Firefox',
                y: 10.38
            }, {
                name: 'Safari',
                y: 4.77
            }, {
                name: 'Opera',
                y: 0.91
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2
            }]
        }]
    });
    chart = $("#container").highcharts();
    
    $('#btnSave').click(function(){
      // get data from chart and convert to string:
      var sData = JSON.stringify(chart.series[0].options.data);
      
      // save to database (well textbox storeage):
      $('#txtSaved').val(sData);
    });
    
    $('#btnEdit').click(function(){
      // make a change to show editing of JSON data //
      
      // get object from store: 
      var oData = JSON.parse( $('#txtSaved').val() );
      
      // change point values to show change:
      for(var point in oData){
         oData[point].y = 20;
      }
      
      // update store with new data:
      var sData = JSON.stringify(oData);
      $('#txtSaved').val(sData);
    });
    
    $('#btnLoad').click(function(){
      // convert json string to object:
      var oData = JSON.parse( $('#txtSaved').val() );
      
      // load into chart:
      chart.series[0].setData(oData);
    });
});

/* Styles go here */

#txtSaved{
   width: 500px;
}