JSFiddle - React, Tailwind, and code Playground

by HC ZH

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <div>
                <div>
                    <h3>Statistiques Machine</h3>
                    <br/><br/>        
                    <table>
                        <tr>
                            <td style="width:90%;margin-left: 2%;">  
                               <div id="vis_div" style="height:450px;width:95%;margin-left:2%;"></div>
                            </td>
                            <td style="width:10%;margin-left:2%;">
                                <br/>
                                <br/>
                               <button type="button" onclick="editMe()">Edit Me</button>
                                <br/>
                               <div id="traitement_impression"></div>
                            </td>
                        </tr>
                    </table>
                </div>                                     
       </div>

JavaScript

google.load('visualization', '1', {packages: ['charteditor']});
google.setOnLoadCallback(loadEditor);

var chartEditor = null;
var imgMachineURI = "";
var wrapper;
var newWrapper;

function loadEditor() {
    
    var nbAnnee = 6;
    var anneeDebut = 2009;

    
    var aujourdhui = new Date();
    var anneeActuelle = aujourdhui.getFullYear();
    var moisActuel = aujourdhui.getMonth()+1;
    
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');                
    data.addColumn('number', 'Total S');
    data.addColumn('number', 'Total C');
    data.addColumn('number', 'Total P');
    
    for(var iAnnee = 0; iAnnee < nbAnnee; iAnnee++) {
        for(var j=1; j<=12; j++) {
            
            var index = iAnnee*12+j-1;
            var annee = anneeDebut + iAnnee;
            
            if(annee == anneeActuelle && j == moisActuel) {
                break;
            }
            
            if(annee == 2009 && j < 11) {
                continue;
            }
            data.addRow([new Date(annee, j, 1), iAnnee*100+j*10+100, iAnnee*10+j*5, j*3]); 
        }
    }  
    
    var opt = {
        chartArea: {width:"90%",height:"70%"},
        focusTarget: 'category',
        tooltip: {showColorCode: true,isHtml: true},
        title: 'Total Activite Machines',
        titlePosition: 'out', 
        backgroundColor: '#ffffff',
        legend: { position: 'bottom' },
        vAxis: {ticks: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]},
        colors: ['#24a0da','#2f9b45','#8ebc00'],
        
        explorer: {
            keepInBounds: true,
            axis: 'horizontal'
            //actions: ['dragToZoom', 'rightClickToReset']
        },
        trendlines: { 
            0: {
                type: 'polynomial',
                degree: 4,
                pointSize: 2,
                opacity: 0.8,
                //visibleInLegend: true,
                color: '#1a99aa'
            }, 
            1: {
 ...