| 1 | <!doctype html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>CompositeChart - Overview</title> |
|---|
| 5 | <meta charset="utf-8" /> |
|---|
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|---|
| 7 | <meta name="description" content="%description%" /> |
|---|
| 8 | <meta name="keywords" content="" /> |
|---|
| 9 | <meta name="author" content="ComponentOne" /> |
|---|
| 10 | |
|---|
| 11 | <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" /> |
|---|
| 12 | |
|---|
| 13 | <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script> |
|---|
| 14 | <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script> |
|---|
| 15 | <script src="../../external/globalize.min.js" type="text/javascript"></script> |
|---|
| 16 | <script src="../../external/raphael-min.js" type="text/javascript"></script> |
|---|
| 17 | <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script> |
|---|
| 18 | <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script> |
|---|
| 19 | <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script> |
|---|
| 20 | <script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script> |
|---|
| 21 | <script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script> |
|---|
| 22 | <script src="../../wijmo/jquery.wijmo.wijcompositechart.js" type="text/javascript"></script> |
|---|
| 23 | <script id="scriptInit" type="text/javascript"> |
|---|
| 24 | $(document).ready(function () { |
|---|
| 25 | var data1 = [{ |
|---|
| 26 | type: "Desktops", |
|---|
| 27 | west: 5, |
|---|
| 28 | central: 2, |
|---|
| 29 | east: 3, |
|---|
| 30 | Steam1: 3, |
|---|
| 31 | Steam2: 1 |
|---|
| 32 | }, { |
|---|
| 33 | type: "Notebooks", |
|---|
| 34 | west: 3, |
|---|
| 35 | central: 2, |
|---|
| 36 | east: 4, |
|---|
| 37 | Steam1: 6, |
|---|
| 38 | Steam2: 3 |
|---|
| 39 | }, { |
|---|
| 40 | type: "AIO", |
|---|
| 41 | west: 4, |
|---|
| 42 | central: 3, |
|---|
| 43 | east: 4, |
|---|
| 44 | Steam1: 2, |
|---|
| 45 | Steam2: 4 |
|---|
| 46 | }, { |
|---|
| 47 | type: "Tablets", |
|---|
| 48 | west: 7, |
|---|
| 49 | central: 2, |
|---|
| 50 | east: 2, |
|---|
| 51 | Steam1: 9, |
|---|
| 52 | Steam2: 7 |
|---|
| 53 | }, { |
|---|
| 54 | type: "Phones", |
|---|
| 55 | west: 2, |
|---|
| 56 | central: 1, |
|---|
| 57 | east: 5, |
|---|
| 58 | Steam1: 5, |
|---|
| 59 | Steam2: 2 |
|---|
| 60 | }]; |
|---|
| 61 | |
|---|
| 62 | var pieData = [{ |
|---|
| 63 | label: "MacBook Pro", |
|---|
| 64 | legendEntry: true, |
|---|
| 65 | data: 46.78, |
|---|
| 66 | offset: 15 |
|---|
| 67 | }, { |
|---|
| 68 | label: "iMac", |
|---|
| 69 | legendEntry: true, |
|---|
| 70 | data: 23.18, |
|---|
| 71 | offset: 0 |
|---|
| 72 | }, { |
|---|
| 73 | label: "MacBook", |
|---|
| 74 | legendEntry: true, |
|---|
| 75 | data: 20.25, |
|---|
| 76 | offset: 0 |
|---|
| 77 | }]; |
|---|
| 78 | |
|---|
| 79 | $("#wijcompositechart").wijcompositechart({ |
|---|
| 80 | axis: { |
|---|
| 81 | y: { |
|---|
| 82 | text: "Total Hardware" |
|---|
| 83 | }, |
|---|
| 84 | x: { |
|---|
| 85 | text: "" |
|---|
| 86 | } |
|---|
| 87 | }, |
|---|
| 88 | stacked: false, |
|---|
| 89 | hint: { |
|---|
| 90 | content: function () { |
|---|
| 91 | return this.label + '\n ' + this.y + ''; |
|---|
| 92 | } |
|---|
| 93 | }, |
|---|
| 94 | header: { |
|---|
| 95 | text: "Hardware Distribution" |
|---|
| 96 | }, |
|---|
| 97 | dataSource: data1, |
|---|
| 98 | data: { |
|---|
| 99 | x: { |
|---|
| 100 | bind: "type" |
|---|
| 101 | } |
|---|
| 102 | }, |
|---|
| 103 | |
|---|
| 104 | seriesList: [{ |
|---|
| 105 | type: "column", |
|---|
| 106 | label: "West", |
|---|
| 107 | legendEntry: true, |
|---|
| 108 | data: { |
|---|
| 109 | y: { bind: "west" } |
|---|
| 110 | } |
|---|
| 111 | }, { |
|---|
| 112 | type: "column", |
|---|
| 113 | label: "Central", |
|---|
| 114 | legendEntry: true, |
|---|
| 115 | data: { |
|---|
| 116 | y: { bind: "central" } |
|---|
| 117 | } |
|---|
| 118 | }, { |
|---|
| 119 | type: "column", |
|---|
| 120 | label: "East", |
|---|
| 121 | legendEntry: true, |
|---|
| 122 | data: { |
|---|
| 123 | y: { bind: "east" } |
|---|
| 124 | } |
|---|
| 125 | }, { |
|---|
| 126 | type: "pie", |
|---|
| 127 | //label: "asdfdsfdsf", |
|---|
| 128 | //legendEntry: true, |
|---|
| 129 | center: { x: 150, y: 150 }, |
|---|
| 130 | radius: 60, |
|---|
| 131 | dataSource: pieData, |
|---|
| 132 | data: { |
|---|
| 133 | label: { bind: "label" }, |
|---|
| 134 | value: { bind: "data" }, |
|---|
| 135 | offset: { bind: "offset" } |
|---|
| 136 | } |
|---|
| 137 | }, { |
|---|
| 138 | type: "line", |
|---|
| 139 | label: "Steam1", |
|---|
| 140 | legendEntry: true, |
|---|
| 141 | data: { |
|---|
| 142 | y: { bind: "Steam1" } |
|---|
| 143 | }, |
|---|
| 144 | markers: { |
|---|
| 145 | visible: true, |
|---|
| 146 | type: "circle" |
|---|
| 147 | } |
|---|
| 148 | }, { |
|---|
| 149 | type: "line", |
|---|
| 150 | label: "Steam2", |
|---|
| 151 | legendEntry: true, |
|---|
| 152 | data: { |
|---|
| 153 | y: { bind: "Steam2" } |
|---|
| 154 | }, |
|---|
| 155 | markers: { |
|---|
| 156 | visible: true, |
|---|
| 157 | type: "tri" |
|---|
| 158 | } |
|---|
| 159 | } |
|---|
| 160 | ] |
|---|
| 161 | }); |
|---|
| 162 | }); |
|---|
| 163 | </script> |
|---|
| 164 | </head> |
|---|
| 165 | <body class="demo-single"> |
|---|
| 166 | <div class="container"> |
|---|
| 167 | <div class="header"> |
|---|
| 168 | <h2> |
|---|
| 169 | Overview</h2> |
|---|
| 170 | </div> |
|---|
| 171 | <div class="main demo"> |
|---|
| 172 | <!-- Begin demo markup --> |
|---|
| 173 | <div id="wijcompositechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px"> |
|---|
| 174 | </div> |
|---|
| 175 | <!-- End demo markup --> |
|---|
| 176 | <div class="demo-options"> |
|---|
| 177 | <!-- Begin options markup --> |
|---|
| 178 | <!-- End options markup --> |
|---|
| 179 | </div> |
|---|
| 180 | </div> |
|---|
| 181 | <div class="footer demo-description"> |
|---|
| 182 | <p> |
|---|
| 183 | The Wijmo Composite Chart widget (wijcompositechart) allows you to draw multiple types of charts in one canvas simultaneously. |
|---|
| 184 | This sample uses a bar and line chart. The line chart emphasizes the gradual increase of visitors over time. |
|---|
| 185 | </p> |
|---|
| 186 | </div> |
|---|
| 187 | </div> |
|---|
| 188 | </body> |
|---|
| 189 | </html> |
|---|
