add editable textbox to specific datapoint in a chart

Question

I am trying to implement editable textbox ( solution in either chartjs or fusion charts is fine). Tried a bit in fusioncharts capturing user click event on a data point using tr

Answer 1

You can use the getJSONData and the setJSONData to get and set your data. On every dataPlotClick event, you first fetch the entire data. Append/ Modify it, say the tooltext value for it and update the chart using the setJSONData method. Refer to this following snippet or this fiddle:

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenue (In USD)",
        "numberPrefix": "$",
        "paletteColors": "#0075c2",
        "bgColor": "#ffffff",
        "borderAlpha": "20",
        "canvasBorderAlpha": "0",
        "usePlotGradientColor": "0",
        "plotBorderAlpha": "10",
        "placevaluesInside": "1",
        "rotatevalues": "1",
        "valueFontColor": "#ffffff",
        "showXAxisLine": "1",
        "xAxisLineColor": "#999999",
        "divlineColor": "#999999",
        "divLineIsDashed": "1",
        "showAlternateHGridColor": "0",
        "subcaptionFontBold": "0",
        "subcaptionFontSize": "14"
      },
      "data": [{
        "label": "Jan",
        "value": "420000"
      }, {
        "label": "Feb",
        "value": "810000"
      }, {
        "label": "Mar",
        "value": "720000"
      }, {
        "label": "Apr",
        "value": "550000"
      }, {
        "label": "May",
        "value": "910000"
      }, {
        "label": "Jun",
        "value": "510000"
      }, {
        "label": "Jul",
        "value": "680000"
      }, {
        "label": "Aug",
        "value": "620000"
      }, {
        "label": "Sep",
        "value": "610000"
      }, {
        "label": "Oct",
        "value": "490000"
      }, {
        "label": "Nov",
        "value": "900000"
      }, {
        "label": "Dec",
        "value": "730000"
      }]
    },
    "events": {

      /**
       * @description
       * Triggered when a data plot is clicked.
       *
       * @param {Object} eventObj: An object containing all the details related to this event like eventId, sender, etc.
       * @param {Object} dataObj: An object containing all the details related to chart data, such as the chart ID, index and data value of the clicked data plot.
       */

      "dataPlotClick": function(eventObj, dataObj) {
        var data_index = dataObj['dataIndex'],
          sender = eventObj.sender,
          JSONData = sender.getJSONData();
        JSONData.data[data_index].toolText = prompt("Enter text here");
        sender.setJSONData(JSONData);
      }
    }
  }).render();
});

body {
  padding: 5px;
  margin: 0 auto;
}
#header {
  display: none;
}
#indicatorDiv {
  width: 500px;
  font-family: 'Arial', 'Helvetica';
  font-size: 14px;
}
p {
  margin-top: 20px;
  margin-bottom: 20px;
}
#attrs-table {
  text-align: center;
  width: 500px;
}
.parameter-name,
.parameter-value {
  width: 250px;
  font-weight: bold;
  text-align: center;
  float: left;
}
.title,
.value {
  float: left;
  width: 230px;
  height: 20px;
  background: #fff;
  padding: 5px 10px;
}
.title {
  clear: left;
}
.title:nth-child(4n+1),
.value:nth-child(4n+2) {
  background: rgb(0, 117, 194);
  color: #fff;
}
.value {
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- This sample shows the event parameters, and their values, when dataplotClick event is triggered-->
<div id="indicatorDiv">Event name: <b> dataplotClick </b>
  <br>
  <br>Triggered when a data plot is clicked.</br>
  <br>All events, when triggered, will provide two parameters for the handler - <b> eventObj </b> (object containing information generic to all events) and <b> dataObj </b> (object containing information specific to an event).</br>br> Click any of the data plots
  to trigger the event. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</br>
  </br>
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
  <div>
    <div id="header">
      <div class="parameter-name">Parameter Name</div>
      <div class="parameter-value">Parameter Value</div>
    </div>
    <div id="attrs-table"></div>
  </div>
</div>

So you see, here on clicking a column, a prompt box opens(as was said in your sample code) What you enter in the prompt goes to the tooltext of that indexed column. You can do other operations such as recording new user comments or saving them in database.