JSFiddle - React, Tailwind, and code Playground

by mhardik

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="energyProductionGraph" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

JavaScript

createBarGraph = function (data, name, title){
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'energyProductionGraph',
                    type: 'column'
                },
                title: {
                    text: 'Energy Production (WEEK)'
                },
                xAxis: {
                    title: {
                        text: 'X Axis Variables'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Y Axis Variables'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                        this.x +': '+ this.y +' mm';
                    }
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Energy Production',
                    color: '#81BEF7',
                    data: data

                }]
            });
        });

    });
}
    
$(document).ready(function() {

    //getDailyProduction();
    getEnergyProduction();
    //getOperationCapacity();

    // Put all your code here
    function getDailyProduction(){

        // setting vaiables for Daily prodution graph
        var data= [1,2,3,4,5,6,7,8,9,2,3,4,3,2,3,4,5,12,54,34];
        var title ='Daily Production (KW)';
        var name='Daily Production';
        createAreaGraph(data, name, title);
    }
    function...