##// END OF EJS Templates
Reformats about page
Michal Klocek -
r336:dd25dfe23960
parent child
Show More
@@ -1,21 +1,29
1 1 /*!
2 2 \page index.html
3 \title About QCharts
4 3 \keyword About
5 4
6 5 \raw HTML
7 6 <div class="qchart">
8 7 <img src="images/qt_commercial_logo.png" alt="qtcommercial"/>
9 8
10 <p>QCharts is a part of Qt Commercial addons package. It provides a set of simple chart components which are available for Qt Commercial customers.
11 It uses Qt Graphics View Framework, therefore charts can be easily integrated 2d modern user interfaces.
12 TODO: Introduction... With QCharts you can easily create impressive graphs of your data in Qt and QtQuick applications...</p>
9 <p>
10 QCharts is a part of Qt Commercial addons package. It provides a set of simple chart components which are available for Qt Commercial customers.
11 It uses Qt Graphics View Framework, therefore charts can be easily integrated 2D modern user interfaces. QCharts can be used as QWidgets, QGraphicsWidget or QML elements.
12 Users can easily create impressive graphs by selecting one of the charts themes.
13 </p>
14 <table><tr>
15 <td><img src="images/linechart.png" alt="linechart" /></td>
16 <td><img src="images/chartview_example_bar.jpg " alt="barchart" /></td>
17 <td><img src="images/chartview_example_pie.jpg " alt="piechart" /></td>
18 </tr>
19 <tr>
20 <td><img src="images/chartview_example.jpg " alt="linechart" /></td>
21 <td><img src="images/chartview_example_scatter.jpg " alt="scatterchart" /></td>
22 <td><img src="images/chartview_example_theme.jpg " alt="themechart" /></td>
23 </tr>
24 </table>
13 25 </div>
14 26 \endraw
15
16 For example, to create a chart with line series using a widget based application (TODO: decent screen shots):
17
18 \snippet ../example/chartview/main.cpp 1
19 \image chartview_example.jpg
20
27
28
21 29 */
@@ -1,695 +1,708
1 1 @media screen
2 2 {
3 3
4 .qchart
5 {
6 width: 80%;
7 margin-left: auto;
8 margin-right: auto;
9 margin-top: 50px;
10 }
11
4 12 .qchart img
5 13 {
6 14 float:left;
7 15 }
8 16
17 .qchart table
18 {
19 margin-top: 50px;
20 }
21
9 22 /* basic elements */
10 23 html
11 24 {
12 25 color: #000000;
13 26 background: #FFFFFF;
14 27 }
15 28 table
16 29 {
17 30 border-collapse: collapse;
18 31 border-spacing: 0;
19 32 }
20 33 fieldset, img
21 34 {
22 35 border: 0;
23 36 max-width:100%;
24 37 }
25 38 address, caption, cite, code, dfn, em, strong, th, var, optgroup
26 39 {
27 40 font-style: inherit;
28 41 font-weight: inherit;
29 42 }
30 43 del, ins
31 44 {
32 45 text-decoration: none;
33 46 }
34 47 li
35 48 {
36 49 list-style: none;
37 50 }
38 51 ol li
39 52 {
40 53 list-style: decimal;
41 54 }
42 55 caption, th
43 56 {
44 57 text-align: left;
45 58 }
46 59 h1, h2, h3, h4, h5, h6
47 60 {
48 61 font-size: 100%;
49 62 }
50 63 q:before, q:after
51 64 {
52 65 content: '';
53 66 }
54 67 abbr, acronym
55 68 {
56 69 border: 0;
57 70 font-variant: normal;
58 71 }
59 72 sup, sub
60 73 {
61 74 vertical-align: baseline;
62 75 }
63 76 tt, .qmlreadonly span, .qmldefault span
64 77 {
65 78 word-spacing:0.5em;
66 79 }
67 80 legend
68 81 {
69 82 color: #000000;
70 83 }
71 84 strong
72 85 {
73 86 font-weight: bold;
74 87 }
75 88 em
76 89 {
77 90 font-style: italic;
78 91 }
79 92
80 93 body
81 94 {
82 95 margin-left: 0.5em;
83 96 margin-right: 0.5em;
84 97 }
85 98 a
86 99 {
87 100 color: #00732F;
88 101 text-decoration: none;
89 102 }
90 103 hr
91 104 {
92 105 background-color: #E6E6E6;
93 106 border: 1px solid #E6E6E6;
94 107 height: 1px;
95 108 width: 100%;
96 109 text-align: left;
97 110 margin: 1.5em 0 1.5em 0;
98 111 }
99 112
100 113 pre
101 114 {
102 115 border: 1px solid #DDDDDD;
103 116 -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
104 117 -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
105 118 border-radius: 0.7em 0.7em 0.7em 0.7em;
106 119 margin: 0 1.5em 1em 1em;
107 120 padding: 1em 1em 1em 1em;
108 121 overflow-x: auto;
109 122 }
110 123 table, pre
111 124 {
112 125 -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
113 126 -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
114 127 border-radius: 0.7em 0.7em 0.7em 0.7em;
115 128 background-color: #F6F6F6;
116 129 border: 1px solid #E6E6E6;
117 130 border-collapse: separate;
118 131 margin-bottom: 2.5em;
119 132 }
120 133 pre {
121 134 font-size: 90%;
122 135 display: block;
123 136 overflow:hidden;
124 137 }
125 138 thead
126 139 {
127 140 margin-top: 0.5em;
128 141 font-weight: bold
129 142 }
130 143 th
131 144 {
132 145 padding: 0.5em 1.5em 0.5em 1.5em;
133 146 background-color: #E1E1E1;
134 147 border-left: 1px solid #E6E6E6;
135 148 }
136 149 td
137 150 {
138 151 padding: 0.25em 1.5em 0.25em 2em;
139 152 }
140 153
141 154 td.rightAlign
142 155 {
143 156 padding: 0.25em 0.5em 0.25em 1em;
144 157 }
145 158 table tr.odd
146 159 {
147 160 border-left: 1px solid #E6E6E6;
148 161 background-color: #F6F6F6;
149 162 color: #66666E;
150 163 }
151 164 table tr.even
152 165 {
153 166 border-left: 1px solid #E6E6E6;
154 167 background-color: #ffffff;
155 168 color: #66666E;
156 169 }
157 170
158 171 div.float-left
159 172 {
160 173 float: left; margin-right: 2em
161 174 }
162 175 div.float-right
163 176 {
164 177 float: right; margin-left: 2em
165 178 }
166 179
167 180 span.comment
168 181 {
169 182 color: #008B00;
170 183 font-style: italic
171 184 }
172 185 span.string, span.char
173 186 {
174 187 color: #000084;
175 188 }
176 189 span.number
177 190 {
178 191 color: #a46200;
179 192 }
180 193 span.operator
181 194 {
182 195 color: #202020;
183 196 }
184 197 span.keyword
185 198 {
186 199 color: #840000;
187 200 }
188 201 span.name
189 202 {
190 203 color: black
191 204 }
192 205 span.type
193 206 {
194 207 font-weight: bold
195 208 }
196 209 span.type a:visited
197 210 {
198 211 color: #0F5300;
199 212 }
200 213 span.preprocessor
201 214 {
202 215 color: #404040
203 216 }
204 217 /* end basic elements */
205 218
206 219 /* font style elements */
207 220 .heading
208 221 {
209 222 font-weight: bold;
210 223 font-size: 125%;
211 224 }
212 225 .subtitle
213 226 {
214 227 font-size: 110%
215 228 }
216 229 .small-subtitle
217 230 {
218 231 font-size: 100%
219 232 }
220 233 .red
221 234 {
222 235 color:red;
223 236 }
224 237 /* end font style elements */
225 238
226 239 /* global settings*/
227 240 .header, .footer
228 241 {
229 242 display: block;
230 243 clear: both;
231 244 overflow: hidden;
232 245 }
233 246 /* end global settings*/
234 247
235 248 /* header elements */
236 249 .header .qtref
237 250 {
238 251 color: #00732F;
239 252 font-weight: bold;
240 253 font-size: 100%;
241 254 text-align: center;
242 255 }
243 256
244 257 .header .content
245 258 {
246 259 /* margin-bottom: 0.5em*/
247 260 }
248 261
249 262 .header .content img
250 263 {
251 264 display: block;
252 265 margin-left: auto;
253 266 margin-right: auto;
254 267 width: 100px;
255 268 }
256 269
257 270 .naviNextPrevious
258 271 {
259 272 display: none
260 273 }
261 274 .header .breadcrumb
262 275 {
263 276 font-size: 100%;
264 277 padding: 0.5em 0 0.5em 1em;
265 278 margin: 0;
266 279 /*background-color: #393735;*/
267 280 font-weight: bold;
268 281 background: #ffffff url(../images/bg.png) repeat-x;
269 282 height: 20px;
270 283 border-bottom: 1px solid #d1d1d1;
271 284 }
272 285
273 286 .header .breadcrumb ul
274 287 {
275 288 margin: 0;
276 289 padding: 0;
277 290 }
278 291
279 292 .header .content
280 293 {
281 294 word-wrap: break-word;
282 295 }
283 296
284 297 .header .breadcrumb ul li
285 298 {
286 299 float: left;
287 300 /*background: url(../images/breadcrumb.png) no-repeat 0 3px;*/
288 301 padding-left: 1.5em;
289 302 margin-left: 1.5em;
290 303 }
291 304
292 305 .header .breadcrumb ul li.last
293 306 {
294 307 font-weight: normal;
295 308 }
296 309
297 310 .header .breadcrumb ul li a
298 311 {
299 312 color: #ffffff;
300 313 }
301 314
302 315 .header .breadcrumb ul li a:hover
303 316 {
304 317 color: #00732F;
305 318 text-decoration: none;
306 319 }
307 320
308 321 .header .breadcrumb ul li.first
309 322 {
310 323 background-image: none;
311 324 padding-left: 0;
312 325 margin-left: 0;
313 326 }
314 327
315 328 .header .content ol li {
316 329 background: none;
317 330 margin-bottom: 1.0em;
318 331 margin-left: 1.2em;
319 332 padding-left: 0
320 333 }
321 334
322 335 .header .content li
323 336 {
324 337 background: url(../images/bullet_sq.png) no-repeat 0 5px;
325 338 margin-bottom: 1em;
326 339 padding-left: 1.2em;
327 340 }
328 341
329 342 /* end header elements */
330 343
331 344 /* content elements */
332 345 .content h1
333 346 {
334 347 font-weight: bold;
335 348 font-size: 150%
336 349 }
337 350
338 351 .content h2
339 352 {
340 353 font-weight: bold;
341 354 font-size: 135%;
342 355 width: 100%;
343 356 }
344 357 .content h3
345 358 {
346 359 font-weight: bold;
347 360 font-size: 120%;
348 361 width: 100%;
349 362 }
350 363 .content table p
351 364 {
352 365 margin: 0
353 366 }
354 367 .content ul
355 368 {
356 369 padding-left: 2.5em;
357 370 }
358 371 .content li
359 372 {
360 373 padding-top: 0.25em;
361 374 padding-bottom: 0.25em;
362 375 }
363 376 .content ul img {
364 377 vertical-align: middle;
365 378 }
366 379
367 380 .content a:visited
368 381 {
369 382 color: #4c0033;
370 383 text-decoration: none;
371 384 }
372 385
373 386 .content a:visited:hover
374 387 {
375 388 color: #4c0033;
376 389 text-decoration: underline;
377 390 }
378 391
379 392 a:hover
380 393 {
381 394 color: #4c0033;
382 395 text-decoration: underline;
383 396 }
384 397 descr p a
385 398 {
386 399 text-decoration: underline;
387 400 }
388 401
389 402 .descr p a:visited
390 403 {
391 404 text-decoration: underline;
392 405 }
393 406
394 407 .alphaChar{
395 408 width:95%;
396 409 background-color:#F6F6F6;
397 410 border:1px solid #E6E6E6;
398 411 -moz-border-radius: 7px 7px 7px 7px;
399 412 border-radius: 7px 7px 7px 7px;
400 413 -webkit-border-radius: 7px 7px 7px 7px;
401 414 font-size:12pt;
402 415 padding-left:10px;
403 416 margin-top:10px;
404 417 margin-bottom:10px;
405 418 }
406 419 .flowList{
407 420 /*vertical-align:top;*/
408 421 /*margin:20px auto;*/
409 422
410 423 column-count:3;
411 424 -webkit-column-count:3;
412 425 -moz-column-count:3;
413 426 /*
414 427 column-width:100%;
415 428 -webkit-column-width:200px;
416 429 -col-column-width:200px;
417 430 */
418 431 column-gap:41px;
419 432 -webkit-column-gap:41px;
420 433 -moz-column-gap:41px;
421 434
422 435 column-rule: 1px dashed #ccc;
423 436 -webkit-column-rule: 1px dashed #ccc;
424 437 -moz-column-rule: 1px dashed #ccc;
425 438 }
426 439
427 440 .flowList dl{
428 441 }
429 442 .flowList dd{
430 443 /*display:inline-block;*/
431 444 margin-left:10px;
432 445 min-width:250px;
433 446 line-height: 1.5;
434 447 min-width:100%;
435 448 min-height:15px;
436 449 }
437 450
438 451 .flowList dd a{
439 452 }
440 453
441 454 .content .flowList p{
442 455 padding:0px;
443 456 }
444 457
445 458 .content .alignedsummary
446 459 {
447 460 margin: 15px;
448 461 }
449 462
450 463
451 464 .qmltype
452 465 {
453 466 text-align: center;
454 467 font-size: 120%;
455 468 }
456 469 .qmlreadonly
457 470 {
458 471 padding-left: 5px;
459 472 float: right;
460 473 color: #254117;
461 474 }
462 475
463 476 .qmldefault
464 477 {
465 478 padding-left: 5px;
466 479 float: right;
467 480 color: red;
468 481 }
469 482
470 483 .qmldoc
471 484 {
472 485 }
473 486
474 487 .generic .alphaChar{
475 488 margin-top:5px;
476 489 }
477 490
478 491 .generic .odd .alphaChar{
479 492 background-color: #F6F6F6;
480 493 }
481 494
482 495 .generic .even .alphaChar{
483 496 background-color: #FFFFFF;
484 497 }
485 498
486 499 .memItemRight{
487 500 padding: 0.25em 1.5em 0.25em 0;
488 501 }
489 502 .highlightedCode
490 503 {
491 504 margin: 1.0em;
492 505 }
493 506 .annotated td {
494 507 padding: 0.25em 0.5em 0.25em 0.5em;
495 508 }
496 509
497 510 .header .content .toc ul
498 511 {
499 512 padding-left: 0px;
500 513 }
501 514
502 515 .content .toc h3 {
503 516 border-bottom: 0px;
504 517 margin-top: 10px;
505 518 }
506 519
507 520 .content .toc h3 a:hover {
508 521 color: #00732F;
509 522 text-decoration: none;
510 523 }
511 524
512 525 .content .toc .level2
513 526 {
514 527 margin-left: 1.5em;
515 528 }
516 529
517 530 .content .toc .level3
518 531 {
519 532 margin-left: 3.0em;
520 533 }
521 534
522 535 .content ul li
523 536 {
524 537 background: url(../images/bullet_sq.png) no-repeat 0 0.7em;
525 538 padding-left: 1em
526 539 }
527 540
528 541 .content .toc li
529 542 {
530 543 background: url(../images/bullet_dn.png) no-repeat 0 5px;
531 544 padding-left: 1em
532 545 }
533 546
534 547 .relpage
535 548 {
536 549 -moz-border-radius: 7px 7px 7px 7px;
537 550 -webkit-border-radius: 7px 7px 7px 7px;
538 551 border-radius: 7px 7px 7px 7px;
539 552 border: 1px solid #DDDDDD;
540 553 padding: 25px 25px;
541 554 clear: both;
542 555 }
543 556 .relpage ul
544 557 {
545 558 float: none;
546 559 padding: 1.5em;
547 560 }
548 561
549 562 h3.fn, span.fn
550 563 {
551 564 -moz-border-radius:7px 7px 7px 7px;
552 565 -webkit-border-radius:7px 7px 7px 7px;
553 566 border-radius:7px 7px 7px 7px;
554 567 background-color: #F6F6F6;
555 568 border-width: 1px;
556 569 border-style: solid;
557 570 border-color: #E6E6E6;
558 571 font-weight: bold;
559 572 word-spacing:3px;
560 573 padding:3px 5px;
561 574 }
562 575
563 576 .functionIndex {
564 577 font-size:12pt;
565 578 word-spacing:10px;
566 579 margin-bottom:10px;
567 580 background-color: #F6F6F6;
568 581 border-width: 1px;
569 582 border-style: solid;
570 583 border-color: #E6E6E6;
571 584 -moz-border-radius: 7px 7px 7px 7px;
572 585 -webkit-border-radius: 7px 7px 7px 7px;
573 586 border-radius: 7px 7px 7px 7px;
574 587 width:100%;
575 588 }
576 589
577 590 .centerAlign
578 591 {
579 592 text-align:center;
580 593 }
581 594
582 595 .rightAlign
583 596 {
584 597 text-align:right;
585 598 }
586 599
587 600 .leftAlign
588 601 {
589 602 text-align:left;
590 603 }
591 604
592 605 .topAlign{
593 606 vertical-align:top
594 607 }
595 608
596 609 .functionIndex a{
597 610 display:inline-block;
598 611 }
599 612
600 613 /* end content elements */
601 614 /* footer elements */
602 615
603 616 .footer
604 617 {
605 618 color: #393735;
606 619 font-size: 0.75em;
607 620 text-align: center;
608 621 padding-top: 1.5em;
609 622 padding-bottom: 1em;
610 623 background-color: #E6E7E8;
611 624 margin: 0;
612 625 }
613 626 .footer p
614 627 {
615 628 margin: 0.25em
616 629 }
617 630 .small
618 631 {
619 632 font-size: 0.5em;
620 633 }
621 634 /* end footer elements */
622 635
623 636 .item {
624 637 float: left;
625 638 position: relative;
626 639 width: 100%;
627 640 overflow: hidden;
628 641 }
629 642
630 643
631 644 .item .primary {
632 645 margin-right: 220px;
633 646 position: relative;
634 647 }
635 648
636 649 .item hr {
637 650 margin-left: -220px;
638 651 }
639 652
640 653 .item .secondary {
641 654 float: right;
642 655 width: 200px;
643 656 position: relative;
644 657 }
645 658
646 659 .item .cols {
647 660 clear: both;
648 661 display: block;
649 662 }
650 663
651 664 .item .cols .col {
652 665 float: left;
653 666 margin-left: 1.5%;
654 667 }
655 668
656 669 .item .cols .col.first {
657 670 margin-left: 0;
658 671 }
659 672
660 673 .item .cols.two .col {
661 674 width: 45%;
662 675 }
663 676
664 677 .item .box {
665 678 margin: 0 0 10px 0;
666 679 }
667 680
668 681 .item .box h3 {
669 682 margin: 0 0 10px 0;
670 683 }
671 684
672 685 .cols.unclear {
673 686 clear:none;
674 687 }
675 688 }
676 689
677 690 /* end of screen media */
678 691
679 692 /* start of print media */
680 693
681 694 @media print
682 695 {
683 696 input, textarea, .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft, #feedbackBox, #blurpage, .toc, .breadcrumb, .toolbar, .floatingResult
684 697 {
685 698 display: none;
686 699 background: none;
687 700 }
688 701 .content
689 702 {
690 703 background: none;
691 704 display: block;
692 705 width: 100%; margin: 0; float: none;
693 706 }
694 707 }
695 708 /* end of print media */
General Comments 0
You need to be logged in to leave comments. Login now