I am trying to display table data in through highcharts along with table. But somehow chart and table is not getting display in html page. My code is below. Do I need to write down between <div> tag ? If I print normal text it gets display.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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=".js"></script>
<div id="container" style="height: 600px;margin-top:20px;width: 600px"></div>
</body>
</html>
I am trying to display table data in through highcharts along with table. But somehow chart and table is not getting display in html page. My code is below. Do I need to write down between <div> tag ? If I print normal text it gets display.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./js/testing-exporting.js"></script>
<div id="container" style="height: 600px;margin-top:20px;width: 600px"></div>
</body>
</html>
-
You want to use
Highchartsbefore loadingHighcharts.js, it should beundefinedand js pile time error occurred... – Rajib Chy Commented May 22, 2019 at 18:57
2 Answers
Reset to default 6View this jsfiddle. Reference from the highcharts API under showTable.
The above example simply adds this line of code to the chart object.. see link for full code:
exporting: {
showTable: true
}
There is another example here Referenced from the highcharts FAQ - adding data table to exported chart
If I am reading your question correctly you want to have HighCharts also "draw" a table containing the data as well as a chart of the data in that table. If so, have a look at my answer to this question. It is regarding formatting of numeric values but my jsFiddle will show you how to draw the table. Note that the formatting and alignment of the table/chart is tricky depending on how much data you are trying to show.