JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="chart">Loading chart</div>

CSS

#chart {
    width: 100%;
    height: 350px;
    text-align: center;
    margin: auto;
}

JavaScript

var chartProperties = {tootltip: {isHtml: true}};
var chartData = {"cols":[{"label":"link","type":"string"},{"type":"number","label":"likes"}],"rows":[{"c":[{"v":"https:\/\/instagram.com\/p\/4EcJYjylax\/"},{"v":6}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4Eb638Slab\/"},{"v":12}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4Eb41NlT5P\/"},{"v":2}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4Ebz_ghF3r\/"},{"v":4}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4EbwUWyupJ\/"},{"v":324}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4EbgsTDn9d\/"},{"v":9}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4Ebe_bM3dk\/"},{"v":8}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4EbCVwGQKo\/"},{"v":8}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4EauE1S6Ow\/"},{"v":7}]},{"c":[{"v":"https:\/\/instagram.com\/p\/4EanRFRVn1\/"},{"v":16}]}]};

google.load("visualization", "1", {
    packages: ["corechart", "orgchart", "treemap"],
    callback: function () {
        var startTime = new Date().getTime();
        chartData = new google.visualization.DataTable(chartData);
        chart = new google.visualization.ColumnChart(document.getElementById('chart'));
        google.visualization.events.addListener(chart, 'ready', function () {
            var endTime = new Date().getTime();
            var timeTook = endTime - startTime;
        });
        chart.draw(chartData, chartProperties);
    }.bind(this)
});