JSFiddle - React, Tailwind, and code Playground

by shruti patil

HTML

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chart in Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
                <div class="table-responsive">
                    <table id="Metrics" class="table table-condensed table-bordered table-striped table-hover table-charts">
                        <thead>
                            <tr>
                                <th>Metrics</th>
                                   
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <a href="#" data-toggle="modal" data-target="#modChart" data-source="65.1,59.47,80.00,81.11,56.67,55.45,40.88,20.45,40.98,80.66,88.34,61.01" data-target-source="50">
                                            <span class="glyphicon glyphicon-signal"></span> Volume Growth
                                        </a>
                                </td>
                               
                            </tr>
                           
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div...

CSS

body{padding-top:5em}

JavaScript

$('#modChart').on('shown.bs.modal',function(event){
  var link = $(event.relatedTarget);
    // get data source
   var source =  [65.10,59.47,80.00,81.11,56.67,55.45,40.88,20.45,40.98,80.66,88.34,61.01]   
     // var source = link.attr('data-source').split(',');  
    // get title
    var title = link.html();
    // get labels
    var table = link.parents('table'); 
   // var labels = [Jan,Feb,Mar,April,May,June,Jul,Aug,Sept,Oct,Nov,];
    var labels=[];
  $('#'+table.attr('id')+'>thead>tr>th').each(function(index,value){
        //without first column
      if(index>0){labels.push($(value).html());}
  }); 
    // get target source
    var target = [65.10,59.47,80.00];
   /*  $.each(labels, function(index,value){
        target.push(link.attr('data-target-source'));
    }); */
    // Chart initialisieren
    var modal = $(this);
    var canvas = modal.find('.modal-body canvas');
    modal.find('.modal-title').html(title);
    var ctx = canvas[0].getContext("2d");
    var chart = new Chart(ctx).Line({        
        responsive: true,
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: source
        },{
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "#F7464A",
            pointColor: "#FF5A5E",
            pointStrokeColor: "#FF5A5E",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "red",
            data: target
        }]
    },{});
}).on('hidden.bs.modal',function(event){
    // reset canvas size
    var modal = $(this);
    var canvas = modal.find('.modal-body canvas');
    canvas.attr('width','568px').attr('height','300px');
    // destroy modal
   ...