Yajbir-Malik/DocumentServer-v-9.2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init repo

Browse Source
This commit is contained in:
nikolay ivanov
2014-07-05 18:22:49 +00:00
commit a8be6b9e72
17348 changed files with 9229832 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2613
OfficeWeb/sdk/Common/Charts/examples/Bar/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2544
OfficeWeb/sdk/Common/Charts/examples/Bipolar/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2576
OfficeWeb/sdk/Common/Charts/examples/Gantt/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2668
OfficeWeb/sdk/Common/Charts/examples/HBar/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2767
OfficeWeb/sdk/Common/Charts/examples/Line/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2610
OfficeWeb/sdk/Common/Charts/examples/Pie/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2644
OfficeWeb/sdk/Common/Charts/examples/Radar/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2576
OfficeWeb/sdk/Common/Charts/examples/Rose/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2576
OfficeWeb/sdk/Common/Charts/examples/Rscatter/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2648
OfficeWeb/sdk/Common/Charts/examples/Scatter/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

2576
OfficeWeb/sdk/Common/Charts/examples/Waterfall/testExample.html Normal file
View File

File diff suppressed because it is too large Load Diff

31
OfficeWeb/sdk/Common/Charts/examples/allCharts.html Normal file
View File

@@ -0,0 +1,31 @@
<html>
<body>
<div style = 'width: 300px;margin-left: 750px;margin-top: 200px;'>
Draw Diagram<br>
<a href = 'Line/testExample.html?type=grouping'>Line Chart</a><br>
<a href = 'Line/testExample.html?type=stacked'>Line Chart(Accumulation)</a><br>
<a href = 'Line/testExample.html?type=stackedPer'>Line Chart(Normalized)</a><br>
<a href = 'Bar/testExample.html?type=grouping'>Bar Chart</a><br>
<a href = 'Bar/testExample.html?type=stacked'>Bar Chart(Accumulation)</a><br>
<a href = 'Bar/testExample.html?type=stackedPer'>Bar Chart(Normalized)</a><br>
<a href = 'HBar/testExample.html?type=grouping'>Horizontal Bar Chart</a><br>
<a href = 'HBar/testExample.html?type=stacked'>Horizontal Bar Chart(Accumulation)</a><br>
<a href = 'HBar/testExample.html?type=stackedPer'>Horizontal Bar Chart(Normalized)</a><br>
<!--<a href = 'Bipolar/testExample.html'>Bipolar Chart</a><br>-->
<!--<a href = 'Gantt/testExample.html'>Gantt Chart</a><br>-->
<a href = 'Pie/testExample.html'>Pie Chart</a><br>
<a href = 'Radar/testExample.html'>Radar Chart</a><br>
<!--<a href = 'Rose/testExample.html'>Rose Chart</a><br>-->
<a href = 'Scatter/testExample.html?type=normall'>Scatter Chart</a><br>
<a href = 'Scatter/testExample.html?type=exchange'>Exchange Chart</a><br>
<!--<a href = 'Rscatter/testExample.html'>Rscatter Chart</a><br>-->
<!--<a href = 'Waterfall/testExample.html'>Waterfall Chart</a><br>-->
</div>
</body>
</html>

107
OfficeWeb/sdk/Common/Charts/examples/bar.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of an OfficeExcel Bar chart</title>
<meta name="keywords" content="html5 canvas example bar charts" />
<meta name="description" content="An example of the type of Bar chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A javascript charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.chartProperties.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
/**
* The onload function creates the graph
*/
window.onload = function ()
{
//var bar1 = new OfficeExcel.Bar('bar1', [[50,75],[32, 44],[61, 56],[91, 81],[92, 8],[34, 57],[56, 62],[55, 45],[36, 12],[44, 56],[51, 66],[68, 88]]);
var bar1 = new OfficeExcel.Bar('bar1', [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89]);
bar1._otherProps._variant = 'bar';
/*bar1.Set('chart.background.barcolor1', 'white');
bar1.Set('chart.background.barcolor2', 'white');
bar1.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
bar1.Set('chart.key', ['John', 'Bob']);
bar1.Set('chart.key.position.y', 35);
bar1.Set('chart.key.position', 'gutter');
bar1.Set('chart.key.background', 'rgb(255,255,255)');
bar1.Set('chart.colors', ['#77f', '#7f7']);
bar1.Set('chart.shadow', true);
bar1.Set('chart.shadow.blur', 15);
bar1.Set('chart.shadow.offsetx', 0);
bar1.Set('chart.shadow.offsety', 0);
bar1.Set('chart.shadow.color', '#aaa');
bar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
bar1.Set('chart.gutter.left', 55);
bar1.Set('chart.gutter.right', 5);*/
bar1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Bar charts example
</div>
<h1>Bar <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<div>
<p>
Bar charts are probably one of the most widely used of charts, and also one of the most versatile.
It's defined as a chart with rectangular bars with lengths proportional to the values they represent.
The bar chart can be used to represent two or more values. With grouped and stacked bar charts, you
can visualise two or more sets of data. For example two years worth of sales figures. Doing this you
will be able to easily see trends, for example a better year when it comes to sales. You can
also show negative values by having the X axis in the center, like the examples shown. If you use
a grouped or stacked bar chart, a key may be helpful to your users.
</p>
<p>
By using the tooltips feature, you can provide more detail about what a particular bar represents. The
tooltips in OfficeExcel can contain wide range of HTML, so you can use them to show photos or movies for example.
</p>
<ul>
<li><a href="../docs/bar.html">Bar chart API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="bar1" width="900" height="200">[No canvas support]</canvas>
</div>
</div>
</body>
</html>

47
OfficeWeb/sdk/Common/Charts/examples/basic.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>A basic example of an OfficeExcel chart</title>
<meta name="keywords" content="javascript charts html5 canvas basic example" />
<meta name="description" content="A basic example of an OfficeExcel chart for implementation help" />
<meta name="googlebot" content="NOODP">
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
</head>
<body>
<h1>A basic example</h1>
<!-- 2/3. This is the canvas that the graph is drawn on -->
<canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>
<!--
3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event,
allowing you to put it in your pages header.
-->
<script>
window.onload = function ()
{
var bar = new OfficeExcel.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]);
bar.Set('chart.gutter.left', 35);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', 'A basic chart');
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Draw();
}
</script>
<p>
This is a very basic example that does little more than display a chart. If you're trying to understand how OfficeExcel
works, this should help as there is very little happening on this page. To see the source code of this
page simply view the source (Right click > View Source).
</p>
</body>
</html>

102
OfficeWeb/sdk/Common/Charts/examples/bipolar.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of an OfficeExcel Bi-polar chart</title>
<meta name="keywords" content="html5 canvas example bipolar charts" />
<meta name="description" content="An example of the type of Bi-polar chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js"></script>
<script src="../libraries/OfficeExcel.common.tooltips.js"></script>
<script src="../libraries/OfficeExcel.chartProperties.js" ></script>
<script src="../libraries/OfficeExcel.bipolar.js"></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var left = [5,6,8,9,12,13,4,9];
var right = [5,8,4,11,15,26,13,16];
var bipolar1 = new OfficeExcel.Bipolar('bipolar1', left, right);
bipolar1._otherProps._colors = ['red'];
bipolar1._otherProps._labels = ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike'];
bipolar1._otherProps._title_left = '2007';
bipolar1._otherProps._title_right = '2008';
bipolar1._chartTitle._text = 'Sales comparison';
if (!OfficeExcel.isIE8()) {
bipolar1._tooltip._tooltips = [function () {return 'Barry';}, 'id:john', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike', 'Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike'];
bipolar1._tooltip._effect = 'fade';
}
bipolar1._otherProps._units_post = 'k';
bipolar1._otherProps._xmax = 35;
bipolar1._shadow._visible = true;
bipolar1._shadow._offsety = 0;
bipolar1._shadow._offsetx = 0;
bipolar1._shadow._color = '#aaa';
bipolar1._shadow._blur = 25;
bipolar1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Bi-polar charts example
</div>
<h1>Bi-polar <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<div>
<p>
The Bi-polar chart is also known as an age-frequency chart or a population pyramid. It allows you to very
straight forwardly compare two sets of data. For example two years worth of sales figues. By using this type
of chart abnormalities will become apparent. Other charts that would also be comparable, include a grouped
bar chart, a stacked bar chart, and a multiple line chart.
</p>
<ul>
<li><a href="../docs/bipolar.html">Bi-polar chart API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="bipolar1" width="600" height="250">[No canvas support]</canvas>
</div>
</div>
<div id="john" style="display: none">John</div>
</body>
</html>

84
OfficeWeb/sdk/Common/Charts/examples/css/diagram.css Normal file
View File

@@ -0,0 +1,84 @@
.inputStyle{
font-size:11pt;
}
.hidden{
display:none;
}
.lineSpacingSelect:hover {
background-color: #2177CD; /* <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> */
}
.lineSpacingSelect
{
font-size:10pt;
padding:3px;
}
.lineMainSelect:hover {
background-color: #2177CD; /* <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> */
}
.lineMainSelect
{
font-size:10pt;
padding:3px;
}
.lineMainSelect1:hover {
background-color: #2177CD; /* <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> */
}
.lineMainSelect1
{
font-size:10pt;
padding:3px;
}
.paletteCellHover .colorWatch{border:1px solid #FFFFFF;width:16px;height:16px;}
.colorWatch {
height:18px;
width:18px;
border-bottom-color:#FFFF00;
}
.bordered {border:1px solid #666666;}
.bg_fill {
background-position:-544px 50%;
height:14px;
width:16px;
}
body { margin: 0; padding: 0; vertical-align:top; overflow:hidden;-moz-user-select: none; -khtml-user-select: none; user-select: none;background-color: #EEEEEE}
div, table, tbody, tr, th, td, form {
margin:0;
padding:0;
vertical-align:top;
}
#doc-edit {
background-color:#EEF0F2;
}
#blockUI{display: none; position:absolute; left:0px; top:0px; margin:0; padding:0; z-index:200; background-color:#000000; border:medium none; cursor:wait; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6; }
table {
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
table-layout:fixed;
}
.options{position: absolute; z-index: 3; background:none repeat scroll 0 0 #FFFFFF;border-color:#FFF #666666 #666666 #A8A8A8;border-style: none solid solid solid;border-width:1px;}
.MenuSeparator
{
border-top: 1px solid #CCCCCC;
margin: 4px 0;
padding: 0;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.buttonMaket
{
height:80px;
width:80px;
}
.opacitBack
{
background: #b2b2b2; opacity:0.55;
}
.dragBorder
{
border: 2px dotted #CCCCCC;
}

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/blank.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_hex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_hsb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_hsb_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_hsb_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_indic.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_rgb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_rgb_g.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_rgb_r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_select.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/colorpicker_submit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 984 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/slider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_diagonals-thick_18_b81900_40x40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_diagonals-thick_20_666666_40x40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_flat_10_000000_40x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_glass_100_f6f6f6_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_glass_100_fdf5ce_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_glass_65_ffffff_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 B

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-icons_222222_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-icons_228ef1_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-icons_ef8c08_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-icons_ffd27a_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
OfficeWeb/sdk/Common/Charts/examples/css/images/ui-icons_ffffff_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

406
OfficeWeb/sdk/Common/Charts/examples/css/jquery-ui.css vendored Normal file
View File

@@ -0,0 +1,406 @@
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
*/
/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #6688EE; background: #BBCCFF 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #ffffff; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
/* Overlays */
.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; }/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }
/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/* Progressbar
----------------------------------*/
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* Resizable
----------------------------------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 12px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 15px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
----------------------------------*/
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

96
OfficeWeb/sdk/Common/Charts/examples/donut.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of OfficeExcel Donut charts</title>
<meta name="keywords" content="html5 canvas example donut charts" />
<meta name="description" content="An example of the type of Bi-polar chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.annotate.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var donut = new OfficeExcel.Pie('donut1', [41,37,16,3,3]);
donut.Set('chart.variant', 'donut');
donut.Set('chart.linewidth', 5);
donut.Set('chart.strokestyle', 'white');
donut.Set('chart.title', "Browser share");
donut.Set('chart.tooltips', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
donut.Set('chart.key', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
donut.Set('chart.key.shadow', true);
donut.Set('chart.key.shadow.offsetx', 0);
donut.Set('chart.key.shadow.offsety', 0);
donut.Set('chart.key.shadow.blur', 15);
donut.Set('chart.key.shadow.color', '#ccc');
donut.Set('chart.key.position', 'graph');
donut.Set('chart.align', 'left');
donut.Set('chart.shadow', true);
donut.Set('chart.shadow.offsetx', 0);
donut.Set('chart.shadow.offsety', 0);
donut.Set('chart.shadow.blur', 25);
donut.Set('chart.centerx', donut.canvas.width / 2);
donut.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Donut charts example
</div>
<h1>Donut <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<p>
Formerly the Donut chart was a separate chart entirely, though now it's a variant of the Pie chart. This means smaller downloads and
a much simpler implementation.
</p>
<div>
<ul>
<li><a href="../docs/pie.html">Pie charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="donut1" width="430" height="350">[No canvas support]</canvas>
</div>
</div>
</body>
</html>

144
OfficeWeb/sdk/Common/Charts/examples/gantt.html Normal file
View File

@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the OfficeExcel Gantt chart</title>
<meta name="keywords" content="html5 canvas example gantt charts" />
<meta name="description" content="An example of the type of Gantt chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.gantt.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<style>
.OfficeExcel_tooltip {
color: #00a ! important;
}
.OfficeExcel_tooltip b {
color: black ! important;
}
</style>
<script>
window.onload = function ()
{
gantt1 = new OfficeExcel.Gantt('cvs');
gantt1.Set('chart.xmax', 122);
gantt1.Set('chart.gutter.right', 35);
gantt1.Set('chart.labels', ['January', 'February', 'March', 'April']);
gantt1.Set('chart.title', 'Work schedule for Xyz Ltd');
gantt1.Set('chart.defaultcolor', '#faa');
gantt1.Set('chart.background.grid', false);
if (!OfficeExcel.isOld()) {
gantt1.Set('chart.tooltips', ["<b>Richard Crenshaw</b><br />Working through adding something<br /> to the website.",
null,
"<b>Rachel Higgenbottom</b><br />Singing sweetly",
"<b>Rachel Higgenbottom(2)</b><br />Still singing very nicely",
"<b>Fred Bloggs</b><br />Building a new drive",
"<b>Barney Rubble</b><br />Not started adding the new garden",
"<b>Gloria Crockford</b><br />Just started dinner",
"<b>Paul Josford</b><br />Nearly finished the front garden",
"<b>Harry Secjom</b><br />Roughly half way through the book reading",
"<b>Shane Ritchford</b><br />Comedian",
"<b>Kyle Jasford</b><br />Gardening",
"<b>Cynthia Frances</b><br />Not entirely sure what she's doing",
"<b>Mabel Mincy</b><br />Making more lunches",
"<b>Paul MacFord</b><br />Putting everyone off their work",
"<b>Kiffen Longbottom</b><br />Farming Maize",
"<b>John Blussford</b><br />A deer"]);
gantt1.Set('chart.tooltips.effect', 'expand');
}
gantt1.Set('chart.events', [
[[31, 28, 67, 'Richard'], [90,15, 50, null, 'blue', 'red']],
[[0, 28, 50, 'Rachel'], [80,25, 74]],
[12, 28, 45, 'Fred'],
[59, 14, 0, 'Barney'],
[59, 21, 5, 'Gloria'],
[46, 31, 92, 'Paul'],
[80, 21, 46, 'Harry'],
[94, 17, 84, 'Shane'],
[34, 14, 32, 'Kyle'],
[64, 14, 28, 'Cynthia'],
[13, 61, 74, 'Mabel'],
[84, 31, 16, 'Paul'],
[100, 22, 45, 'Kiffen'],
[0, 365, 50, 'John']
]);
var color = 'rgba(192,255,192,0.5)';
gantt1.Set('chart.vbars', [
[0, 10, color],
[20, 10, color],
[40, 10, color],
[60, 10, color],
[80, 10, color],
[100, 10, color]
]);
gantt1.Set('chart.borders', false);
gantt1.Set('chart.title.vpos', 0.6);
gantt1.Set('chart.labels.align', 'bottom');
gantt1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Gantt charts example
</div>
<h1>Gantt <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<p>
Gantt charts are used to show scheduling information. They are commonly used in project management but can also be used
to show holiday schedule information. In this case it would be easy to see when someone is unavailable.
Gantt charts can have clickable bars that can be used to provide extra detail. They can also show vertical bars that
can be used to indicate events, or as in the cases below, can be decorative.
</p>
<p>
The charts are made of "units", in this case 365. This represents days in a year. The labels are separate, being
equally spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend.
As in the example.
</p>
<ul>
<li><a href="../docs/gantt.html">Gantt charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="cvs" width="850" height="300">[No canvas support]</canvas>
</div>
</body>
</html>

88
OfficeWeb/sdk/Common/Charts/examples/hbar.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the OfficeExcel Horizontal Bar chart</title>
<meta name="keywords" content="html5 canvas example horizontal bar charts" />
<meta name="description" content="An example of the type of Horizontal Bar chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.hbar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
/**
* The onload function creates the chart
*/
window.onload = function ()
{
var hbar1 = new OfficeExcel.HBar('hbar1', [55.11, 21.63, 11.94, 7.15, 2.14, 1.11, 0.91]);
var grad = hbar1.context.createLinearGradient(275,0,900, 0);
grad.addColorStop(0, 'white');
grad.addColorStop(1, 'blue');
hbar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
hbar1.Set('chart.gutter.left', 275);
hbar1.Set('chart.gutter.right', 10);
hbar1.Set('chart.background.grid.autofit', true);
hbar1.Set('chart.title', 'Browser usage (NetApps) in May 2011');
hbar1.Set('chart.labels', ['Microsoft Internet Explorer (55.11%)','Mozilla Firefox (21.63%)', 'Google Chrome (11.94)','Apple Safari (7.15%)','Opera (2.14%)','Opera Mini (1.11)','Other (0.91%)']);
hbar1.Set('chart.shadow', true);
hbar1.Set('chart.shadow.color', 'gray');
hbar1.Set('chart.shadow.offsetx', 0);
hbar1.Set('chart.shadow.offsety', 0);
hbar1.Set('chart.shadow.blur', 15);
hbar1.Set('chart.colors', [grad]);
hbar1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Horizontal Bar charts example
</div>
<h1>Horizontal <span>bar charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<p>
A horizontal bar chart can be useful when your labels are too big for regular bar charts.
</p>
<ul>
<li><a href="../docs/hbar.html">Horizontal bar charts API documentation</a></li>
</ul>
<a name="gutter-example"></a>
<canvas id="hbar1" width="900" height="400">[No canvas support]</canvas>
</body>
</html>

152
OfficeWeb/sdk/Common/Charts/examples/index.html Normal file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<title>Examples of the types of charts that OfficeExcel supports</title>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<meta name="keywords" content="charts html5 javascript charts canvas" />
<meta name="description" content="Examples of supported chart types" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.rose.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<?php PrintAnalyticsCode() ?>
<script>
window.onload = function ()
{
var rose1 = new OfficeExcel.Rose('cvs', [41,37,16,3,3,45,26,25,24,12,34,60,36,24,23,22]);
grad_x = rose1.canvas.width / 2;
grad_y = rose1.canvas.height / 2;
var grad = rose1.context.createRadialGradient(grad_x, grad_y, 0, grad_x, grad_y, 150);
grad.addColorStop(0, 'rgba(0,255,0,0.3)')
grad.addColorStop(1, '#0c0')
rose1.Set('chart.colors.alpha', 0.5);
rose1.Set('chart.colors', [grad]);
rose1.Set('chart.gutter.top', 30);
rose1.Set('chart.gutter.left', 30);
rose1.Set('chart.gutter.right', 30);
rose1.Set('chart.margin', 2);
rose1.Set('chart.labels', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']);
rose1.Set('chart.labels.axes', 'n');
if (!OfficeExcel.isIE8()) {
rose1.Set('chart.tooltips', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']);
}
rose1.Draw();
}
</script>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
Examples of supported charts
</div>
<h1>Examples <span>of supported charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="text-align: center">
<div class="warning" style="display: inline; display: inline-block">
Need something that OfficeExcel doesn't currently support? OfficeExcel license holders can usually be accomodated - please
</div>
</div>
<p>
The following Javascript charts and HTML5 examples are available. The charts are made with the HTML5 canvas tag so they're quick to load and interactive.
</p>
<div style="float: right; text-align: center; width: 350px">
<b>A Rose chart of sales statistics</b>
<canvas id="cvs" width="350" height="350">[No canvas support]</canvas>
</div>
<div style="width: 600px">
<div style="float: left; width: 275px">
<h4>Bar, line and pie chart examples</h4>
<ul>
<li><a href="bar.html">Bar charts</a></li>
<li><a href="bipolar.html">Bi-polar charts</a></li>
<li><a href="hbar.html">Horizontal Bar charts</a></li>
<li><a href="line.html">Line charts</a></li>
<li><a href="pie.html">Pie charts</a></li>
<li><a href="donut.html">Donut charts</a></li>
</ul>
<h4>Planning and management chart examples</h4>
<ul>
<li><a href="gantt.html">Gantt charts</a></li>
<li><a href="funnel.html">Funnel charts</a></li>
<li><a href="waterfall.html">Waterfall charts</a></li>
</ul>
</div>
<div style="float: left; width: 275px">
<h4>Meters and gauges examples</h4>
<ul>
<li><a href="fuel.html">Fuel gauges</a></li>
<li><a href="gauge.html">Gauge charts</a></li>
<li><a href="hprogress.html">Horizontal progress bar</a></li>
<li><a href="meter.html">Meter charts</a></li>
<li><a href="odo.html">Odometer charts</a></li>
<li><a href="thermometer.html">Thermometer charts</a></li>
<li><a href="vprogress.html">Vertical progress bar</a></li>
</ul>
<h4>Other chart type examples</h4>
<ul>
<li><a href="led.html">LED grid</a></li>
<li><a href="radar.html">Radar charts</a></li>
<li><a href="rscatter.html">Radial scatter charts</a></li>
<li><a href="rose.html">Rose charts</a></li>
<li><a href="scatter.html">Scatter charts</a></li>
</ul>
</div>
</div>
<br clear="all" />
<h4>Basic examples</h4>
<ul>
<li><a href="../docs/basic.html">A basic example (for implementation help)</a></li>
<li><a href="../docs/basic_tooltips.html">A basic example of charts in tooltips</a></li>
<li><a href="../docs/basic_combined.html">A basic example of a combined Bar &amp; Line chart</a></li>
</ul>
<h4>More examples</h4>
<p>
There are more usage examples as well as a few general HTML5 examples in the <a href="../docs/index.html">documentation</a>.
</p>
</body>
</html>

8607
OfficeWeb/sdk/Common/Charts/examples/js/jquery-ui-1.8.13.custom.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1408
OfficeWeb/sdk/Common/Charts/examples/js/userScript.js Normal file
View File

File diff suppressed because one or more lines are too long

120
OfficeWeb/sdk/Common/Charts/examples/line.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Line chart</title>
<meta name="keywords" content="html5 canvas example line charts" />
<meta name="description" content="An example of the type of Line chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.annotate.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.chartProperties.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script src="libraries/jquery.min.js" ></script>
<script>
window.onload = function ()
{
var line1 = new OfficeExcel.Line('line1', [1,4,2,8,1], [4,5,6]);
line1._otherProps._background_image = 'file:///X:/AVS/Sources/AVSOfficeStudio/OfficeWebExcelChart/images/bg.png';
line1._otherProps._linewidth = 4;
if (!document.all || OfficeExcel.isIE9up()) {
line1._otherProps._shadow = true;
}
line1._otherProps._background_grid_hlines = false;
line1._otherProps._background_grid_vlines = false;
line1._otherProps._background_grid_border = false;
line1._otherProps._ylabels_inside = true;
line1._otherProps._xlabels_inside = true;
line1._otherProps._ylabels_inside_color = '#4BB2C5';
line1._otherProps._xlabels_inside_color = '#4BB2C5';
line1._otherProps._labels = ['1','4','2','8','1'];
line1._otherProps._colors = ['#4BB2C5', '#20EC51'];
line1._otherProps._curvy = 1;
line1._chartTitle._text = 'A curvy Line chart';
line1._chartTitle._background = '#4BB2C5';
line1._xAxisTitle._text = 'testxAxis';
line1._yAxisTitle._text = 'testyAxis';
line1._otherProps._tickmarks = 'filledcircle';
line1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Line charts example
</div>
<h1>Line <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<div>
<p>
Like Bar charts, Line charts are one of the most versatile chart types. It is similar, but can indicate
chronological data better. Line charts are good if, for example, you want to illustrate sales figures
over a year (or any period of time). You'll then be able to easily see whether sales are going up, down
or are stagnant. It will also become apparent which months are busier than others. By using multiple
line charts you can show multiple sets of data (eg two or more years of figures) to your charts. You can
customise line charts by stipulating them as being filled, having drop shadows, keys, having the X
axis in the centre, different colors, different tickmark styles and tooltips etc.
</p>
<ul>
<li><a href="../docs/line.html">Line charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="line1" width="600" height="250">[Please wait...]</canvas>
</div>
</div>
</body>
</html>

92
OfficeWeb/sdk/Common/Charts/examples/pie.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Pie chart</title>
<meta name="keywords" content="html5 canvas example pie charts" />
<meta name="description" content="An example of the type of Pie chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.chartProperties.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var pie2 = new OfficeExcel.Pie('pie2', [12,29,45,17,7]); // Create the pie object
/*pie2.Set('chart.gutter.left', 45);
pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']);
pie2.Set('chart.key', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)']);
pie2.Set('chart.key.background', 'white');
pie2.Set('chart.strokestyle', 'white');
pie2.Set('chart.linewidth', 3);
pie2.Set('chart.exploded', [10,10,10,20,20]);
pie2.Set('chart.shadow', true);
pie2.Set('chart.shadow.offsetx', 0);
pie2.Set('chart.shadow.offsety', 0);
pie2.Set('chart.shadow.blur', 25);*/
pie2.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Pie charts example
</div>
<h1>Pie <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<p>
Pie charts can be used when you need to represent a value as part of a whole. It is commonly used to represent
percentages, relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice)
against the whole of the Pie chart, then it can be quite effective. If however you want to compare two seperate
segments, then it can get more difficult. If this is the case, you may want to consider bar charts or perhaps line charts.
</p>
<p>
The colours can be customised, as can the borders (using the same color as the background. The charts can also have
a drop shadow if you want one.
</p>
<ul>
<li><a href="../docs/pie.html">Pie charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="pie2" width="550" height="300">[No canvas support]</canvas>
</div>
</body>
</html>

113
OfficeWeb/sdk/Common/Charts/examples/radar.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Radar chart</title>
<meta name="keywords" content="html5 canvas example radar charts" />
<meta name="description" content="An example of the type of Radar chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.annotate.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
<script src="../libraries/OfficeExcel.radar.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var radar = new OfficeExcel.Radar('radar1', [7,6,6,7,8,6,7,7,6,6], [4,5,6,10,4,3,5,4,6,5], [4,3,5,7,6,5,3,2,4,5]);
radar.Set('chart.strokestyle', 'black');
radar.Set('chart.colors.alpha', 0.3);
radar.Set('chart.colors', ['red', 'green', 'yellow']);
radar.Set('chart.tooltips.effect', 'snap');
if (!OfficeExcel.isOld()) {
radar.Set('chart.tooltips', [
'Pete','Lou','Jim','Jack','Fred','Jo','Lou','Freda','Pete','Rick',
'Pete','Lou','Jim','Jack','Fred','Jo','Lou','Freda','Pete','Rick',
'Pete','Lou','Jim','Jack','Fred','Jo','Lou','Freda','Pete','Rick'
]);
}
radar.Set('chart.key', ['2000','2001','2002']);
radar.Set('chart.key.position', 'graph');
radar.Set('chart.labels', ['Pete','Lou','Jim','Jack','Fred','Jo','Lou','Freda','Pete','Rick']);
radar.Set('chart.gutter.top', 35);
radar.Set('chart.accumulative', true);
radar.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Radar charts example
</div>
<h1>Radar <span>charts</span></h1>
<div style="background-color: #ffb; border: 2px dashed #000; padding: 3px">
This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in OfficeExcel),
however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it
you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too
(to <i>radar</i>).
</div>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="float: right; width: 450px">
</div>
<p>
Radar charts, that are similar to Rose charts. Each of the data points is
arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus,
data points of a higher magnitude can be seen as they are more distant from the centre.
</p>
<p>
Suitable for many datasets, but not all. If not, then Rose charts may be more apt.
</p>
<p>
The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example,
it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen.
</p>
<div>
<ul>
<li><a href="../docs/radar.html">Radar charts API documentation</a></li>
<li><a href="rose.html">Rose charts examples</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="radar1" width="450" height="300">[No canvas support]</canvas>
</div>
</body>
</html>

89
OfficeWeb/sdk/Common/Charts/examples/rose.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Rose chart</title>
<meta name="keywords" content="html5 canvas example rose charts" />
<meta name="description" content="An example of the type of Rose chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.rose.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var rose1 = new OfficeExcel.Rose('rose3', [[4,5,2],[3,5,4],[2,9,4],[1,8,5],[3,6,7],[4,8,5],[6,5,8],[6,9,8]]);
if (!OfficeExcel.isOld()) {
rose1.Set('chart.tooltips',
function (index)
{
if (index % 3 == 0) {
return 'Julie';
} else if (index % 3 == 1) {
return 'Frederick';
} else if (index % 3 == 2) {
return 'Jobe';
}
}
)
}
rose1.Set('chart.colors.alpha', 0.5);
rose1.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','']);
rose1.Set('chart.labels.position', 'edge');
rose1.Set('chart.margin', 5);
rose1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Rose charts example
</div>
<h1>Rose <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<p>
The Rose chart was formally called the Pseudo-Radar chart.
</p>
<ul>
<li><a href="../docs/rose.html">Rose charts API documentation</a></li>
</ul>
<div style="text-align: center">
<div style="display: inline-block; text-align: center; font-family: Verdana">
<b>A stacked Rose chart</b><br />
<canvas id="rose3" width="450" height="350">[No canvas support]</canvas>
</div>
</div>
</body>
</html>

91
OfficeWeb/sdk/Common/Charts/examples/rscatter.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Radial Scatter chart</title>
<meta name="keywords" content="html5 canvas example radial scatter chart" />
<meta name="description" content="An example of the type of Radial Scatter chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.rscatter.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
function myFunc ()
{
return 'In function';
}
// Create the data
var data = [];
for (var i=0; i<75; i++) {
data.push([OfficeExcel.random(0, 360), i * OfficeExcel.random(0, 10), null, 'id:mydiv']);
}
var rscatter1 = new OfficeExcel.Rscatter('cvs', data);
rscatter1.Set('chart.labels.axes', 'n');
rscatter1.Set('chart.labels.position', 'edge');
rscatter1.Set('chart.labels', ['NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', '']);
rscatter1.Set('chart.tickmarks', 'plus');
rscatter1.Set('chart.tooltips.effect', 'contract');
rscatter1.Set('chart.title', 'Direction and magnitude');
rscatter1.Set('chart.title.color', 'black');
rscatter1.Set('chart.title.vpos', 0.3);
rscatter1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Radial scatter charts example
</div>
<h1>Radial <span>scatter charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<p>
Radial scatter charts are a circular variant of regular Scatter charts, and as the name suggests, circular. They
may be more suited to your dataset than regular scatter charts.
</p>
<div>
<ul>
<li><a href="../docs/rscatter.html">Radial scatter charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="cvs" width="350" height="350">[No canvas support]</canvas>
</div>
<div id="mydiv" style="display: none">Fred</div>
</body>
</html>

184
OfficeWeb/sdk/Common/Charts/examples/scatter.html Normal file
View File

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Scatter chart</title>
<meta name="keywords" content="html5 canvas example scatter chart" />
<meta name="description" content="An example of the type of Scatter chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.chartProperties.js" ></script>
<script src="../libraries/OfficeExcel.scatter.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
var original_data = [
[0.5,[0,3,4,5,7, 'red', 'red'], 'black'],
[1.5,[2,3,5,6,9, 'red', 'red'], 'black'],
[2.5,[0,2,5.6,6.2,9, 'red', 'red'], 'black'],
[3.5,[2,4.8,6.1,6.5,9, 'red', 'red'], 'black'],
[4.5,[1.1,5.2,5.9,6.5,7.6, 'red', 'red'], 'black'],
[5.5,[0.8,3.9,7,7.5,7.99, 'red', 'red'], 'black'],
[6.5,[2,2.9,4,4.5,5.3, 'red', 'red'], 'black'],
[7.5,[2.5,3.0,4,4.9,5.5, 'red', 'red'], 'black'],
[8.5,[3,3.3,5,6.5,6.9, 'red', 'red'], 'black'],
[9.5,[1.1,3.3,6,6.5,6.9, 'red', 'red'], 'black'],
[10.5,[0.7,3.1,5,5.9,6.9, 'red', 'red'], 'black'],
[11.5,[0.3,2.5,3,4.5,4.9, 'red', 'red'], 'black'],
[12.5,[0.9,2.7,4.9,5.5,6.3, 'red', 'red'], 'black'],
[13.5,[0.7,3.0,3.8,4.2,4.9, 'red', 'red'], 'black'],
[14.5,[0.8,2.1,5.2,6.1,7.2, 'red', 'red'], 'black'],
[15.5,[0.9,2.2,3.8,5.5,6.2, 'red', 'red'], 'black'],
[16.5,[1.2,2.3,3.9,5.2,6, 'red', 'red'], 'black'],
[17.5,[0.8,2.2,4.1,5.2,5.9, 'red', 'red'], 'black'],
[18.5,[0.9,3.1,4.2,5.5,6.1, 'red', 'red'], 'black'],
[19.5,[0.9,2.9,4.9,5.5,6.2, 'red', 'red'], 'black'],
[20.5,[0.9,2.9,4.9,5.22,6.3, 'red', 'red'], 'black'],
[21.5,[1.7,2.9,5,5.4,6.3, 'red', 'red'], 'black'],
[22.5,[1.7,3.1,5.1,6.1,6.8, 'red', 'red'], 'black'],
[23.5,[1.9,2.5,4.3,5.5,6.6, 'red', 'red'], 'black'],
[24.5,[0.7,1.6,2.1,3.4,4.2, 'red', 'red'], 'black'],
[25.5,[0.8,1.5,2,3.6,4.2, 'red', 'red'], 'black'],
[26.5,[0.9,2,3,4.2,5.1, 'red', 'red'], 'black'],
[27.5,[0.6,2,2.7,3.6,5.5, 'red', 'red'], 'black'],
[28.5,[0.9,2,3,4.5,9, 'red', 'red'], 'black'],
[29.5,[1.1,3,4.5,5.1,10, 'red', 'red'], 'black'],
[30.5,[1.8,3,4.4,5.5,9, 'red', 'red'], 'black']
];
window.onload = function ()
{
var data = [
[10,15,'red'],[13,16,'red'],[12,11,'red'],[15,16,'red'],[20,19,'red'],[19,16,'red'],[13,15,'red'],[11,12,'red'],[13,16,'red'],[5,19,'red'],[16,15,'red'],[13,15,'red'],[14,14,'red'],[12,12,'red'],
[5,4,'green'],[6,14,'green'],[19,12,'green'],[3,5,'green'],[1,16,'green'],[13,5,'green'],[15,15,'green'],[13,5,'green'],[4,9,'green'],[16,6,'green'],[13,18,'green'],[18,12,'green'],[19,18,'green'],[13,16,'green'],[15,14,'green'],
[12,4,'blue'],[4,23,'blue'],[13,8,'blue'],[12,12,'blue'],[18,4,'blue'],[4,18,'blue'],[11,2,'blue'],[4,3,'blue'],[5,8,'blue'],[1,9,'blue'],[4,6,'blue'],[16,8,'blue'],[17,8,'blue'],[19,9,'blue'],[13,5,'blue'],[16,21,'blue'],
[12,4],[13,12],[11,16],[4,19],[4,3],[5,6],[1,9],[4,12],[6,12],[8,8],[16,6],[13,5],[15,13],[23,23,'red'], [1,1, 'gray'],
[1,4,'gray'], [2,3,'gray'], [1,6,'gray'], [2,3,'gray'], [2,5,'gray'], [3,7,'gray'], [1,4,'gray'], [2,7,'gray']
];
ShowBoxplot();
}
/**
* This facilitates the selector changing
*/
function SelectorChange()
{
var selector = document.getElementById("chartSelector");
var canvas = document.getElementById("scatter2");
OfficeExcel.Clear(canvas);
if (selector.options[selector.selectedIndex].value == 'high/low') {
ShowBoxplot();
} else {
ShowAverage();
}
}
/**
* This shows the box plot of stock prices
*/
function ShowBoxplot ()
{
var scatter = new OfficeExcel.Scatter('scatter2', OfficeExcel.array_clone(original_data));
scatter._chartTitle._text = 'High/low daily stock prices';
scatter._otherProps._boxplot_width = 0.5;
scatter._otherProps._boxplot.capped = false;
scatter._otherProps._labels = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
scatter._otherProps._xmax = 31;
scatter._otherProps._ymax = 10;
scatter._otherProps._scale_decimals = 1;
scatter._otherProps._units_post = 'p';
scatter._chartGutter._left = 40;
scatter.Draw();
}
/**
* This shows the average line of stock prices
*/
function ShowAverage ()
{
var data = OfficeExcel.array_clone(original_data);
for (var i=0; i<data.length; ++i) {
data[i][1] = data[i][1][3];
}
var scatter = new OfficeExcel.Scatter('scatter2', data);
scatter.Set('chart.title', 'Average daily stock prices');
scatter.Set('chart.labels', ['Week 1', 'Week 2', 'Week 3', 'Week 4']);
scatter.Set('chart.xmax', 31);
scatter.Set('chart.ymax', 10);
scatter.Set('chart.scale.decimals', 1);
scatter.Set('chart.units.post', 'p');
scatter.Set('chart.gutter.left', 40);
scatter.Set('chart.line', true);
scatter.Set('chart.line.colors', ['red']);
scatter.Set('chart.tickmarks', null);
scatter.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Scatter charts example
</div>
<h1>Scatter <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<p>
Scatter charts use two variables to plot points and makes it clear where there are congregations. The data points
make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to to have
lots of points, but only a few labels. The Scatter is a good chart to use if you want to show stock prices and
it also supports high/low charts - as shown below.
</p>
<div>
<ul>
<li><a href="../docs/scatter.html">Scatter charts API documentation</a></li>
</ul>
</div>
<div style="text-align: center">
<canvas id="scatter2" width="850" height="200">[No canvas support]</canvas><br />
Chart type:
<select id="chartSelector" onchange="SelectorChange()">
<option value="high/low">High/low</option>
<option value="average">Average</option>
</select>
</div>
</body>
</html>

0
OfficeWeb/sdk/Common/Charts/examples/showcase.html Normal file
View File

91
OfficeWeb/sdk/Common/Charts/examples/text.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Animated rotating text with the OfficeExcel software</title>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script>
__pause = false; // Provide a way to pause the rotation
__OfficeExcel_rotate = 0; // A record of the angle (IN DEGREES) we're at currently
__OfficeExcel_rotate2 = 0; // Ditto, but this is controlled by the buttons
window.onload = function ()
{
if (!__pause) {
var canvas = document.getElementById("myc");
var context = canvas.getContext('2d');
OfficeExcel.Clear(canvas); // Clears the canvas
context.beginPath();
context.fillStyle = 'black';
OfficeExcel.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __OfficeExcel_rotate + ')','center','center',false, ++__OfficeExcel_rotate);
OfficeExcel.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__OfficeExcel_rotate * 5) + ')', 'center', 'left', false, __OfficeExcel_rotate * 2);
OfficeExcel.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __OfficeExcel_rotate2 + ')', 'center', 'center', false, __OfficeExcel_rotate2);
context.stroke();
context.fill();
}
setTimeout(window.onload, 1);
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: Javascript charts &amp; HTML5 canvas charts library</a>
>
<a href="./index.html">Examples</a>
>
Rotating text
</div>
<h1>A text <span>function that does horizontal and vertical alignment (and spins)</span></h1>
<table border="0" style="float: left; margin-right: 10px">
<tr>
<td colspan="2"><canvas id="myc" width="300" height="300" style="border: 1px dashed gray">The fallback HTML</canvas></td>
</tr>
<tr>
<td align="center">
<button style="width: 100px; margin: 5px" onmousedown="__OfficeExcel_rotate2 -= 5">&laquo; Rotate left</button>&nbsp;
<button style="margin: 5px" onmousedown="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button>&nbsp;
<button style="width: 100px; margin: 5px" onmousedown="__OfficeExcel_rotate2 += 5">Rotate right&raquo;</button>
</td>
</tr>
</table>
<p>
OfficeExcel.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the
text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire
canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be
running on computers that have more processing power than
some small countries... <a href="javascript: location.href = location.href">Reset the page</a>
</p>
<p>
In a similar vein you could easily make some text that bounces from one side of the screen to the other,
hurrah - the return of &lt;marquee&gt;!
</p>
<div>
More examples can be found on the individual <a href="/examples/">example pages</a>, and a more complete
reference to the Text() function can be found in the <a href="../docs/api.html#functions.other">API docs</a>.
</div>
</body>
</html>

103
OfficeWeb/sdk/Common/Charts/examples/waterfall.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>An example of the Waterfall chart</title>
<meta name="keywords" content="html5 canvas example waterfall charts" />
<meta name="description" content="An example of the type of Waterfall chart that OfficeExcel can produce" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js"></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.waterfall.js"></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var waterfall1 = new OfficeExcel.Waterfall('waterfall1', [50,12,-50,-19, -130, 230])
waterfall1.Set('chart.background.grid.autofit', true);
waterfall1.Set('chart.background.grid.autofit.numhlines', 10);
waterfall1.Set('chart.background.grid.autofit.numvlines', 25);
waterfall1.Set('chart.title', 'A chart showing income/expenditure');
waterfall1.Set('chart.colors', ['black','red','blue']);
waterfall1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
waterfall1.Set('chart.units.pre', '$');
waterfall1.Set('chart.units.post', 'k');
waterfall1.Set('chart.total', true);
waterfall1.Set('chart.labels', ['Sales',
'Misc income',
'Salaries',
'Running costs',
'Snacks',
'Bake sales',
'Gross']);
waterfall1.Set('chart.tooltips', ['Traditional sales from the shops',
'Miscellaneous income from neer-do-wells',
'Salaries of the henchmen',
'Running costs including fuel for the cars',
'Sweets and snacks for the office',
'Bake sales',
'Gross before "tax"']);
waterfall1.Set('chart.highlight.stroke', 'rgba(0,0,0,0)');
waterfall1.Set('chart.shadow', navigator.userAgent.indexOf('Firefox') == -1); // In Firefox this seriously slows down the Grow animation
waterfall1.Set('chart.shadow.color', '#aaa');
waterfall1.Set('chart.shadow.blur', 5);
waterfall1.Set('chart.shadow.offsetx', 0);
waterfall1.Set('chart.shadow.offsety', 0);
waterfall1.Set('chart.gutter.left', 50);
waterfall1.Set('chart.xaxispos', 'center');
waterfall1.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Examples</a>
>
Waterfall charts example
</div>
<h1>Waterfall <span>charts</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div>
<p>
Waterfall charts can be used to represent sales and expenditure for an entity. More information can be found here:
<a href="http://en.wikipedia.org/wiki/Waterfall_chart" target="_blank">http://en.wikipedia.org/wiki/Waterfall_chart</a>
</p>
<ul>
<li><a href="../docs/waterfall.html">Waterfall charts API documentation</a></li>
</ul>
</div>
<div>
<canvas width="900" height="300" id="waterfall1">[No canvas support]</canvas>
</div>
</body>
</html>