Chart_fiddle

by Vishal Bhatt

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<!doctype html>
<title>Simple tables</title>
<link rel=stylesheet type=text/css href="/static/style.css">
<div class=page>
  <h1>Usage_data</h1>

  <h2></h2>
  <table border="1" class="dataframe Usage_data">
    <thead>
      <tr style="text-align: right;">
        <th></th>
        <th>facebook_user_rank</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>0</th>
        <td>9.402975</td>
        <td>Asian</td>
      </tr>
      <tr>
        <th>1</th>
        <td>10.762177</td>
        <td>Black</td>
      </tr>
      <tr>
        <th>2</th>
        <td>12.213470</td>
        <td>Chinese</td>
      </tr>
      <tr>
        <th>3</th>
        <td>11.211221</td>
        <td>Hispanic</td>
      </tr>
      <tr>
        <th>4</th>
        <td>9.184211</td>
        <td>American Indian</td>
      </tr>
      <tr>
        <th>5</th>
        <td>12.361446</td>
        <td>Japanese</td>
      </tr>
      <tr>
        <th>6</th>
        <td>14.659334</td>
        <td>Other</td>
      </tr>
      <tr>
        <th>7</th>
        <td>7.500000</td>
        <td>Portuguese</td>
      </tr>
      <tr>
        <th>8</th>
        <td>10.636304</td>
        <td>White</td>
      </tr>
    </tbody>
  </table>

</div>

CSS

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a,
h1,
h2 {
  color: #377ba8;
}

h1,
h2 {
  margin: 0;
}

h1 {
  border-bottom: 2px solid #eee;
}

h2 {
  font-size: 1.2em;
}

table.dataframe,
.dataframe th,
.dataframe td {
  border: none;
  border-bottom: 1px solid #C8C8C8;
  border-collapse: collapse;
  text-align: left;
  padding: 10px;
  margin-bottom: 40px;
  font-size: 0.9em;
}

.Usage_data th {
  background-color: #add8e6;
  color: white;
}

tr:nth-child(odd) {
  background-color: #eee;
}

tr:nth-child(even) {
  background-color: #fff;
}

tr:hover {
  background-color: #ffff99;
}

body {
  font-family: Verdana;
  font-size: 12px;
  padding: 10px;
}

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

#data,
#data th,
#data td {
  border: 1px solid #ccc;
  padding: 10px;
}

#data th {
  font-weight: bold;
  background-color: #eee;
}


}

JavaScript

var chartConfig = {
  "type": "serial",
  "dataProvider": [],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "category",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
  }
};
jQuery(document).ready(function() {
  // get categories
  jQuery('#data thead th').each(function(index) {
    if (index) { // skip the first column
      chartConfig.graphs.push({
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "value" + index
      });
    }
  });

  // get data points
  jQuery('#data tbody tr').each(function(index) {
    var dataPoint = {};
    jQuery(this).find('th,td').each(function(index2) {
      if (jQuery(this).is('th')) { // category
        dataPoint.category = this.innerHTML;
      } else {
        dataPoint['value' + index2] = Number(this.innerHTML);
      }
    });
    chartConfig.dataProvider.push(dataPoint);
  });

  // make the chart
  var chart = AmCharts.makeChart("chartdiv", chartConfig);
});