dashboard
Version:
Create dashboards with gadgets on node.js
126 lines (115 loc) • 3.22 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
xAxis: {
categories: ['Apples', 'Pears', 'Plums', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.y +' '+ this.x.toLowerCase();
}
},
plotOptions: {
column: {
data: 'datatable',
// define a custom data parser function for both series
dataParser: function(data) {
var table = document.getElementById(data),
// get the data rows from the tbody element
rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
// define the array to hold the real data
result = [],
// decide which column to use for this series
column = { 'Jane': 0, 'John': 1 }[this.options.name];
// loop through the rows and get the data depending on the series (this) name
for (var i = 0; i < rows.length; i++) {
result.push(
parseInt(
rows[i].getElementsByTagName('td')[column]. // the data cell
innerHTML
)
);
}
return result;
}
}
},
series: [{
name: 'Jane'
}, {
name: 'John'
}]
});
});
</script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<thead>
<tr>
<th>Fruit name</th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>