This is function that renders my bar graph
// set its maxH value
var maxH = screenH * 0.052;
scrollH = (maxH / 100 * screenHeight) + 100;
// max allowed height is only 480
if (scrollH > 480) { scrollH = 480; }
showLoadingModal("Rendering bar graph for the selected graph options.");
var barGraphContainer = $("#graph-bar-wrapper");
removeBarGraph(barGraphContainer);
// initiate the bar graph
barGraphContainer.find("#graph-bar").ejChart(
{
primaryXAxis:
{
title: { text: toTitleCase(groupValue).toUpperCase(), font: { fontFamily: 'Oswald', size: '17px' } },
font: { size: '12px', fontFamily: 'Open Sans' },
majorGridLines: { visible: true, color: "rgb(89,89,89)" }
},
primaryYAxis:
{
font: { size: '12px', fontFamily: 'Open Sans' },
title: { text: 'NO OF INTERACTIONS', font: { fontFamily: 'Oswald', size: '17px' } }
},
commonSeriesOptions: {
type: 'column',
animation: true
},
series: [{
//points: graphQRData,
dataSource: { data: graphQRData, xName: ["x"], yNames: ["y"] },
name: 'QR Scans',
style: { interior: secondaryColor },
pointsTooltipTemplateID: 'qr-tooltip'
},
{
//points: graphNFCData,
dataSource: { data: graphNFCData, xName: ["x"], yNames: ["y"] },
name: 'NFC Taps',
style: { interior: primaryColor },
pointsTooltipTemplateID: 'nfc-tooltip'
},
{
//points: graphTotalData,
dataSource: { data: graphTotalData, xName: ["x"], yNames: ["y"] },
name: 'Total',
style: { interior: primaryColorDark },
pointsTooltipTemplateID: 'total-tooltip'
}],
showTooltip: true,
size: { height: scrollH },
legend: { visible: true, shape: 'circle', position: 'Right', alignment: 'Near', itemSize: { width: 8.5, height: 8.5 }, textOption: { font: { fontFamily: 'Open Sans', size: '13px' } } }
});
The graph renders perfectly, but for some reason the animation does
not happen. If I replace the type from "column", to "line", the animation
works perfectly. any idea why???!!!!
