JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="v">0</div>
<button id="myBtn1">1</button>
<button id="myBtn2">2</button>
<input id="slider" type="range" min="0" max="150" value="80" />
<div id="chart"></div>

JavaScript

function $(id) {
    return document.getElementById(id);
}

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'],
            ['Visits YTD SOLL', -1],
            // ['Visits YTD IST', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            ],
        regions: {
            'Visits YTD IST': [{
                'start': '2014-07-01'
            }],
                'Visits YTD SOLL': [{
                'start': '2014-01-01'
            }]

        }
    },
    legend: {
        position: 'right'
    },
    axis: {
        y: {
            max: 12,
            min: 0,
            // Range includes padding, set 0 if no padding needed
            // padding: {top:0, bottom:0}
        },
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    return x.getMonth();
                }
                //format: '%Y' // format string is also available for timeseries data
            }
        }
    }
});

//get a reference to the element
var f1 = 10.547


var myBtn1 = $('myBtn1');
myBtn1.addEventListener('click', function (event) {
    a = []
    a.push('Visits YTD SOLL')
    for (var i = 0; i < 13; i++) {
        a.push(i * (f1/12) + f1/12)
    }
    chart.load({
        columns: [a]
    });
    console.log(a)
});

myBtn2.addEventListener('click', function (event) {
    a = []
    a.push('Visits YTD IST')
    for (var i = 0; i < 13; i++) {
        a.push(i * (0.8) + 0.8)
    }
    chart.load({
        columns: [a]
    });
    console.log(a)
});



// var slider = document.getElementById('slider');
slider.addEventListener('input', function () {

    var m = 0.8
    var f = parseFloat($('slider').value/100)
   
    $('v').innerHTML= f + ' Mio'
    a = []
    a.push('Visits YTD IST')
       for (i = 0; i < 7; i++)...