Varun
Reputation: 4452
How to display Multiple Highchart in single page
I am trying to divide the jsp page into four equal section to to display four highchart. I know little bit about highchart but dont how to divide single jsp page into four equal part. I am able to display single chart on jsp but really dont know how to display four chart in single jsp.
My jsp page would look like that
Upvotes: 0
Views: 4019
Answers (1)
Varun
Reputation: 4452
I figured it out how to do that:
- To divide the page the best option is to use the
bootstrap cssits easy and gives you great flexibility. - To display the chart I have used
High-chartits a open source and good.
Now how do we do that.
First I have divide the page using tag with predefined bootstrap css classes col-md-6. it means it divide the hole screen in two column. if you do not know about this learn bootstrap css grid system Link Bootstrap css grid.
This is how I am dividing the screen two column two row with <div> tag
At every <div id="#"> I would display the high chart.
<div class="container">
<h1 align="center"><a href ="#">Different charts in one page</a></h1>
<!--First chart-->
<div class="col-md-6">
<div id="pie" style="min-width: 300px; height: 300px; margin: 30 auto"></div>
</div>
<!--Second chart-->
<div class="col-md-6">
<div id="bar" style="min-width: 400px; height: 400px; margin: 30 auto"></div>
</div>
<!--Third chart-->
<div class="col-md-6">
<div id="Stacked" style="min-width: 400px; height: 300px; margin: 30 auto"></div>
</div>
<!--Fourth chart-->
<div class="col-md-6">
<div id="line" style="min-width: 600px; height: 300px; margin: 30 auto"></div>
</div>
<!--End of charts-->
</div><!--for container div-->Here is full code
Make sure you include the HighChart js
<!DOCKTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>final</title>
<!--Bootstrap source start-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Bootstrap source end-->
<!--highchart source start-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="C:\Users\Global Soft\Desktop\HighChart\js\highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<style type="text/css">
${demo.css}
</style>
<!--Pie Chart starts here-->
<script type="text/javascript">
$(function (){
var pieChart;
$(document).ready(function(){
pieChart=new Highcharts.Chart({
chart: {
renderTo: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
subtitle:{
text: ' Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
<!--Pie chart ends here-->
<!--bar stacked chart start here-->
$('#Stacked').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<!--bar stacked chart end here -->
<!--bar chart start here-->
$('#bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
<!--bar chart start here-->
<!--Line chart start here-->
$('#line').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
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]
}]
});
<!--Line chart ends here-->
});<!--This is for the main function-->
</script>
<!--Charts end here-->
</head>
<body>
<div class="container">
<h1 align="center"><a href ="#">Different charts in one page</a></h1>
<!--First chart-->
<div class="col-md-6">
<div id="pie" style="min-width: 300px; height: 300px; margin: 30 auto"></div>
</div>
<!--Second chart-->
<div class="col-md-6">
<div id="bar" style="min-width: 400px; height: 400px; margin: 30 auto"></div>
</div>
<!--Third chart-->
<div class="col-md-6">
<div id="Stacked" style="min-width: 400px; height: 300px; margin: 30 auto"></div>
</div>
<!--Fourth chart-->
<div class="col-md-6">
<div id="line" style="min-width: 600px; height: 300px; margin: 30 auto"></div>
</div>
<!--End of charts-->
</div><!--for container div-->
</body>
</html>OutPut
Upvotes: 4
Related Questions
- how do I get two highcharts on one page?
- Highcharts multiple charts on a single page using c# asp.net mvc3
- how to display multiple chart on same page in mvc5
- how to display 2 same highcharts without duplicate the code
- Multiple chart in same page Highchart
- Highcharts - multiple charts
- Manage multiple highchart charts in a single webpage
- Creating multiple series in Highcharts within a loop
- Using multiple Highcharts in a single page
- Cannot display multiple Highcharts on a single page