JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<head>
    <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
    <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

</head>
<body>
<center>
<table id="mytable" align="center" border=1 ">
<tr>
<th align=center>Semaines</th>
<th align="center">1</th>
<th align="center">2</th>
<th align="center">3</th>
<th align="center">4</th>
<th align="center">5</th>
<th align="center">6</th>
<th align="center">7</th>
<th align="center">8</th>
</tr>
<tr>
<td align=center>Nombre de visiteurs sur le site de Lucas</td>
<td align="center">205</td>
<td align="center">252</td>
<td align="center">327</td>
<td align="center">349</td>
<td align="center">412</td>
<td align="center">423</td>
<td align="center">441</td>
<td align="center">472</td>
</tr>
<tr>
<td align=center>Nombre de visiteurs sur le site de Louis</td>
<td align="center">3700</td>
<td align="center">1240</td>
<td align="center">435</td>
<td align="center">150</td>
<td align="center">43</td>
<td align="center">18</td>
<td align="center">7</td>
<td align="center">2</td>
</tr>
</table>
    
<div id="box" class="jxgbox" style="width:1000px; height:600px;">
<form name="form_parties">
    <input type="checkbox" value="0" name="parties">Lucas<br/>
    <input type="checkbox" value="1" name="parties">Louis<br/>    
</div>
</body>

JavaScript

// This function handles the onclick event on the checkboxes.
var select_parties = function() {
    var color = [],
        part;

    // check if the chart is currently displayed. if so, remove it from the board completely.
    if (chart) {
        brd.removeObject(chart);
    }

    // collect the currently selected parties "Lucas" or "Louis"
    part = [];
    $('input[name=parties]').each(function() {
        if (this.checked) {
            part.push(parseInt($(this).val()));
            color.push(colors[parseInt($(this).val())]);
        }
    });

    // create the chart
    chart = brd.create('chart', ['mytable'], {
        chartStyle: 'point,line',
        withHeaders: true,
        colorArray: color,
        strokeColor: color,
        fillColor: color,
        highlightFillColor: color,
        highlightStrokeColor: color,
        rows: part
    });
},
    // global variable to hold the chart
    chart,

    // available colors for each line chart
    colors = ['blue', 'yellow', 'red', 'green', 'orange', '#8B00FF'],
    // ??
    Semaines = [1, 2, 3, 4, 5, 6, 7, 8],
    // the board
    brd = JXG.JSXGraph.initBoard('box', {
        axis: true,
        originX: 20,
        originY: 575,
        unitX: 100,
        unitY: 0.15
    });

// style the infobox displayed whenever a point is hovered over a point
brd.highlightInfobox = function(x, y, el) {
    this.infobox.setText('<span style="color:black;font-weight:bold"> (' + Semaines[Math.round(x) - 1] + '; ' + y + ')</span>');
    this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokeColor'] + ' 2px';
    this.infobox.rendNode.style.padding = '5px';
    this.infobox.rendNode.style.backgroundColor = 'white';
}
    
// assign the onclick event handlers onto the checkboxes
$('input[name=parties]').click(select_parties);