| Server IP : 182.53.201.61 / Your IP : 216.73.217.175 Web Server : Apache/2.2.15 (Fedora) System : Linux km10.dyndns.org 2.6.31.5-127.fc12.i686.PAE #1 SMP Sat Nov 7 21:25:57 EST 2009 i686 User : apache ( 48) PHP Version : 5.3.3 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/temp/examples/responsive/ |
Upload File : |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
#container {
height: 300px;
min-width: 310px;
max-width: 800px;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highcharts.js"></script>
<div id="container"></div>
<button id="large">Large</button>
<button id="small">Small</button>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts responsive chart'
},
subtitle: {
text: 'Resize the frame or click buttons to change appearance'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Bananas'],
labels: {
x: -10
}
},
yAxis: {
allowDecimals: false,
title: {
text: 'Amount'
}
},
series: [{
name: 'Christmas Eve',
data: [1, 4, 3]
}, {
name: 'Christmas Day before dinner',
data: [6, 4, 2]
}, {
name: 'Christmas Day after dinner',
data: [8, 4, 3]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
});
$('#small').click(function () {
chart.setSize(400, 300);
});
$('#large').click(function () {
chart.setSize(600, 300);
});
</script>
</body>
</html>