add editable textbox to specific datapoint in a chart

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 trigger. Check the jsfiddle from fusionchart example here... [dataPlotClick]1event. However, the goal is to show an external text box as modal form or something else, record user comments and then store them in mysql database. Finally, update tooltip with new comments to re-load chart data. Any inputs are helpful. Below is what I have.

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "paletteColors": "#0075c2,#1aaf5d",
            "bgcolor": "#ffffff",
            "showBorder": "0",
            "showShadow": "0",
            "showCanvasBorder": "0",
            "usePlotGradientColor": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "showAxisLines": "0",
            "showAlternateHGridColor": "0",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "xAxisName": "Day",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "1"
            }, {
                "label": "2"
            }, {
                "label": "3"
            }, {
                "label": "4"
            }]
        }],
        "dataset": [{
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "30",
                "toolText" : 'this value is 30'
            }, {
                "value": "25",
                "toolText" : 'below expectation',
            }, {
                "value": "30",
                "toolText" : 'this value expected'
            }, {
                "value": "35",
                "toolText" : 'exceeds'
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "30",
                "color": "#6baa01",
                "valueOnRight": "1",
                "displayvalue": "Average"
            }]
    }]},
        "events": {

        "dataPlotClick": function (eventObj, dataObj) {
        console.log(dataObj);
        var data_index = dataObj['dataIndex'];
        var tool_text = dataObj['toolText'];
        alert(data_index);
        alert(tool_text);       
          }
        }  
}).render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Recommended topics

Hot tags