jQuery addClass example

Change class name on click in jQuery

by David Simpson

HTML

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://pagecdn.io/lib/morris/0.5.1/morris.js" integrity="sha256-cQB75DEaDbn4oSiaWgdoh3TuZCHSO+kYdD/Ehka48Ro=" crossorigin="anonymous"></script>

<title>Morris.js Area Chart Example</title>
</head>
<body>
  <div id="area-example"></div>
  <div id="area-new-table"></div>
    <table id="students">
                     <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr class="student">
            <td>2011-10-01</td>
            <td>45</td>
            <td>16.5</td>        
        </tr>
        <tr class="student">
            <td>2011-10-02</td>
            <td>28</td>
            <td>14</td>        
        </tr>
        <tr class="student">
            <td>2011-10-03</td>
            <td>36</td>
            <td>19</td>        
        </tr>
    </tbody>
                  </table>
  </br>
  <button id="run">Create 2nd Chart</button>
</body>
</html>

JavaScript

/*
 * Load data from Html Table
 *
 * Morris.Js Area Chart
 */
Morris.Area({
  element: 'area-example',
  data: [{"name":"2012-10-01","age":23},{"name":"2012-10-02","age":32},{"name":"2012-10-03","age":21}],
  xkey: 'name',
  ykeys: ['age'],
  labels: ['Age']
});

/*
 * Create 2nd chart
 *
 * Ultimately when then page loads, I would like
 * for the data from the html table to be displayed
 * in the morris area chart...
 * I am using a button for temporary testing.
 * One of the issues is when u click the button, a new chart is added, eventhough you can't see it - i do not want that.
 *
 *
 */

     $('#run').click(function () {

            var data = $('table#students tbody tr').map(function (index) {
                var cols = $(this).find('td');
                return {
                   
                    name: cols[0].innerHTML,
                    age: (cols[1].innerHTML + '') * 1 // parse int
                  //  grade: (cols[2].innerHTML + '') * 1 // parse int
                };
            }).get();
            alert(JSON.stringify(data));
            var xyz = JSON.stringify(data);
          //  alert(xyz);
             
            Morris.Area({
                element: 'area-new-table',
                data: xyz,
                xkey: 'name',
                ykeys: ['age'],
                labels: ['Name']

            });

        });