How to display HighCharts with tables
I am trying to display table data through highcharts
along with a table. But for some reason the graph and table are not displayed on the html page. My code is below. Do I need to write between tags <div>
? If I print normal text, it is displayed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
charts
</title>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Create the data table
*/
Highcharts.drawTable = function () {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each( chart.xAxis[0].categories, function ( i, name ) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + ( i + 2 ) * rowHeight - cellPadding
).css( {
fontWeight: 'bold'
} ).add();
} );
$.each( series, function ( i, serie ) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
).attr( {
align: 'right'
} ).css( {
fontWeight: 'bold'
} ).add();
$.each( serie.data, function ( row, point ) {
// Apply the cell text
renderer.text(
Highcharts.numberFormat( point.y, valueDecimals ) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + ( row + 2 ) * rowHeight - cellPadding
)
.attr( {
align: 'right'
} )
.add();
// horizontal lines
if ( row == 0 ) {
Highcharts.tableLine( // top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( // bottom
renderer,
tableLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
// horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
} );
// vertical lines
if ( i == 0 ) { // left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
if ( i == series.length - 1 ) { // right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + ( serie.data.length + 1 ) * rowHeight + cellPadding
);
}
} );
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function ( renderer, x1, y1, x2, y2 ) {
renderer.path( ['M', x1, y1, 'L', x2, y2] )
.attr( {
'stroke': 'silver',
'stroke-width': 1
} )
.add();
}
/**
* Create the chart
*/
window.chart = new Highcharts.Chart( {
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
borderWidth: 2
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
legend: {
y: -300
},
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]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
} );
</script>
</head>
<body>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-exporting.js"></script>
<div id="container" style="height: 600px;margin-top:20px;width: 600px"></div>
</body>
</html>
Have a look at the jsfiddle . Highcharts API reference in showTable .
The above example just adds this line of code to the chart object .. see link for full code:
exporting: {
showTable: true
}
Following is an example here Link to Main Charts FAQ - Add Data Table to Exported Chart
If I'm reading your question correctly, you want HighCharts to also "draw" the table containing the data as well as the data table in that table. If yes, take a look at my answer to this question. This is about formatting numeric values, but my jsFiddle will show you how to draw a table. Note that formatting and aligning a table / chart is tricky depending on how much data you are trying to display.