I have try this code. It works on my computer but not responsive on mobile phone
<?php
foreach($visitor as $result){
$month[] = $result->date; //for month
$value[] = (float) $result->count; //for count
}
?>
<div class="col-md-12">
<canvas id="canvas" width="560" height="280"></canvas>
</div>
<script>
var lineChartData = {
labels : <?php echo json_encode($month);?>,
datasets : [
{
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(152,235,239,1)",
data : <?php echo json_encode($value);?>
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
var canvas = new Chart(myLine).Line(lineChartData, {
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.005)",
scaleGridLineWidth : 0,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
bezierCurve : true,
bezierCurveTension : 0.4,
pointDot : true,
pointDotRadius : 4,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 2,
datasetStroke : true,
tooltipCornerRadius: 2,
datasetStrokeWidth : 2,
datasetFill : true,
legendTemplate : "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
responsive: true
});
</script>
I’m trying to figure out how I can get my charts to be responsive on a mobile phone. I want them to go underneath each other when on a small screen.