Chart.js - get base 64 encoded string as variable
<p>I'm creating a chart using the Chart.js library and it's working well. I'm using the .toBase64Image() function to generate a base 64 encoded string of the chart (png data url).</p>

<p>I can see this when I inspect the chart in my browser developer tools, e.g.:</p>

<pre><code>data:image/png;base64,iVBORw0KGgoAAAA etc
</code></pre>

<p>I now need to call a URL to another application that will pass the data url as a parameter - I'm just stuck at how to get the data url as a parameter to pass to my URL that I will then call.</p>

<p>Here's my script as it currently stands:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var radarChartData = {
  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [3, 2, 1, 5, 6, 8, 5]
    },

  ]
};

window.onload = function() {
  window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
    responsive: true,
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 1,
    scaleStartValue: 0,
    onAnimationComplete: function() {
      document.getElementById("canvas").innerHTML = myRadar.toBase64Image();
      theURL = "fmp://$/chartingFile?script=getChartToContainer&amp;param=";
      window.location = theURL;
    }
  });
}</code></pre>
</div>
</div>
</p>

<p>I need to append the "data:image/png;base64,iVBORw0KGgoAAAA" string to the 'theURL' variable but can't figure out how to get this as a string?</p>