CODEWITHSUNDEEP
javascripthtmlcharts
Orpheus
Orpheus

Reputation: 767

chart.js can't use base64 effectively?

Within a web application, I've used chart.js to add a chart to the site for some reports. Once the chart is generated, I invoke the toBase64Image() function to get the chart itself as a base 64 encoded string. Problem is, the string doesn't do anything. The image is apparently getting the right width and height, but it isn't rendering the chart at all. I just want to be able to use this in a PDF file.

Fiddle here

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQCAYAAABWJQQ0AAAE70lEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8GIqtAAGJCzYxAAAAAElFTkSuQmCC" />

Upvotes: 1

Views: 6651

Answers (4)

Sydney Abuya
Sydney Abuya

Reputation: 19

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        // Your chart data here
    }
});

// Now you can use the 'myChart' instance to export the chart
var imageData = myChart.toBase64Image();
console.log(imageData); // Log the image data to the console

This will allow you to get the image in base64 format.

Upvotes: -1

Acts7Seven
Acts7Seven

Reputation: 417

Modified GramDago's answer to create an actual image

var myPieChart = new Chart(ctx).Pie(data,{animationEasing: "liniear", onAnimationComplete: function(){document.getElementById("basetest").innerHTML = "<img src='" + myPieChart.toBase64Image() + "' />"}});

https://jsfiddle.net/acts7/2romz2g1/1/

Upvotes: 0

Grim Dago
Grim Dago

Reputation: 11

Like said: call the toBase64Image() function within the options object.

var myPieChart = new Chart(ctx).Pie(
    data,
    {
        onAnimationComplete: function(){
            document.getElementById("basetest").innerHTML = myPieChart.toBase64Image();
        }
    }
);

I made a fiddle: https://jsfiddle.net/wfybmq6g/16/

Upvotes: 0

Dirindon
Dirindon

Reputation: 664

Had similar problem and got it solved by adding var myChartData = myLineChart.toBase64Image(); in function called onAnimationComplete:

function sendingChart () {
    var myChartData = myLineChart.toBase64Image();

    var element = document.getElementById("header");
    element.innerHTML = myChartData;
    sendingDecoded(myChartData)
}

function delay () {sendingChart()}

var myLineChart = new Chart(ctx).Line(data, {
    bezierCurve: false, 
    onAnimationComplete:delay, 
    animationSteps: 5
});

Might be messy since i was testing delays and such on this code

Upvotes: 4

Related Questions