source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/demo-apps/chartstyle/index.html @ 609

Last change on this file since 609 was 609, checked in by vmipsl, 12 years ago

images
File size: 5.7 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <title>Wijmo Example Page</title>
6        <script type="text/javascript">
7
8            var _gaq = _gaq || [];
9            _gaq.push(['_setAccount', 'UA-208280-14']);
10            _gaq.push(['_trackPageview']);
11
12            (function () {
13                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
14                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
15                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
16            })();
17
18    </script>
19    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
20    <!--jQuery References-->
21    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
22    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
23    <!--Wijmo Widgets CSS-->
24    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" />
25    <!--Wijmo Widgets JavaScript-->
26    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script>
27    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script>
28    <script src="http://cdn.mmcreation.com/javascript/jquery.colorpicker/colorpicker.js" type="text/javascript"></script>
29    <link href="http://cdn.mmcreation.com/javascript/jquery.colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
30    <script type="text/javascript">
31        //demo page script
32        var stylomatic = {};
33
34        function getStyle() {
35            stylomatic = {
36                fill: "#" + $("#fill").val(),
37                stroke: "#" + $("#stroke").val(),
38                "stroke-width": $("#strokesize").val(),
39                opacity: 0.8
40            }
41        }
42
43        $(document).ready(function () {
44            getStyle();
45            $("input").change(function () {
46                getStyle();
47                $("#chart").wijbarchart("option", "seriesStyles", [stylomatic]);
48            });
49            $('#fill').ColorPicker({
50                onChange: function (hsb, hex, rgb) {
51                    $('#fill').val(hex).trigger("change");
52                },
53                onBeforeShow: function () {
54                    $(this).ColorPickerSetColor(this.value);
55                }
56            }).wijtextbox();
57            $('#stroke').ColorPicker({
58                onChange: function (hsb, hex, rgb) {
59                    $('#stroke').val(hex).trigger("change");
60                },
61                onBeforeShow: function () {
62                    $(this).ColorPickerSetColor(this.value);
63                }
64            }).wijtextbox();
65            $("#strokesize").wijslider({
66                min: 0.5,
67                max: 10,
68                change: function (event, ui) {
69                    $("#strokesize").val(ui.value).trigger("change");
70                }
71            });
72            $("#chart").wijbarchart({
73                hint: {
74                    content: function () {
75                        return this.x + '\n ' + this.y + '';
76                    }
77                },
78                animation: {
79                    enabled: false
80                },
81                seriesTransition: {
82                    enabled: false
83                },
84                header: {
85                    text: "Browser Wars"
86                },
87                seriesList: [{
88                    label: "Browsers",
89                    legendEntry: false,
90                    data: { x: ['IE', 'Firefox', 'Chrome'], y: [44.94, 30.06, 17.47] }
91                }],
92                seriesStyles: [stylomatic],
93                seriesHoverStyles: [{
94                    opacity: 1
95                }]
96            });
97        });
98    </script>
99    <style type="text/css">
100        html
101        {
102            background: #333 url(http://wijmo.com/demo/explore/explore/css/images/texture.jpg) repeat top left;
103            color: #fff;
104        }
105        body
106        {
107            font-size: 80%;
108        }
109        #container
110        {
111            width: 960px;
112            margin: 0 auto;
113        }
114        #chart
115        {
116            width: 957px;
117            height: 400px;
118            margin-bottom: 1em;
119        }
120        .wijmo-wijslider-horizontal
121        {
122            display: inline-block;
123        }
124        label
125        {
126            padding: 4px;
127        }
128        fieldset
129        {
130            margin: 0;
131            padding: 6px;
132        }
133        h1
134        {
135            font-family: Arial, helvetica, Sans-Serif;
136            color: #fafafa;
137        }
138        legend
139        {
140            padding: 4px;
141        }
142    </style>
143</head>
144<body>
145    <div id="container">
146        <h1>Chart Style</h1>
147        <div id="chart" class="ui-widget ui-widget-content ui-corner-all">
148        </div>
149        <fieldset class="ui-widget ui-widget-content ui-corner-all">
150            <legend class="ui-state-default ui-corner-all ui-helper-hidden">Chart Style </legend>
151            <div>
152                <label>
153                    Fill</label><input id="fill" type="text" value="8ede43" />
154                <label>
155                    Stroke</label><input id="stroke" type="text" value="8ede43" />
156                <label>
157                    Stroke-size</label><input id="strokesize" type="text" value="1.5" />
158            </div>
159        </fieldset>
160    </div>
161</body>
162</html>
Note: See TracBrowser for help on using the repository browser.