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

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

wijmo
File size: 5.6 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Knockout - Composite 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/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
13    <script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script>
14    <script src="../../wijmo/jquery.wijmo.wijscatterchart.js" type="text/javascript"></script>
15    <script src="../../wijmo/jquery.wijmo.wijcompositechart.js" type="text/javascript"></script>
16    <script src="../../../../Wijmo-Open/development-bundle/external/knockout-2.0.0.js"
17        type="text/javascript"></script>
18    <script src="../../../../Wijmo-Open/development-bundle/external/knockout.wijmo.js"
19        type="text/javascript"></script>
20    <script type="text/javascript">
21        var index = 0, pie = 0;
22        var viewModel;
23        //Create ViewModel
24
25        //Bind ViewModel
26        $(document).ready(function () {
27            viewModel = {
28                seriesList: ko.observableArray([createRandomSeriesList('legend' + index)])
29            };
30            ko.applyBindings(viewModel, $(".container").get(0));
31        });
32
33        function createRandomSeriesList(label) {
34            var data = [],
35                                randomDataValuesCount = 12,
36                                labels = ["January", "February", "March", "April", "May", "June",
37                                        "July", "August", "September", "October", "November", "December"],
38                                idx;
39            for (idx = 0; idx < randomDataValuesCount; idx++) {
40                data.push(createRandomValue());
41            }
42            var type = $("#charttype").val();
43            if (type === "pie") {
44                pie++;
45                return {
46                    type: "pie",
47                    label: label,
48                    legendEntry: true,
49                    center: { x: 60 * pie, y: 60 },
50                    radius: 60,
51                    data: [{
52                        label: label + "pie0",
53                        legendEntry: true,
54                        data: createRandomValue(),
55                        offset: 0
56                    }, {
57                        label: label + "pie1",
58                        legendEntry: true,
59                        data: createRandomValue(),
60                        offset: 0
61                    }]
62                }
63            } else {
64                return {
65                    type: type,
66                    label: label,
67                    legendEntry: true,
68                    data: { x: labels, y: data }
69                };
70            }
71        }
72
73        function createRandomValue() {
74            var val = Math.round(Math.random() * 100);
75            return val;
76        }
77
78        function reload() {
79            index++;
80            pie = 0;
81            var randomSeriesList = createRandomSeriesList('legend' + index);
82            viewModel.seriesList([randomSeriesList]);
83        }
84        function add() {
85            index++;
86            var randomSeriesList = createRandomSeriesList('legend' + index);
87            viewModel.seriesList.push(randomSeriesList);
88        }
89    </script>
90</head>
91<body class="demo-single">
92    <div class="container">
93        <div class="header">
94            <h2>
95                Composite Chart</h2>
96        </div>
97        <div class="main demo">
98            <!-- Begin demo markup -->
99            <div id="wijcompositechart" data-bind="wijcompositechart: {seriesList: seriesList}"
100                style="width: 600px; height: 400px;">
101            </div>
102            <!-- End demo markup -->
103            <div class="demo-options">
104                <!-- Begin options markup -->
105                <ul>
106                    <li>
107                        <label>
108                            <span>charttype:</span></label><select id="charttype">
109                                <option value="column">column</option>
110                                <option value="line">line</option>
111                                <option value="spline">spline</option>
112                                <option value="bezier">bezier</option>
113                                <option value="area">area</option>
114                                <option value="pie">pie</option>
115                                <option value="scatter">scatter</option>
116                            </select>
117                    </li>
118                </ul>
119                <div>
120                    <input type="button" value="reset observablearray" onclick="reload()" />
121                </div>
122                <div>
123                    <input type="button" value="add" onclick="add()" />
124                </div>
125                <!-- End options markup -->
126            </div>
127        </div>
128        <div class="footer demo-description">
129            <p>
130                Wijmo provides a Knockout Integration Library so that all jQuery UI and Wijmo widgets
131                can be used with Knockout declarative syntax.
132            </p>
133        </div>
134    </div>
135</body>
136</html>
137<body>
138</body>
139</html> 
Note: See TracBrowser for help on using the repository browser.