javascript - How to retrieve groupby sum field to show balloonText in Amchart -

i newbie in amcharts, please tell me doing wrong.

here javascript code.

var chartdata1 = [];    generatechartdata();   function generatechartdata() {          var month = new array();         month[0] = "jan";         month[1] = "feb";         month[2] = "mar";         month[3] = "apr";         month[4] = "may";         month[5] = "jun";         month[6] = "jul";         month[7] = "aug";         month[8] = "sep";         month[9] = "oct";         month[10] = "nov";         month[11] = "dec";          (var = 0; < 12; i++) {           var monthname = month[i];         var year = "2016";          var newdateformat = monthname + " " + year  ;         var numofdocuments = math.round(math.random() * (10));         var amount = math.round(math.random() * (1000 + i)) + 500 + * 2;      chartdata1.push({         chartcol: newdateformat,         value: amount,         volume: numofdocuments     });  } }  settimeout(function () {  console.log(chartdata1);  var chart = amcharts.makechart("chartdiv", {     type: "stock",     datasets: [         {             title: "first data set",             fieldmappings: [{                 fromfield: "value",                 tofield: "value",             }, {                 fromfield: "volume",                 tofield: "volume",             }],             dataprovider: chartdata1,             categoryfield: "chartcol",             color: ["#ff3300", "#000000"],         }],      panels: [{         showcategoryaxis: false,         title: "value",         percentheight: 70,          stockgraphs: [{             id: "g1",             title: "amount",             valuefield: "value",             comparable: false,             bullet: "round",             comparefield: "value",             balloontext: "<div>"+                             "<div>"+                                  "<div style='border:5px solid #3388ff; width:2px; display:inline-block; white-space:nowrap'>" +                                  "</div>" +                                     " amount:<b>[[value]]</b>" +                              "</div>" +                              "<br />" +                              "<div>" +                                  "<div style='border:5px solid #ff3300; width:2px; display:inline-block; white-space:nowrap'>" +                                  "</div>" +                                     " number of documents:<b>[[volume]]</b>" +                                   "</div>"+                              "</div>" +                          "</div>",             comparegraphballoontext: "amount:<b>[[value]]</b>",             "usedatasetcolors": false,             "linecolor": "#3388ff",         }, {             title: "documents",             valuefield: "volume",             showballoon: false,             comparable: false,             periodvalue: "open",             comparefield: "volume",             linealpha: 0,             includeinminmax: false,         }],          stocklegend: {             periodvaluetextcomparing: "[[percents.value.close]]%",             periodvaluetextregular: "[[value.close]]"         }     },        {           title: "volume",           percentheight: 30,           stockgraphs: [{               valuefield: "volume",               type: "column",               periodvalue:"open",               showballoon: false,               fillalphas: 1           }]       }     ],      "categoryaxessettings": {         "maxseries": 1,         "grouptoperiods": ["mm"]     },      chartscrollbarsettings: {         graph: "g1"     },      chartcursorsettings: {         valueballoonsenabled: true     },      datasetselector: {         position: "left"     },     "export": {         "enabled": true     } });   chart.validatedata();   }, 100) 

my html code index.cshtml (default asp.net mvc page shared layout in _layout.cshtml had included reference js file shown above)

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/serial.js"></script> <script src="http://www.amcharts.com/lib/3/themes/light.js"></script> <script src="http://www.amcharts.com/lib/3/amstock.js"></script> <div id="chartdiv" style="width: 100%; height: 500px;"></div> 

i able generate chart ballontext not containing value, can check image gettting shown in heading

instead of balloontext use balloonfunction:

balloonfunction: function(dataitem) {      return "amount: <b>" + dataitem.datacontext.datacontext.value + "</b><br>" +             "documents: <b>" + dataitem.datacontext.datacontext.volume + "</b>"; } 

working demo: https://jsfiddle.net/lukaszwiktor/ulvd8fwq/