Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 1 
<!DOCTYPE HTML>
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>Highcharts Example</title>
6 
 
7 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8 
		<style type="text/css">
9 
#container, #sliders {
10 
	min-width: 310px;
11 
	max-width: 800px;
12 
	margin: 0 auto;
13 
}
14 
#container {
15 
	height: 400px;
16 
}
17 
		</style>
18 
		<script type="text/javascript">
19 
$(function () {
20 
    // Set up the chart
21 
    var chart = new Highcharts.Chart({
22 
        chart: {
23 
            renderTo: 'container',
24 
            type: 'column',
25 
            margin: 75,
26 
            options3d: {
27 
                enabled: true,
28 
                alpha: 15,
29 
                beta: 15,
30 
                depth: 50,
31 
                viewDistance: 25
32 
            }
33 
        },
34 
        title: {
35 
            text: 'Chart rotation demo'
36 
        },
37 
        subtitle: {
38 
            text: 'Test options by dragging the sliders below'
39 
        },
40 
        plotOptions: {
41 
            column: {
42 
                depth: 25
43 
            }
44 
        },
45 
        series: [{
46 
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
47 
        }]
48 
    });
49 
 
50 
    function showValues() {
51 
        $('#R0-value').html(chart.options.chart.options3d.alpha);
52 
        $('#R1-value').html(chart.options.chart.options3d.beta);
53 
    }
54 
 
55 
    // Activate the sliders
56 
    $('#R0').on('change', function () {
57 
        chart.options.chart.options3d.alpha = this.value;
58 
        showValues();
59 
        chart.redraw(false);
60 
    });
61 
    $('#R1').on('change', function () {
62 
        chart.options.chart.options3d.beta = this.value;
63 
        showValues();
64 
        chart.redraw(false);
65 
    });
66 
 
67 
    showValues();
68 
});
69 
		</script>
70 
	</head>
71 
	<body>
72 
<script src="../../js/highcharts.js"></script>
73 
<script src="../../js/highcharts-3d.js"></script>
74 
<script src="../../js/modules/exporting.js"></script>
75 
 
76 
<div id="container"></div>
77 
<div id="sliders">
78 
	<table>
79 
		<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
80 
	    <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
81 
	</table>
82 
</div>
83 
	</body>
84 
</html>