Drawing charts on html5 canvas using jqplot - html

Question

I am using jqplot charts for drawing different charts on html5 canvas. All charts are working well in all browsers but vertical bar(stacked and clustered) and line charts are getting overlapped in safari. Any reason why is this happening?
The following code lines i have used to draw clustered bar chart:
function DrawChart(chartId, chartType, categories, seriesWithData, grouping)
{
/*for(var i=0;i<seriesWithData.length;i++)
{
eachSeriesArr = seriesWithData[i].split(";");
seriesLabels[i] = eachSeriesArr.splice(0,1);
eachSeriesArr.splice(eachSeriesArr.length-1, 1);
for(var j=0; j<eachSeriesArr.length;j++)
{
eachSeriesArr[j] = Math.round(eachSeriesArr[j]).toString();
}
globalSeriesArr.push(eachSeriesArr);
} */
// Testing with hard coded value
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plotChart = $.jqplot(chartId, [s1,s2,s3], {
seriesDefaults:{
showLabel: true,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
//showDataLabels: true,
barDirection: 'vertical',
},
pointLabels: {show: true}
},
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
autoscale: true,
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: categories,
},
yaxis: { pad: 1.0 }
},
legend: {show: true, placement: 'outside', location: 'e' },
});
}
//This is the canvas div in html file
<div id="rId2" style="width:640px;height:426px;"></div>
<script type="text/javascript">
$(document).ready(function(){
alert('document loaded completely');
DrawChart('rId2', 'barChart;col', new Array(
"Category 1",
"Category 2",
"Category 3",
"Category 4"
), new Array(
"Series 1;4.3;2.5;3.5;4.5;",
"Series 2;2.4;4.4000000000000004;1.8;2.8;",
"Series 3;2;2;3;5;"
), 'clustered')
});
</script>
`
I am calling this function (defined in a javascript file) on document ready function from html file
Is anything missing?