JSFiddle - React, Tailwind, and code Playground

by saes

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<button id="chartButton" type="button">Max Value</button>
<div id="maxVallue"></div>
<div id="maxVallueF"></div>
<br /><br />
<div id="chart"></div>
<br />
<div id="legendMax"></div>
<script id="jsTemplate">
    function nssFormatToStorageUnit(value, decimalValue) {

    var b = parseInt(value);
    var s = ['byte', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
    if (decimalValue === null) {
        decimalValue = 2;
    }
    if (isNaN(b) || b === 0) {
        return '0 ' + s[0];
    }
    if (Math.abs(b) == 1) {
        return b + ' ' + s[0];
    }
    if (Math.abs(b) < 1024) {
        return b.toFixed(decimalValue) + ' ' + s[1];
    }
    if (Math.abs(b) < 1048576) {
        return (b / 1024).toFixed(decimalValue) + ' ' + s[2];
    }
    if (Math.abs(b) < 1073741824) {
        return (b / 1048576).toFixed(decimalValue) + ' ' + s[3];
    }
    if (Math.abs(b) < 1099511627776) {
        return (b / 1073741824).toFixed(decimalValue) + ' ' + s[4];
    }
    if (Math.abs(b) < 1125899906842624) {
        return (b / 1099511627776).toFixed(decimalValue) + ' ' + s[5];
    }
    else {
        return (b / 1125899906842624).toFixed(decimalValue) + ' ' + s[6];
    }
}
</script>

JavaScript

var chartData = [
    {"TotalUsage":62467277645,"DataType":"Archive Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":100013856,"DataType":"Audio Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":226712329288,"DataType":"Default","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":134469751694,"DataType":"Document Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":3625706401,"DataType":"Executable Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":234021504,"DataType":"Image Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":1533019344,"DataType":"Video Files","ScanTime":"2013-11-18T19:05:53.743Z"},
    {"TotalUsage":62519861417,"DataType":"Archive Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":100013856,"DataType":"Audio Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":226987469530,"DataType":"Default","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":134749900907,"DataType":"Document Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":3628826529,"DataType":"Executable Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":234436656,"DataType":"Image Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":1533019344,"DataType":"Video Files","ScanTime":"2013-11-19T19:05:13.453Z"},
    {"TotalUsage":62597858659,"DataType":"Archive Files","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":100013856,"DataType":"Audio Files","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":228169161423,"DataType":"Default","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":134996756604,"DataType":"Document Files","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":3641897377,"DataType":"Executable Files","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":235048400,"DataType":"Image Files","ScanTime":"2013-11-20T19:05:12.650Z"},
    {"TotalUsage":1533019344,"DataType":"Video...