I recently started working with Amcharts and I am seeking advice on what I may be doing incorrectly.
Below is the snippet of my 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";
for (var i = 0; i < 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 + i * 2;
chartData1.push({
chartcol: newdateFormat,
value: amount,
volume: numofDocuments
});
}
}
setTimeout(function () {
console.log(chartData1);
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [
// Data sets configuration
],
panels: [
// Panels configurations
],
"categoryAxesSettings": {
// Category axes settings
},
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
dataSetSelector: {
position: "left"
},
"export": {
"enabled": true
}
});
chart.validateData();
}, 100)
Refer to my HTML code in Index.cshtml file below. It's a default ASP.NET MVC page with a shared layout in _layout.cshtml where I include the reference to the JS file used 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>
While I have successfully generated the chart, the balloonText does not seem to display values as expected. Refer to the image under the heading for more details.