JSFiddle - React, Tailwind, and code Playground

by vrluckyin India

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="https://gabelerner.github.io/canvg/StackBlur.js"></script>
<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<div id="example">
  <div>
    <input type="button" value="download" id="btnDownloadGraph" />
  </div>
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
</div>
<canvas id="canvas" width="900px" height="500px"></canvas>

JavaScript

var chartData = [
          {value: 9.43, low: 7.91, high: 10.95, n: 10.95},
          {value: 7.85, low: 6.80, high: 8.90, n: 8.9},
          {},
          {value: 7.41, low: 6.25, high: 8.57, n: 8.57},
          {},
          {value: 7.31, low: 6.20, high: 8.42, n: 8.42},
          {},
          {value: 7.36, low: 6.31, high: 8.41, n: 8.41},
          {},
          {value: 7.23, low: 6.26, high: 8.20, n: 8.2},
          {},
          {value: 7.21, low: 6.47, high: 7.95, n: 7.95},
          {},
          {value: 7.21, low: 6.54, high: 7.88, n: 7.88}
        ]
      function downloadGrpah(e)
      {
      	var svg = $('#chart').html();
        console.log(svg);
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        svg = svg.replace('Arial,Helvetica,sans-serif','Helvetica');
        console.log(svg);
        var canvas = document.getElementById('canvas');
        /*canvg(canvas, svg,{
  ignoreDimensions: false,
  forceRedraw: function() {
    return false;
  }
});*/
var ctx = canvas.getContext('2d');
ctx.drawSvg(svg, 0, 0, 832, 400);
//canvg(canvas, svg,{ ignoreMouse: true, ignoreAnimation: true,ignoreDimensions:true,ignoreClear:true,offsetX:0,offsetY:0,scaleWidth:800,scaleHeight:600 });
        //$('#canvas').css('height',300);
        //canvas.fillStyle="#FFFFFF"; 
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
  			//var pdf = new jsPDF();
  			//pdf.addImage(imgData, 'JPEG', 0, 0);
  ...