JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
 <script src="http://172.30.48.47:8090/customer_insight/scripts/knockoutjs/knockout-3.1.0.js"></script>



Available Items:
<div data-bind="foreach: $root.availableItems">
    <input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" />	
    <span data-bind="text: '&nbsp;' + Name()"></span>
    <br/>
</div>
<div id="charts"></div>

JavaScript

$(function() {
    

        var charts = [],
        counter = 0;
    $(document).ready(function() {
 function DemoItem(id, name) {
    var self = this;

    self.id = ko.observable(id);
    self.Name = ko.observable(name);
    self.Selected = ko.observable(false);
}

function ViewModel() {
    var self = this;
       var series = [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}];
    self.availableItems = ko.observableArray();
    self.associatedItemIds = ko.observableArray();

    self.init = function () {
        self.availableItems.push(new DemoItem(1, 'One'));
        self.availableItems.push(new DemoItem(2, 'Two'));
        self.availableItems.push(new DemoItem(3, 'Three'));
        self.availableItems.push(new DemoItem(4, 'Four'));
        self.availableItems.push(new DemoItem(5, 'Five'));
    };
    
    self.toggleAssociation = function (item) {
        alert(item.id())
        if (item.Selected() === true)
        {
           document.getElementById('container'+item.id()).style.visibility ='hidden';
           // $('#container').find('.highcharts-container').hide();
        }
        else 
         addChart('lineChart', 'lineChart', 'line', series,item.id());
        item.Selected(!(item.Selected()));
        return true;
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
       

        
        
       
        //addChart('columnChart', 'columnChart', 'column', series);
        //addChart('areaChart', 'area', 'area', series);

        
    });

    function addChart(name, title, type, series, counteris) {
        //alert("calling")
        //create div
        
       // alert($('#charts').find(‘.container1’))
        if(document.getElementById("container"+counteris) !== null)
            {
                document.getElementById('container'+counteris).style.visibility ='visible';
            }
        else{
        
       ...