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 
.chart {
10 
    min-width: 320px;
11 
    max-width: 800px;
12 
    height: 220px;
13 
    margin: 0 auto;
14 
}
15 
</style>
16 
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
17 
<meta name="viewport" content="width=device-width, initial-scale=1" />
18 
<style>
19 
		</style>
20 
		<script type="text/javascript">
21 
/*
22 
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
23 
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
24 
small variation for each data set, and a mouse/touch event handler to bind the charts together.
25 
*/
26 
 
27 
$(function () {
28 
 
29 
 
30 
    /**
31 
     * In order to synchronize tooltips and crosshairs, override the
32 
     * built-in events with handlers defined on the parent element.
33 
     */
34 
    $('#container').bind('mousemove touchmove', function (e) {
35 
        var chart,
36 
            point,
37 
            i;
38 
 
39 
        for (i = 0; i < Highcharts.charts.length; i++) {
40 
            chart = Highcharts.charts[i];
41 
            e = chart.pointer.normalize(e); // Find coordinates within the chart
42 
            point = chart.series[0].searchPoint(e, true); // Get the hovered point
43 
 
44 
            if (point) {
45 
                point.onMouseOver(); // Show the hover marker
46 
                chart.tooltip.refresh(point); // Show the tooltip
47 
                chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair
48 
            }
49 
        }
50 
    });
51 
    /**
52 
     * Override the reset function, we don't need to hide the tooltips and crosshairs.
53 
     */
54 
    Highcharts.Pointer.prototype.reset = function () {};
55 
 
56 
    /**
57 
     * Synchronize zooming through the setExtremes event handler.
58 
     */
59 
    function syncExtremes(e) {
60 
        var thisChart = this.chart;
61 
 
62 
        Highcharts.each(Highcharts.charts, function (chart) {
63 
            if (chart !== thisChart) {
64 
                if (chart.xAxis[0].setExtremes) { // It is null while updating
65 
                    chart.xAxis[0].setExtremes(e.min, e.max);
66 
                }
67 
            }
68 
        });
69 
    }
70 
 
71 
    // Get the data. The contents of the data file can be viewed at
72 
    // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json
73 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
74 
        $.each(activity.datasets, function (i, dataset) {
75 
 
76 
            // Add X values
77 
            dataset.data = Highcharts.map(dataset.data, function (val, i) {
78 
                return [activity.xData[i], val];
79 
            });
80 
 
81 
            $('<div class="chart">')
82 
                .appendTo('#container')
83 
                .highcharts({
84 
                    chart: {
85 
                        marginLeft: 40, // Keep all charts left aligned
86 
                        spacingTop: 20,
87 
                        spacingBottom: 20
88 
                        // zoomType: 'x',
89 
                        // pinchType: null // Disable zoom on touch devices
90 
                    },
91 
                    title: {
92 
                        text: dataset.name,
93 
                        align: 'left',
94 
                        margin: 0,
95 
                        x: 30
96 
                    },
97 
                    credits: {
98 
                        enabled: false
99 
                    },
100 
                    legend: {
101 
                        enabled: false
102 
                    },
103 
                    xAxis: {
104 
                        crosshair: true,
105 
                        events: {
106 
                            setExtremes: syncExtremes
107 
                        },
108 
                        labels: {
109 
                            format: '{value} km'
110 
                        }
111 
                    },
112 
                    yAxis: {
113 
                        title: {
114 
                            text: null
115 
                        }
116 
                    },
117 
                    tooltip: {
118 
                        positioner: function () {
119 
                            return {
120 
                                x: this.chart.chartWidth - this.label.width, // right aligned
121 
                                y: -1 // align to title
122 
                            };
123 
                        },
124 
                        borderWidth: 0,
125 
                        backgroundColor: 'none',
126 
                        pointFormat: '{point.y}',
127 
                        headerFormat: '',
128 
                        shadow: false,
129 
                        style: {
130 
                            fontSize: '18px'
131 
                        },
132 
                        valueDecimals: dataset.valueDecimals
133 
                    },
134 
                    series: [{
135 
                        data: dataset.data,
136 
                        name: dataset.name,
137 
                        type: dataset.type,
138 
                        color: Highcharts.getOptions().colors[i],
139 
                        fillOpacity: 0.3,
140 
                        tooltip: {
141 
                            valueSuffix: ' ' + dataset.unit
142 
                        }
143 
                    }]
144 
                });
145 
        });
146 
    });
147 
});
148 
		</script>
149 
	</head>
150 
	<body>
151 
<script src="../../js/highcharts.js"></script>
152 
 
153 
<div id="container"></div>
154 
	</body>
155 
</html>