I am attempting to save a copy of my chart created using Chart.JS graphing libraries. When I am using the .toBase64Image() function to display or save the .png image I am getting a blank image. I have tried displaying in an img tag and saving the image with PHP. save64Img is my function to display/save the image. Has anyone had any luck using this feature?
lineOptions = {
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
bezierCurve : false,
pointDot : true,
pointDotRadius : 4,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 20,
datasetStroke : true,
datasetStrokeWidth : 1,
datasetFill : true,
responsive: true,
scaleOverride : true,
scaleSteps : 5,
scaleStepWidth : 20,
scaleStartValue : 0
}
lineChart = {
labels : label,
datasets : [
{
label: "stat1",
fillColor : "rgba(128,0,0,0.2)",
strokeColor : "rgba(128,0,0,1)",
pointColor : "rgba(128,0,0,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(128,0,0,1)",
data : stat1
},
{
label: "stat2",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : stat2
}
]
};
var myChart = new Chart(ctx).Line(lineChart, lineOptions);
save64Img(myChart.toBase64Image());
----------
<?php
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $img));
file_put_contents('/tmp/image.png', $data);
?>
I know that it's been awhile since you have asked the question, but in the Chart.js v2 you have to use onComplete
method within the animation option.
animation: {
duration: 1500,
onComplete: function (animation) {
this.toBase64Image();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With