My goal is to have a single balloon for all stacked graphs. I modified my code according to this guide. Unfortunately, the data for messages is not being displayed.
https://i.sstatic.net/2MRhc.jpg
Did I make an error in my implementation?
function createChart(chartDiv, title) {
return AmCharts.makeChart(chartDiv, {
"type": "stock",
"theme": "black",
"chartCursor": {
"oneBalloonOnly": true,
},
"dataSets": [{
"fieldMappings": [{
"fromField": "ack",
"toField": "ack"
}, {
"fromField": "messages",
"toField": "messages"
}],
"color": "#1d6a96",
"categoryField": "date",
}],
"categoryAxesSettings": {
"alwaysGroup": true,
"groupToPeriods": ["6mm"],
"minPeriod": "4mm",
"dashLength": 0,
},
"panels": [{
"gridAboveGraphs": true,
"stockGraphs": [{
"type": "column",
"id": "g1",
"valueField": "ack",
"lineColor": "#7f8da9",
"fillColors": "#7f8da9",
"fillAlphas": 0.85,
"periodValue": "Sum",
"useDataSetColors": false,
"balloonText": "Ack:[[value]], missing:[[messages]]",
}, {
"type": "column",
"id": "g2",
"valueField": "messages",
"lineColor": "#FDD400",
"fillColors": "#FDD400",
"fillAlphas": 0.85,
"periodValue": "Close",
"useDataSetColors": false,
"showBalloon": false
}],
}],
"valueAxesSettings": {
"inside": false,
"id": "v1",
"dashLength": 0,
"minimum": 0,
"gridAlpha": 0,
"stackType": "regular",
"axisAlpha": 0.5,
"showFirstLabel": false,
},
});
}
I am passing data to the chart from an Ajax response as JSON.
function insertChartData(chart, response) {
var dataProvider = [];
for (var i = 0; i < response.Stats.length; i++) {
dataProvider.push({
date: new Date(response.Stats[i].Checked),
ack: response.Stats[i].Income,
messages: response.Stats[i].Messages,
});
}
chart.AmChart.dataSets[0].dataProvider = dataProvider;
chart.AmChart.validateData();
}