source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/knockout/ko_wijbarchart.html @ 622

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

wijmo
File size: 4.7 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Knockout - Bar Chart</title>
5    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
6    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
7    <script src="../../external/globalize.min.js" type="text/javascript"></script>
8    <script src="../../external/raphael-min.js" type="text/javascript"></script>
9    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
10    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
11    <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
12    <script src="../../../../Wijmo-Open/development-bundle/external/knockout-2.0.0.js"
13        type="text/javascript"></script>
14    <script src="../../../../Wijmo-Open/development-bundle/external/knockout.wijmo.js"
15        type="text/javascript"></script>
16    <script type="text/javascript">
17        var index = 0;
18        //Create ViewModel
19        var viewModel = {
20            header: ko.observable('head'),
21            stacked: ko.observable(false),
22            seriesList: ko.observableArray([createRandomSeriesList('legend' + index)])
23            /*[{
24            label: 'US',
25            legendEntry: true,
26            data: {
27            x: ['PS3', 'XBOX360', 'Wii'],
28            y: [12.35, 21.50, 30.56]}
29            }]
30            */
31        };
32
33        //Bind ViewModel
34        $(document).ready(function () {
35            ko.applyBindings(viewModel, $(".container").get(0));
36        });
37
38        function createRandomSeriesList(label) {
39            var data = [],
40                                randomDataValuesCount = 12,
41                                labels = ["January", "February", "March", "April", "May", "June",
42                                        "July", "August", "September", "October", "November", "December"],
43                                idx;
44            for (idx = 0; idx < randomDataValuesCount; idx++) {
45                data.push(createRandomValue());
46            }
47            return {
48                label: label,
49                legendEntry: false,
50                data: { x: labels, y: data }
51            };
52        }
53
54        function createRandomValue() {
55            var val = Math.round(Math.random() * 100);
56            return val;
57        }
58
59        function reload() {
60            index++;
61            var randomSeriesList = createRandomSeriesList('legend' + index);
62            viewModel.seriesList([randomSeriesList]);
63        }
64        function add() {
65            index++;
66            var randomSeriesList = createRandomSeriesList('legend' + index);
67            viewModel.seriesList.push(randomSeriesList);
68        }
69    </script>
70</head>
71<body class="demo-single">
72    <div class="container">
73        <div class="header">
74            <h2>
75                Bar Chart</h2>
76        </div>
77        <div class="main demo">
78            <!-- Begin demo markup -->
79            <div id="wijbarchart" data-bind="wijbarchart: {stacked: stacked, seriesList: seriesList}"
80                style="width: 600px; height: 400px;">
81            </div>
82            <!-- End demo markup -->
83            <div class="demo-options">
84                <!-- Begin options markup -->
85                <ul>
86                    <li>
87                        <label>
88                            <span>stacked:</span>
89                        </label>
90                        <input type="checkbox" data-bind="checked: stacked" />
91                    </li>
92                </ul>
93                <div>
94                    <input type="button" value="reset observablearray" onclick="reload()" />
95                </div>
96                <div>
97                    <input type="button" value="add" onclick="add()" />
98                </div>
99                <div>
100                    <table>
101                        <thead>
102                            <tr>
103                                <th>
104                                    seriesList
105                                </th>
106                            </tr>
107                        </thead>
108                        <tbody data-bind="foreach: seriesList">
109                            <tr>
110                                <td data-bind="text: label">
111                                </td>
112                            </tr>
113                        </tbody>
114                    </table>
115                </div>
116                <!-- End options markup -->
117            </div>
118        </div>
119        <div class="footer demo-description">
120            <p>
121                Wijmo provides a Knockout Integration Library so that all jQuery UI and Wijmo widgets
122                can be used with Knockout declarative syntax.
123            </p>
124        </div>
125    </div>
126</body>
127</html>
Note: See TracBrowser for help on using the repository browser.