how do I save the state of my charts using local JSON file?

Question

I'm able to initialize my chart with a JSON file write from my directory. However, I'm having a hard time trying to implement the system whereby all the changes made on my index.html (containing charts) will be saved and persistent. The ultimate goal is to have the same data + nodes stored even if the index.html is refreshed.

In this regard, I'm able to listen to update, create, remove and delete events, but I have no idea what to actually do once these events are triggered. I should be able to have a way to edit my local JSON file directly with the arguments received from these events. So far I can get the arguments, but I don't know how to update my JSON file with these new arguments. any ideas in this regard will be highly appreciated.

Here's how my code looks far. It does everything I want except making the nodes + data persistent.

getOrgChart.themes.myCustomTheme = {
  size: [270, 400],
  toolbarHeight: 46,
  textPoints: [{
      x: 130,
      y: 50,
      width: 250
    },
    {
      x: 130,
      y: 90,
      width: 250
    }
  ],
  textPointsNoImage: [{
      x: 130,
      y: 50,
      width: 250
    },
    {
      x: 130,
      y: 90,
      width: 250
    }
  ],
  expandCollapseBtnRadius: 20,
  defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
  box: '<rect x="0" y="0" height="400" width="270" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)"  />',
  text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
  image: '<clipPath id="getMonicaClip"><circle cx="135" cy="255" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="50" y="150" height="190" width="170"/>',
  reporters: '<circle cx="80" cy="190" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="100" x="80" y="195">[reporters]</text>'

  //ddddd: '<text x="0" y="0">1</text>'
};

$.getJSON("http://localhost:8000/data.json", function(source) {
  var peopleElement = document.getElementById("people");
  var orgChart = new getOrgChart(peopleElement, {
    photoFields: ["Image"],
    linkType: "M",
    enableEdit: true,
    enableDetailsView: false,
    theme: "myCustomTheme",
    enableGridView: true,
    primaryFields: ["Name", "Title", "Phone", "Address"],
    enablePrint: true,
    updateNodeEvent: wo,
    renderNodeEvent: renderNodHandler,
    dataSource: source
  });
});






function wo(sender, args) {
  n = args.node.data.Name
  alert(n)
}


function renderNodHandler(sender, args) {
  for (var i = 0; i < args.content.length; i++) {
    if (args.content[i].indexOf("[reporters]") != -1) {
      args.content[i] = args.content[i].replace("[reporters]", args.node.children.length);
    }
  }
}

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#people {
  width: 100%;
  height: 100%;
}

.get-text {
  fill: #686868 !important;
}

.myCustomTheme-box {
  fill: #FFFFFF;
  stroke: #DDDAB9;
}

.reporters {
  fill: #0072C6;
}

.reporters-text {
  fill: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="opendb.js"></script>
<script src="getorgchart.js"></script>
<div id="content">
  <div id="people"></div>
</div>

Answer 1

ok so as nobody seems to be answering this. I'm going to answer this myself for future references.

Alright, so I had to create backend to deal with the problem. Specifically, I installed nodejs. I used express.js and ajax to send/receive data from the client and server. Using the events provided in the getorgcharts documentation namely, insertNodeEvent, updateNodeEvent etc I implemented CURD. In this regard, an npm library diskdb was a life saver! The persistent was made possible by altering the json file with respect to the CURD operation being performed by the client. The server-side code would then add/update/edit/delete the records in the json file accordingly.