Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1 
<html>
2 
 
3 
    <head>
4 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 
        <!-- AmCharts includes -->
8 
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9 
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
10 
        <!-- Export plugin includes and styles -->
11 
        <script src="../export.js"></script>
12 
        <link type="text/css" href="../export.css" rel="stylesheet">
13 
        <style>
14 
            body,
15 
            html {
16 
                height: 100%;
17 
                padding: 0;
18 
                margin: 0;
19 
                overflow: hidden;
20 
                font-size: 11px;
21 
                font-family: Verdana;
22 
            }
23 
 
24 
            #chartdiv {
25 
                width: 100%;
26 
                height: 100%;
27 
            }
28 
        </style>
29 
        <script type="text/javascript">
30 
            var chartData = [];
31 
            generateChartData();
32 
            var chart = AmCharts.makeChart("chartdiv",
33 
            {
34 
                "type": "serial",
35 
                "marginTop": 30,
36 
                "dataProvider": chartData,
37 
                "categoryField": "date",
38 
                "categoryAxis":
39 
                {
40 
                    "parseDates": true,
41 
                    "gridAlpha": 0.15,
42 
                    "minorGridEnabled": true,
43 
                    "axisColor": "#DADADA"
44 
                },
45 
                "valueAxes": [
46 
                {
47 
                    "axisAlpha": 0.2,
48 
                    "id": "v1"
49 
                }],
50 
                "graphs": [
51 
                {
52 
                    "title": "red line",
53 
                    "id": "g1",
54 
                    "valueAxis": "v1",
55 
                    "valueField": "visits",
56 
                    "bullet": "round",
57 
                    "bulletBorderColor": "#FFFFFF",
58 
                    "bulletBorderAlpha": 1,
59 
                    "lineThickness": 2,
60 
                    "lineColor": "#b5030d",
61 
                    "negativeLineColor": "#0352b5",
62 
                    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
63 
                }],
64 
                "chartCursor":
65 
                {
66 
                    "fullWidth": true,
67 
                    "cursorAlpha": 0.1
68 
                },
69 
                "chartScrollbar":
70 
                {
71 
                    "scrollbarHeight": 40,
72 
                    "color": "#FFFFFF",
73 
                    "autoGridCount": true,
74 
                    "graph": "g1"
75 
                },
76 
                "mouseWheelZoomEnabled": true,
77 
                "export":
78 
                {
79 
                    "enabled": true
80 
                }
81 
            });
82 
            chart.addListener("dataUpdated", zoomChart);
83 
            // generate some random data, quite different range
84 
            function generateChartData()
85 
            {
86 
                var firstDate = new Date();
87 
                firstDate.setDate(firstDate.getDate() - 500);
88 
                for (var i = 0; i < 500; i++)
89 
                {
90 
                    // we create date objects here. In your data, you can have date strings
91 
                    // and then set format of your dates using chart.dataDateFormat property,
92 
                    // however when possible, use date objects, as this will speed up chart rendering.
93 
                    var newDate = new Date(firstDate);
94 
                    newDate.setDate(newDate.getDate() + i);
95 
                    var visits = Math.round(Math.random() * 40) - 20;
96 
                    chartData.push(
97 
                    {
98 
                        date: newDate,
99 
                        visits: visits
100 
                    });
101 
                }
102 
            }
103 
            // this method is called when chart is first inited as we listen for "dataUpdated" event
104 
            function zoomChart()
105 
            {
106 
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
107 
                chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
108 
            }
109 
        </script>
110 
    </head>
111 
 
112 
    <body>
113 
        <div id="chartdiv"></div>
114 
    </body>
115 
 
116 
</html>