JSFiddle - React, Tailwind, and code Playground

by brainsengineering

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css">
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<div class="demo-section k-content">
    <div id="stock-chart" style="background: center no-repeat url('http://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png');"></div>
    <div class="chart-loading"></div>
</div>
<div class='export-img k-button'>Export as Image</div>
<div class='export-img2 k-button'>Export as Image2</div>

JavaScript

$(document).ready(function () {
            // Spin all loading indicators on the page
            kendo.ui.progress($(".chart-loading"), true);

            createChart();

            $(".export-img").click(function () {
                var chartToExport = $("#stock-chart").getKendoStockChart();

                chartToExport.exportImage().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.png"
                    });
                });
            });
            
            $(".export-img2").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".demo-section"))
        .then(function(group) {
            // Render the result as a PNG image
            return kendo.drawing.exportImage(group);
        })
        .done(function(data) {
            // Save the image file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.png"
            });
        });
    });


        });

        function createChart() {
            $("#stock-chart").kendoStockChart({
                theme: "blueOpal",
                chartArea: {
                    background: "transparent"
                },
                dataSource: {
                    transport: {
                        read: {
                            url: "http://vamoss.brainsen.com/API/Get.aspx?mkt=271&cm=84&pt=15",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                Date: {
                                    type: "date"
                                }
                            }
                        }
                    }
                },
                render: function (e) {
                    // Clear up the loading...