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

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>