JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<script src="http://canvg.googlecode.com/svn/trunk/canvg.js" type="text/javascript"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/amstock.js" type="text/javascript"></script>
<script type="text/javascript">
            AmCharts.ready(function () {
                generateChartData();
                createStockChart();
            });

            var chartData = [];

            function generateChartData() {
                var firstDate = new Date(2012, 0, 1);
                firstDate.setDate(firstDate.getDate() - 1000)
                firstDate.setHours(0, 0, 0, 0);

                for (var i = 0; i < 1000; i++) {
                    var newDate = new Date(firstDate);
                    newDate.setHours(0, i, 0, 0);

                    var a = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b = Math.round(Math.random() * 100000000);

                    chartData.push({
                        date: newDate,
                        value: a,
                        volume: b
                    });
                }
            }

            var chart;

            function createStockChart() {
                chart = new AmCharts.AmStockChart();
    chart.pathToImages = "http://amcharts.com/lib/samples/stock/images/";
                
                // As we have minutely data, we should set minPeriod to "mm" 
                var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
                categoryAxesSettings.minPeriod = "mm";
                chart.categoryAxesSettings = categoryAxesSettings;

                // DATASETS //////////////////////////////////////////
                var dataSet = new AmCharts.DataSet();
                dataSet.color = "#b0de09";
                dataSet.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                ...

CSS

#not_button { border-top: 3px dotted #333;margin-top: 40px;padding-top: 40px; }

JavaScript

/*
 * Export.js - AmCharts to PNG
 * Benjamin Maertz ([email protected])
 *
 * Requires:    rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
 *                 canvg.js - http://code.google.com/p/canvg/
 *                amcharts.js - http://www.amcharts.com/download
 */

// Lookup for required libs
if ( typeof(AmCharts) === 'undefined' || typeof(canvg) === 'undefined' || typeof(RGBColor) === 'undefined' ) {
    throw('Woup smth is wrong you might review that http://www.amcharts.com/forum/viewtopic.php?id=11001');
}

// Define custom util
AmCharts.getExport = function(anything) {
    /*
    ** PRIVATE FUNCTIONS
    */

    // Word around until somebody found out how to cover that
    function removeImages(svg) {
        var startStr    = '<image';
        var stopStr        = '</image>';
        var start        = svg.indexOf(startStr);
        var stop        = svg.indexOf(stopStr);
        var match        = '';

        // Recursion
        if ( start != -1 && stop != -1 ) {
            svg = removeImages(svg.slice(0,start) + svg.slice(stop + stopStr.length,svg.length));
        }
        return svg;
    };

    // Senseless function to handle any input
    function gatherAnything(anything,inside) {
        switch(String(anything)) {
            case '[object String]':
                if ( document.getElementById(anything) ) {
                    anything = inside?document.getElementById(anything):new Array(document.getElementById(anything));
                }
                break;
            case '[object Array]':
                for ( var i=0;i<anything.length;i++) {
                    anything[i] = gatherAnything(anything[i],true);
                }
                break;

            case '[object XULElement]':
                anything = inside?anything:new Array(anything);
                break;

            case '[object HTMLDivElement]':
                anything = inside?anything:new Array(anything);
                break;

     ...