Commit cba489e3 authored by nikolay ivanov's avatar nikolay ivanov

fixed directory traversal vulnerability

removed unused components
parent 0b2e9eb5
......@@ -58,9 +58,29 @@ public class ResourceService : IHttpAsyncHandler
Storage oStorage = new Storage();
TaskResult oTaskResult = new TaskResult();
string sPath = context.Request.Params["path"];
string sPathOriginal = context.Request.Params["path"];
string sPath = null;
if (null != sPathOriginal)
{
sPath = sPathOriginal.Replace("../", "").Replace("..\\", "");
if (sPathOriginal != sPath)
{
_log.Error("Possible XSS attack:" + sPathOriginal);
}
}
string sOutputFilename = context.Request.Params["filename"];
string sDeletePath = context.Request.Params["deletepath"];
string sDeletePathOriginal = context.Request.Params["deletepath"];
string sDeletePath = null;
if (null != sDeletePathOriginal)
{
sDeletePath = sDeletePathOriginal.Replace("../", "").Replace("..\\", "");
if (sDeletePathOriginal != sDeletePath)
{
_log.Error("Possible XSS attack:" + sDeletePathOriginal);
}
}
if (string.IsNullOrEmpty(sOutputFilename))
{
if (null != sPath)
......
/**
* Modal Dialog
*/
.modalBg {
position: absolute;
top: 0px;
left: 0px;
filter: Alpha(Opacity=50);
-moz-opacity: 0.5;
background-color: #ddd;
visibility: hidden;
width: expression(document.body.clientWidth);
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight);
z-index: 100;
}
.modalDialog {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
z-index: 101;
background-color: white;
top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);
left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);
border: 1px solid #777;
border-top: 0;
padding: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.modalDialog .modalDialogHeader {
margin:0;
padding: 0px;
color: #333;
font-weight: bold;
background-color: #ccc;
border: 1px solid #989898;
position: absolute;
top: 0px;
left: -1px;
height: 7px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
.modalShadow {
position: absolute;
background-color: black;
top: 0px;
left: 0px;
z-index: 99;
top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);
left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity: 0.5;
}
/**
* This is not part of the core Modal Dialog styles, instead it's just so that the dialog looks
* respectable.
*/
h4 {
font-family: Verdana, Arial;
padding-top: 10px;
}
\ No newline at end of file
@font-face {
font-family: Delicious;
src: url('/Delicious-Roman.otf')
}
/**
* Various
*/
body {
margin: 0px;
}
a {
text-decoration: none;
}
code {
background-color: #dedede;
border: 1px dashed #aaaaaa;
padding: 3px;
display: block;
font-family: Monospace;
}
/**
* Datagrid stuff
*/
table.datagrid {
border-collapse: collapse;
margin-left: 30px;
}
table.datagrid th {
background-color: #ccc;
border: 1px solid #aaa;
padding: 2px;
}
table.datagrid tr {
background-color: #ddd;
}
table.datagrid tr.oddrow {
background-color: #eee;
}
table.datagrid td {
border: 1px solid #aaa;
padding: 3px;
}
/**
* Master div
*/
.master {
font-family: Georgia;
}
/**
* Header section
*/
.header {
margin-right: 10px;
letter-spacing: 2px;
background-image: url(/images/hdrbg.jpg);
margin-left: 10px;
}
.header h1 {
margin-top: 0px;
}
.tagline {
font-size: 8pt;
position: relative;
top: -15px;
left: 15px;
letter-spacing: 0px;
}
/**
* Top nav
*/
.topnav {
color: white;
background-color: #314657; /* Old */
background-color: #2D4B33;
padding: 1px;
padding-left: 10px;
}
.topnav a {
color: white;
}
/**
* Left nav
*/
.leftnav,
.searchbox {
width: 180px;
color: black;
background-color: #FF5A18;
margin-left: 5px;
margin-top: 10px;
padding: 10px;
padding-top: 0;
padding-bottom: 0;
padding: expression('10px');
border: 1px solid #B33E11;
}
.leftnav {
box-shadow: 0 0 15px #aaa;
-moz-box-shadow: 0 0 15px #aaa;
-webkit-box-shadow: 0 0 15px #aaa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 180px;
float: left;
hmargin: 5px;
}
.leftnav h4 {
border-bottom: 1px solid black;
}
.leftnav a {
color: black;
}
.leftnav ul {
margin-left: -20px;
margin-left: expression('20px');
list-style-type: square;
}
/**
* Main body section
*/
.mainbody {
margin-left: 220px;
}
.borderedTable table {
border-collapse: collapse;
}
.borderedTable th {
background-color: #dddddd;
border: 1px solid #aaaaaa;
font-size: 70%;
padding-left: 3px;
padding-right: 3px;
}
.borderedTable td {
vertical-align: top;
font-size: 70%;
border: 1px solid #dddddd;
}
.newsitem {
margin-bottom: 25px;
}
.newsitem h2,
.newsitem h1 {
display: inline;
}
.newsitem .date {
font-size: 70%;
}
p.firstLetter:first-letter {
font-size: 200%;
font-style: italic;
font-weight: bold;
float: left;
padding-right: 3px;
}
.newsitem p.update {
background-color: #efefef;
border: 1px dashed black;
padding: 5px;
}
/**
* Comments
*/
.comment {
padding: 5px;
margin-bottom: 20px;
font-size: 80%;
background-color: #efefef;
border: 1px dashed #cccccc;
}
.comment .body {
margin-top: 5px;
padding-left: 7px;
}
.comment .quoteLink {
text-align: right;
font-size: 90%;
}
/**
* Errors
*/
.error {
color: red;
font-style: italic;
}
/**
* Copyright text
*/
.copyright {
text-align: right;
font-size: 75%;
}
/**
* Admin page
*/
.adminPage table {
font-family: Verdana;
font-size: 10pt;
}
.adminPage th {
background-color: #dddddd;
}
/**
* Tools page
*/
#toolsPage th,
#toolsPage td {
}
#toolsPage th {
font-weight: bold;
text-align: right;
white-space: nowrap;
vertical-align: top;
background-color: #ffffcc;
}
#toolsPage textarea {
height: 200px;
width: 800px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ffffff, endColorstr=#ffffcc);
}
#shortcuts th {
}
#shortcuts th {
text-align: left;
background-color: #ededed;
padding: 2px;
}
/**
* Download header/footer
*/
div#download pre,
div#download pre a {
}
/**
* Code
*/
div.boxout,
pre.code {
border: 2px dashed gray;
padding: 3px;
background-color: #eee;
}
\ No newline at end of file
<?php
header('Location: /');
\ No newline at end of file
body {
padding-top: 10px;
font-family: Arial, Sans-Serif;
}
h1,
h2 {
}
h1 span,
h2 span,
h4 span {
color: #65AEFF;
font-style: italic;
}
a#read-more {
}
pre#code,
code {
display: block;
border: 1px solid #aaa;
padding: 5px;
background-color: #ddd;
}
#breadcrumb,
#logo {
border: 2px black solid;
background-color: #eee;
padding: 3px;
top: 0;
right: 0;
position: absolute;
margin: 2px;
opacity: 0.8;
border-radius: 5px;
}
#breadcrumb a,
#logo a {
text-decoration: none;
}
th {
text-align: left;
border: 1px solid gray;
background-color: #ddd;
padding: 3px;
vertical-align: top;
}
td {
vertical-align: top;
}
ol li {
margin-top: 20px;
}
ol#implementation li code {
margin-top: 5px;
}
td.description {
background-color: #eee;
padding: 3px;
border: 1px solid #ddd;
}
td.chart {
text-align: center;
}
.example_boxout {
background-color: #eee;
padding: 3px;
border: 1px solid #aaa;
}
.code {
padding: 5px;
background-color: #eee;
border: 2px dashed gray
}
/**
* This is semi-transparent box in the top left corner
*/
div#devtag {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: #999 3px 3px 3px;
-moz-box-shadow: #999 3px 3px 3px;
box-shadow: #999 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135);
position: fixed;
top: 2px;
right: 2px;
width: 145px;
border: 2px solid black;
text-align: center;
font-weight: bold;
font-family: Arial;
background-color: #fdd;
z-index: 1001;
opacity: 0.8;
}
div#devtag a {
font-size: 10px;
text-decoration: none;
color: blue;
opacity: 1;
}
/**
* This overrides something defined earlier
*/
ol#colors li {
margin: 0;
}
/**
* styles lists
*/
div.list-item {
width: 220px;
display: inline-block;
}
div.list-item.label {
width: 170px;
}
legend {
background-color: #efefef;
border: 1px solid #75736e;
}
body#licensing span {
font-size: 120%;
}
/**
* The yellow warning box on the front page
*/
div.warning {
border: 1px solid black;
text-align: center;
background-color: #ffa;
padding: 5px;
margin-top: 5px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-box-shadow: #aaa 1px 1px 15px;
-moz-box-shadow: #aaa 1px 1px 15px;
box-shadow: #aaa 1px 1px 15px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135);
z-index: 98;
opacity: 0.9;
}
div.canvasfallback {
border: 2px dashed red;
background-color: #fee;
width: 475px;
height: 150px;
text-align: center;
padding-top: 50px;
}
/**
* The title "bar"
*/
div#title {
}
div#title div#image {
float: left;
margin-right: 15px;
}
div#title div#text {
padding-top: 5px;
margin-left: 70px;
}
div.warning p {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
font-weight: bold;
}
div.description {
border: 1px dashed gray;
background-color: #eee;
font-size: 75%;
padding: 3px;
}
div#social {
display: inline;
display: inline-block;
}
.upgrade_notice {
display: inline;
display: inline-block;
text-align: center;
background-color: yellow;
border: 1px black solid;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}
#google_plusone {
position: fixed;
top: 10px;
left: 125px;
z-index: 1000;
}
div.testimonial {
font-size: 80%;
background-color: rgba(248,248,248, 0.5);
//background-color: #eee;
padding: 6px;
border: 1px solid #ddd;
border-radius: 15px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(white));
background: -moz-linear-gradient(top, #eee, white);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff');
}
div#social_icons img {
border: none;
}
span.javascript-comment {
color: #090;
}
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting your charts interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts adjusting docs " />
<meta name="description" content="Information about adjusting your charts interactively" />
<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" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
Adjusting charts interactively
</div>
<h1>Adjusting <span>your charts interactively</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="float: left"></div>
<p>
Since 24th May 2010 you have had the ability to adjust your so if you want to see the charts interactively. Currently the Bar chart, Line chart,
Progress Bar and the Radar have this facility. Some chart types use multiple event handlers and as such
are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work
with the context menu (and so the full canvas zoom), it is unlikely to work with other dynamic features.
</p>
<p>
At the current time this feature on the Bar and Line charts doesn't work with X axis in the center.
</p>
<p>
If your intention is to make some sort of interactive console, new HTML5 input types may also be of interest (for example the new <i>range</i> input type
which gives you a "slider bar"). Eg (Chrome/Safari/Opera):
</p>
<p style="text-align: center">
<input type="range" min="0" max="100" value="76" onchange="document.getElementById('range_result').value = this.value"/>
<input type="text" id="range_result" size="3" value="76" />
</p>
<h4>Note</h4>
<p>
Since interactivly adjusting a chart involves completely redrawing it, having a lot of them on one page can cause
slower updates. For this reason each example chart is on its own page:
</p>
<ul>
<li><a href="adjusting_bar.html">Bar chart</a></li>
<li><a href="adjusting_gantt.html">Gantt chart</a></li>
<li><a href="adjusting_hprogress.html">HProgress bar</a></li>
<li><a href="adjusting_line.html">Line chart</a></li>
<li><a href="adjusting_radar.html">Radar chart</a></li>
<li><a href="adjusting_thermometer.html">Thermometer chart</a></li>
<li><a href="adjusting_vprogress.html">VProgress bar</a></li>
</ul>
<h4>DOM2 event handlers</h4>
<p>
In January 2011 all adjusting was converted to DOM2 event handling. This makes adjusting work much better with other
dynamic features.
</p>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the Bar chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts adjusting docs " />
<meta name="description" content="Information about adjusting the Bar chart interactively" />
<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" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var bar = new OfficeExcel.Bar('myCanvas', [512,653,512,533,674,453,458,741,496]);
bar.Set('chart.colors', ['blue', 'pink']);
bar.Set('chart.labels.above', true);
bar.Set('chart.shadow', true);
bar.Set('chart.shadow.color', '#aaa');
bar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
if (!OfficeExcel.isOld()) {
bar.Set('chart.adjustable', true);
}
bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']);
bar.Set('chart.gutter.left', 45);
bar.Set('chart.title', 'An adjustable bar chart');
bar.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
Bar chart
</div>
<h1>Adjusting <span>your charts interactively - Bar chart</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 Bar chart can be adjusted by clicking on the chart, in line with the bar that you want to adjust.When adjusting is finished
the <i>onadjustend</i> event fires. As you will see in the example you can find the index of the relevant bar in the OfficeExcel registry -
<i>OfficeExcel.Registry.Get('chart.adjusting.bar.myCanvas')</i> (replace <i>myCanvas</i> with the ID of your canvas).
</p>
<canvas id="myCanvas" width="1000" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var bar = new OfficeExcel.Bar('myCanvas', [512,653,512,533,674,453,458,741,496]);
bar.Set('chart.colors', ['blue', 'pink']);
bar.Set('chart.labels.above', true);
bar.Set('chart.shadow', true);
bar.Set('chart.shadow.color', '#aaa');
bar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
bar.Set('chart.adjustable', true);
bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']);
bar.Draw();
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the Gantt chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs " />
<meta name="description" content="Information about adjusting the Gantt chart interactively" />
<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" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.gantt.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var gantt_events = [
[31, 28, null, 'Richard'],
[0, 120, null, 'Bob'],
[84, 16, null, 'Fred'],
[35, 45, null, 'Charles'],
[0, 35, null, 'Kev'],
[0, 28, null, 'Wayne'],
[31, 28, null, 'John']
];
var gantt = new OfficeExcel.Gantt('myc');
gantt.Set('chart.xmax', 120);
gantt.Set('chart.events', gantt_events);
gantt.Set('chart.defaultcolor', 'rgba(255,0,0,0.5)');
gantt.Set('chart.labels', ['January', 'February', 'March', 'April']);
gantt.Set('chart.title', 'An adjustable Gantt chart');
if (!OfficeExcel.isOld()) {
gantt.Set('chart.adjustable', true);
}
gantt.Set('chart.vbars', [
[0, 31, 'rgba(230,230,230,0.8)'],
[59, 31, 'rgba(230,230,230,0.8)']
]);
gantt.Draw();
/**
* This is how to get notified once adjusting has ended
*/
OfficeExcel.AddCustomEventListener(gantt, 'onadjustend',function (obj)
{
var events = obj.Get('chart.events');
var conf = OfficeExcel.Registry.Get('chart.adjusting.gantt');
var idx = conf['index'];
document.getElementById("eventID").value = idx;
document.getElementById("eventStart").value = events[idx][0];
document.getElementById("eventDuration").value = events[idx][1];
});
/**
* This is how to get notified during the adjusting
*/
OfficeExcel.AddCustomEventListener(gantt, 'onadjust',function (obj)
{
var events = obj.Get('chart.events');
var conf = OfficeExcel.Registry.Get('chart.adjusting.gantt');
var idx = conf[0];
document.getElementById("eventID").value = conf['index'];
document.getElementById("eventStart").value = events[conf['index']][0];
document.getElementById("eventDuration").value = events[conf['index']][1];
});
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
Gantt chart
</div>
<h1>Adjusting <span>your charts interactively - Gantt chart</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 Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the
right edge of the event. To get the details of the bar being dragged you can use the
<i>onadjustend</i> event, and in that you can look at the OfficeExcel registry - <i>OfficeExcel.Registry.Get('chart.adjusting.gantt')</i> The
returned array consists of:
<ul>
<li>The numerical index of the event being adjusted (corresponding to the chart.events array that you set).</li>
<li>The chart object</li>
<li>The starting X position of the bar (before the chart was adjusted)</li>
<li>The starting Y position of the bar (before the chart was adjusted)</li>
<li>The original numerical value (in relation to your chart.xmax) that the bar started at</li>
</ul>
</p>
<p>
When adjusting is complete the <i>chart.events</i> array is updated. So you can use the numerical index that you find in
the registry (as above) with the <i>chart.events</i> array to get up-to-date event information.
</p>
<p>
<b>Note:</b>
The Gantt chart uses console.log() to send notifications. Press CTRL+SHIFT+J in Chrome to see the console, or use Firebug in
Firefox. Other browsers will vary.
</p>
<canvas id="myc" width="1000" height="250">[No canvas support]</canvas>
Event ID: <input type="text" id="eventID" readonly />
Event start: <input type="text" id="eventStart" readonly />
Event duration: <input type="text" id="eventDuration" readonly />
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
gantt_events = [
[31, 28, null, 'Richard'],
[0, 120, null, 'Bob'],
[84, 16, null, 'Fred'],
[35, 45, null, 'Charles'],
[0, 35, null, 'Kev'],
];
var gantt = new OfficeExcel.Gantt('myc');
gantt.Set('chart.xmax', 120);
gantt.Set('chart.events', gantt_events);
gantt.Set('chart.defaultcolor', '#0c0');
gantt.Set('chart.labels', ['January', 'February', 'March', 'April']);
gantt.Set('chart.borders', false);
gantt.Set('chart.adjustable', true);
gantt.Draw();
/**
* This is how to get notified once adjusting has ended
*/
OfficeExcel.AddCustomEventListener(gantt, 'onadjustend',function (obj)
{
var idx = OfficeExcel.Registry.Get('chart.adjusting.gantt')[0];
});
/**
* This is how to get notified during the adjusting
*/
OfficeExcel.AddCustomEventListener(gantt, 'onadjust',function (obj)
{
var events = obj.Get('chart.events');
var conf = OfficeExcel.Registry.Get('chart.adjusting.gantt');
var idx = conf[0];
document.getElementById("eventID").value = conf[0];
document.getElementById("eventStart").value = events[conf[0]][0];
document.getElementById("eventDuration").value = events[conf[0]][1];
});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the HProgress Bar interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs" />
<meta name="description" content="Documentation about adjusting your charts - HProgress bar" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.hprogress.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var hprogress = new OfficeExcel.HProgress('myc', 83, 100, 0);
hprogress.Set('chart.color', 'green');
if (!OfficeExcel.isOld()) {
hprogress.Set('chart.adjustable', true);
}
hprogress.Set('chart.margin', 5);
hprogress.Set('chart.tickmarks.inner', true);
hprogress.Set('chart.tickmarks.zerostart', true);
hprogress.Set('chart.units.post', '%');
hprogress.Draw();
OfficeExcel.AddCustomEventListener(hprogress, 'onadjustbegin', function () {console.log('Old value: ' + hprogress.value );});
OfficeExcel.AddCustomEventListener(hprogress, 'onadjustend', function () {console.log('New value: ' + hprogress.value );});
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
HProgress bar
</div>
<h1>Adjusting <span>your charts interactively - HProgress bar</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 Horizontal Progress Bar can be adjusted by clicking on it. When adjusting
is finished the onadjustend event fires. If you attach a function to the onadjustend event (as below) you can get the new value by
looking at the <i>.value</i> property (eg <i>myProgress.value</i>).
</p>
<canvas id="myc" width="1000" height="100">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var hprogress = new OfficeExcel.HProgress('myc', 83, 100, 0);
hprogress.Set('chart.color', 'green');
hprogress.Set('chart.adjustable', true);
hprogress.Set('chart.margin', 5);
hprogress.Set('chart.tickmarks.inner', true);
hprogress.Set('chart.tickmarks.zerostart', true);
hprogress.Set('chart.units.post', '%');
hprogress.Draw();
OfficeExcel.AddCustomEventListener(hprogress, 'onadjustbegin', function () {console.log('Old value: ' + hprogress.value );});
OfficeExcel.AddCustomEventListener(hprogress, 'onadjustend', function () {console.log('New value: ' + hprogress.value );});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the Line chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs " />
<meta name="description" content="Information about adjusting the Line chart interactively" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var line = new OfficeExcel.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]);
line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']);
line.Set('chart.ylabels.inside', true);
line.Set('chart.linewidth', 2);
line.Set('chart.hmargin', 10);
line.Set('chart.shadow', true);
if (!OfficeExcel.isOld()) {
line.Set('chart.adjustable', true);
}
line.Set('chart.title', 'An adjustable line chart');
line.Set('chart.title.vpos', 0.5);
line.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
Line chart
</div>
<h1>Adjusting <span>your charts interactively - Line chart</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 Line chart can be adjusted by dragging the line(s) up and down. By using the OfficeExcel registry -
<i>OfficeExcel.Registry.Get('chart.adjusting.line.myc')</i> - you can get the details of the adjustment
(replace <i>myc</i> with the ID of your canvas). This is an array consisting of:
<ul>
<li>The chart object</li>
<li>The index of the point in the data series</li>
<li>A two element array consisting of the original coordinates of the point that is being adjusted</li>
<li>The index of the data series that contains the point being adjusted</li>
</ul>
</p>
<canvas id="myc" width="1000" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var line = new OfficeExcel.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]);
line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']);
line.Set('chart.ylabels.inside', true);
line.Set('chart.linewidth', 2);
line.Set('chart.hmargin', 10);
line.Set('chart.shadow', true);
line.Set('chart.adjustable', true);
line.Set('chart.title', 'An adjustable line chart');
line.Set('chart.outofbounds', true);
line.Draw();
OfficeExcel.AddCustomEventListener(line, 'onadjustend', function (obj) {p(OfficeExcel.Registry.Get('chart.adjusting.line.myc'));});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the Radar chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs " />
<meta name="description" content="Information about adjusting the Radar chart interactively" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.radar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var radar = new OfficeExcel.Radar('myc', [4,3,8,6,8,7,7,4,5], [7,2,4,5,4,3,3,3,3]);
if (!OfficeExcel.isOld()) {
radar.Set('chart.adjustable', true);
}
radar.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)']);
radar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']);
radar.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
Radar chart
</div>
<h1>Adjusting <span>your charts interactively - Radar chart</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>
<canvas id="myc" width="400" height="400" style="float: left">[No canvas support]</canvas>
<p>
The Radar chart can be adjusted by dragging the points on the chart. When the <i>onadjustend</i> event fires, you will find
the following information in the OfficeExcel registry - <i>OfficeExcel.Registry.Get('chart.adjusting.radar.myc')</i> - where <i>myc</i>
is the ID of your canvas:
</p>
<ul>
<li>The numerical, zero indexed number that corresponds to the dataset</li>
<li>The numerical, zero indexed point that relates to the original data array</li>
<li>This is a boolean and used to indicate which (horizontal) half of the chart the point is in. true - the right half, false - the left half</li>
<li>This is a boolean and used to indicate which (vertical) half of the chart the point is in. true - the bottom half, false - the top half</li>
</ul>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var radar = new OfficeExcel.Radar('myc', [4,3,8,6,8,7,7,4,5], [7,2,4,5,4,3,3,3,3]);
radar.Set('chart.adjustable', true);
radar.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)']);
radar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']);
radar.Draw();
OfficeExcel.AddCustomEventListener(radar, 'onadjustend', function (obj) {p(OfficeExcel.Registry.Get('chart.adjusting.radar.myc'));});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the Thermometer chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs" />
<meta name="description" content="Information about adjusting the Thermometer chart interactively" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.thermometer.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var thermometer = new OfficeExcel.Thermometer('myc', 0, 100, 78);
var grad = thermometer.context.createLinearGradient(0,50,0,350);
grad.addColorStop(0, 'orange');
grad.addColorStop(1, 'white');
thermometer.Set('chart.colors', [grad]);
thermometer.Set('chart.title.side', 'An adjustable thermometer');
thermometer.Set('chart.adjustable', OfficeExcel.isOld() ? false : true);
thermometer.Draw();
OfficeExcel.AddCustomEventListener(thermometer, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(thermometer, 'onadjust', function (obj) {document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(thermometer, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';});
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
Thermometer chart
</div>
<h1>Adjusting <span>your charts interactively - Thermometer chart</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>
<canvas id="myc" width="100" height="400" style="float: left">[No canvas support]</canvas>
<p>
Nothing pertinent is kept in the registry. If you wish to get the new value of the thermometer you can check <i>obj.value</i>.
If you want the value before the adjustment, you can check the value with the onadjustbegin event (instead of the
onadjustend event).
</p>
<p>
<textarea id="output" style="width: 600px; height: 200px;"></textarea>
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var thermometer = new OfficeExcel.Thermometer('myc', 0, 100, 78);
var grad = thermometer.context.createLinearGradient(0,50,0,350);
grad.addColorStop(0, 'orange');
grad.addColorStop(1, 'white');
thermometer.Set('chart.colors', [grad]);
thermometer.Set('chart.title.side', 'An adjustable thermometer');
thermometer.Set('chart.adjustable', true);
thermometer.Draw();
OfficeExcel.AddCustomEventListener(thermometer, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(thermometer, 'onadjust', function (obj) {document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(thermometer, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Adjusting the VProgress Bar chart interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart adjusting docs " />
<meta name="description" content="Information about adjusting the VProgress Bar interactively" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.adjusting.js" ></script>
<script src="../libraries/OfficeExcel.vprogress.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function (e)
{
var vprogress = new OfficeExcel.VProgress('myc', 83, 100, 0);
vprogress.Set('chart.color', 'red');
vprogress.Set('chart.adjustable', OfficeExcel.isOld() ? false : true);
vprogress.Set('chart.margin', 5);
vprogress.Set('chart.tickmarks.inner', true);
vprogress.Set('chart.label.inner', true);
vprogress.Set('chart.units.post', '%');
vprogress.Set('chart.gutter.right', 45);
vprogress.Draw();
OfficeExcel.AddCustomEventListener(vprogress, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(vprogress, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';});
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
<a href="adjusting.html">Adjusting charts interactively</a>
>
VProgress bar
</div>
<h1>Adjusting <span>your charts interactively - VProgress bar</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>
<canvas id="myc" width="150" height="600" style="border: 1px dashed gray; float: left; margin-right: 5px">[No canvas support]</canvas>
<p>
Nothing pertinent is kept in the registry. If you wish to get the new value of the progress you can check
<i>obj.value</i>. If you want the value before the adjustment, you can check the value
with the <i>onadjustbegin</i> event (instead of the <i>onadjustend</i> event).
</p>
<textarea id="output" style="width: 500px; height: 200px" readonly></textarea>
<br clear="all" />
<pre class="code" style="float: left">
&lt;script&gt;
window.onload = function (e)
{
var vprogress = new OfficeExcel.VProgress('myc', 83, 100, 0);
vprogress.Set('chart.color', 'red');
vprogress.Set('chart.adjustable', true);
vprogress.Set('chart.margin', 5);
vprogress.Set('chart.tickmarks.inner', true);
vprogress.Set('chart.label.inner', true);
vprogress.Set('chart.units.post', '%');
vprogress.Set('chart.gutter.right', 45);
vprogress.Draw();
OfficeExcel.AddCustomEventListener(vprogress, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';});
OfficeExcel.AddCustomEventListener(vprogress, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';});
}
&lt;/script&gt;
</pre>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>An example of an animated Pie chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs animated pie chart" />
<meta name="description" content="An example of an animated Pie chart" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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>
<!-- These are the Javascript includes that pull in the OfficeExcel libraries (and ExCanvas) -->
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
An example of an animated &amp; interactive Pie chart
</div>
<h1>An example <span>of an animated and interactive Pie chart</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>
<!-- This is the canvas that the Pie chart is drawn on -->
<canvas id="cvs" width="500" height="300" style="float: right">[No canvas support]</canvas>
<script>
pie = new OfficeExcel.Pie('cvs', [24,43,51,16,26,23,35]);
pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
pie.Set('chart.labels', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
pie.Set('chart.tooltips', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
//pie.Set('chart.tooltips.event', 'onmousemove');
pie.Set('chart.highlight.style', 'explode');
pie.Set('chart.labels.sticks', true);
pie.Set('chart.radius', 100);
pie.Set('chart.shadow', true);
pie.Draw();
</script>
<p>
This example shows animated segment separation. This used to be something that had to be done seperately, however now it's
built into the Pie chart as a tooltip effect. You can utilise the effect by using the <i>chart.highlight.style</i> setting
like this:
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
var pie = new OfficeExcel.Pie('cvs', [24,43,51,16,26,23,35]);
pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
pie.Set('chart.labels', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
pie.Set('chart.tooltips', ['Richard','John','Kev','Lou','Pete','Fred','Bob']);
<span style="color: green">pie.Set('chart.highlight.style', 'explode');</span>
pie.Set('chart.labels.sticks', true);
pie.Set('chart.radius', 100);
pie.Draw();
}
&lt;/script&gt;
</pre>
<p>
<a href="animation-effects.html">&laquo; Back to animation page</a>
</p>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>How you can annotate your charts interactively</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs annotating" />
<meta name="description" content="Information about annotating your charts" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.annotate.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var bar = new OfficeExcel.Bar('myBar', [[45,64],[32,51],[41,52],[54,43],[43,50]]);
bar.Set('chart.title', 'An annotatable chart with context menu');
bar.Set('chart.labels', ['John','Fred', 'Barry', 'Charlie', 'Joan']);
bar.Set('chart.colors', ['red', 'blue']);
bar.Set('chart.background.barcolor1', '#fff');
bar.Set('chart.background.barcolor2', '#fff');
if (!OfficeExcel.isOld()) {
bar.Set('chart.annotatable', true);
bar.Set('chart.contextmenu', [['Show palette', OfficeExcel.Showpalette], ['Clear', function () {OfficeExcel.Clear(bar.canvas); bar.Draw();}]]);
}
bar.Draw();
OfficeExcel.AddCustomEventListener(bar, 'onannotatestart', function (obj) {cl('Started annotating: ' + obj.id);});
OfficeExcel.AddCustomEventListener(bar, 'onannotate', function (obj) {cl('Annotating: ' + obj.id);});
OfficeExcel.AddCustomEventListener(bar, 'onannotateend', function (obj) {cl('Finished annotating: ' + obj.id);});
OfficeExcel.AddCustomEventListener(bar, 'onannotatecolor', function (obj) {cl('Changed annotate color: ' + obj.Get('chart.annotate.color'));});
OfficeExcel.AddCustomEventListener(bar, 'onannotateclear', function (obj) {cl('Fired the annotation clear event');});
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
Annotating your charts
</div>
<h1>Annotating <span>your 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="float: right">
<canvas id="myBar" width="400" height="200">[No canvas support]</canvas><br />
</div>
<p>
The annotations feature brings presentation style functionality to OfficeExcel charts. You can use this feature
for highlighting your charts if you need to.
</p>
<ul>
<li><a href="#how">How do annotations work?</a></li>
<li><a href="#browser">Browser support</a></li>
<li><a href="#what">What can I use annotations for?</a></li>
<li><a href="#persistent">Are annotations persistent?</a></li>
<li><a href="#palette">How do I show the mini-palette?</a></li>
<li><a href="#clear">How can I clear the annotations?</a></li>
<li><a href="#replay">Replaying annotations when they're off</a></li>
<li><a href="#persist">Making your annotations persist</a></li>
</ul>
<a name="how"></a>
<h4>How do annotations work?</h4>
<p>
Enabling annotations is a very simple affair, and consists of doing the following:
</p>
<pre class="code" style="width: 55%">myGraph.Set('chart.annotatable', true);</pre>
<a name="browser"></a>
<h4>Browser support</h4>
<p>
Annotations are supported in all browsers that OfficeExcel works with - Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ and
MSIE/Google Chrome Frame. They DO NOT however work with MSIE 8/ExCanvas.
</p>
<a name="what"></a>
<h4>What can I use annotations for?</h4>
<p>
As mentioned you can use it for presentations, highlighting things to yourself or others or just to have fun drawing (!).
</p>
<a name="persistent"></a>
<h4>Are annotations persistent?</h4>
<p>
That depends on which browser you're using. The annotation data is stored in the users web browser (not on the web server),
meaning currently (21st March 2010) browser support is limited to Firefox 3.5+, Safari 4+,
Chrome 4+ and Opera 10.5+. MSIE 8 also has the required storage capabilities, but since it doesn't yet support canvas, the point is moot.
The user does not have to
confirm anything for storage to be allowed - try it out on this page by drawing on the chart and then refreshing the page.
</p>
<a name="palette"></a>
<h4>How do I show the mini-palette?</h4>
<p>
You can show the palette by using the <i>OfficeExcel.Showpalette</i> function shown below as a context menu item:
</p>
<pre class="code">
myObj.Set('chart.contextmenu', [
['Show palette', OfficeExcel.Showpalette],
['Clear', function () {OfficeExcel.Clear(myObj.canvas); myObj.Draw();}]
]);
</pre>
<p>
This code will result in the same context menu as the chart above.
</p>
<a name="clear"></a>
<h4>How can I clear the annotations?</h4>
You can simply clear the chart and redraw it:
<pre class="code">OfficeExcel.Clear(myGraph.canvas); // Clear the chart
myGraph.Draw(); // Redraw it</pre>
<p>
In the chart above, there is a context menu that allows you to both clear the chart and also demonstrates the mini-palette
feature available to you.
</p>
<a name="replay"></a>
<h4>Replaying annotations when they're off</h4>
<p>
When annotations are not enabled, any prior annotations that may have been made are not displayed. To show them you need
to use the API function <i>OfficeExcel.ReplayAnnotations(object)</i> after the call to .Draw().
</p>
<a name="persist"></a>
<h4>Making your annotations persist across browsers/computers</h4>
<p>
With a little bit of custom Javascript and some server side scripting you can make your annotations persist across
different browsers/computers. You can find an example of this <a href="annotate_persist.html"><b>here</b></a>.
</p>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Creating your charts using asynchronous methods</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs async asynchronous" />
<meta name="description" content="Information about creating your charts using asynchronous HTTP calls" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.OfficeExcel.net/images/logo.png"/>
<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.line.js"></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var duration = (new Date().getTime() - timer.getTime()) / 1000;
document.getElementById("waiting").innerHTML = '<span style="color: green">Done! Extra time taken: ' + duration.toFixed(1) + ' seconds</span>';
alert('The window.onload event fired, extra time taken: ' + duration.toFixed(1) + ' seconds');
}
// Create a timer to show the difference
timer = new Date();
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./index.html">Documentation</a>
>
Asynchronous processing
</div>
<h1>Asynchronous <span>processing</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 id="waiting" style="; font-weight: bold; font-size: 16pt"><span style="color: #aa0">Waiting for onload event...</span></p>
<p style="background-color: #eee; border: 1px dashed gray; padding: 5px; height: 50px;">
<span style="display: inline-block; margin-left: 10px; float: right">
<script>
document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg?' + Math.random() + '" width="50" height="50" />&nbsp;');
document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/window.jpg?' + Math.random() + '" width="50" height="50" />&nbsp;');
document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey2.jpg?' + Math.random() + '" width="50" height="50" />');
</script>
</span>
These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the
difference far more visible.
</p>
<canvas id="myCanvas" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
/**
* Create the line chart
*/
function CreateLineGraph ()
{
var line = new OfficeExcel.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
line.Set('chart.title', 'Sales for Acme Inc.');
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 5);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Draw();
}
if (OfficeExcel.isOld()) {
window.onload = CreateLineGraph;
} else {
OfficeExcel.Async(CreateLineGraph);
}
</script>
<p>
Asynchronous processing can speed up the display of your charts, because the browser gets to your code, sets it
going and then continues on rendering the page. Particularly if you have a weighty page,
it can make quite a difference. The <i>OfficeExcel.Async()</i> function itself is very simple, but because it can make
a significant difference to the speed of your page, it is documented here. There's an example of it to the right.
One thing to remember is to ensure your canvas tag is defined first before you set the function that creates
the chart going.
</p>
<p>
Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial
rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you.
</p>
<br clear="all" />
<pre class="code">
&lt;script src="OfficeExcel.common.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.line.js"&gt;&lt;/script&gt;
&lt;canvas id="myCanvas" width="300" height="100"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script&gt;
/**
* Create the line chart
*/
function CreateLineGraph ()
{
var line = new OfficeExcel.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
line.Set('chart.title', 'Sales for Acme Inc.');
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 5);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Draw();
}
if (OfficeExcel.isOld()) {
window.onload = CreateLineGraph;
} else {
OfficeExcel.Async(CreateLineGraph);
}
&lt;/script&gt;
</pre>
<p><b>Things to remember</b></p>
<ul>
<li>All your libraries must be loaded first. In the pages &lt;head&gt; for example. If not, you won't be able to create your charts.</li>
<li>Your &lt;canvas&gt; tag must be defined before setting the asynchronous code going. If not, then the canvas may be referenced before it exists, and thus your charts will not be created.</li>
<li>
The users connection speed may be a factor. Slower connections may mean, for example, that the onload event doesn't fire very
quickly. If you're using the onload event to create your charts then asynchronous creation instead may give you more
apparent speed ups. Alternatively, careful placement of the &lt;canvas&gt; tag and the code that creates the chart may suffice
instead.
</li>
<li>Since the MSIE/ExCanvas combo requires you to use the window.onload event, asynchronous chart creation in this case will probably not be any help.</li>
<li>
Since a dev release of version 4, Google Chrome has had an issue when asynchronous processing is used, meaning that
text isn't always displayed. The solution here is simply to not use asynchronous processing. As of 27th March 2010,
Chrome 5 appears to be fine.
</li>
</ul>
<h4>See also</h4>
You might also be interested in the alternative, <a href="domcontentloaded.html">DOMContentLoaded</a> event.
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>A basic example of an OfficeExcel chart</title>
<meta name="keywords" content="OfficeExcel 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">
<!-- 1/3. Include the OfficeExcel libraries -->
<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>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>A basic example of a combined Bar and Line chart</title>
<meta name="keywords" content="OfficeExcel javascript charts html5 canvas basic example of a combined Bar/Line chart" />
<meta name="description" content=" A basic example of a combined Bar and Line chart" />
<meta name="googlebot" content="NOODP">
<!-- Include the OfficeExcel libraries -->
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
</head>
<body>
<h1>A basic example of a combined Bar/Line chart</h1>
<!-- The canvas on to which the chart is drawn -->
<canvas id="cvs" width="1000" height="250" !style="border: 1px solid gray">[No canvas support]</canvas>
<!-- The Javascript code that creates the chart -->
<script>
window.onload = function ()
{
/**
* The order in which you create the charts is important - the Line chart must be last
*/
var bar = new OfficeExcel.Bar('cvs', [143,140,141,135,136,132,129,125,126,127,127,129]);
var line = new OfficeExcel.Line('cvs', [23,25,25,26,27,26,28,28,28,27,29,30]);
/**
* Some Line chart configuration
*/
line.Set('chart.background.grid', false);
line.Set('chart.noaxes', true);
line.Set('chart.linewidth', 3);
line.Set('chart.tickmarks', 'endcircle');
line.Set('chart.yaxispos', 'right');
line.Set('chart.ymax', 50);
line.Set('chart.title', 'A combined Bar and Line chart');
if (!OfficeExcel.isIE8()) {
line.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
}
/**
* Some Bar chart configuration
*/
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.ymax', 250);
bar.Set('chart.gutter.left', 50);
bar.Set('chart.gutter.right', 5);
bar.Set('chart.colors', ['blue']);
bar.Set('chart.strokestyle', 'black');
bar.Set('chart.linewidth', 3);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
if (!OfficeExcel.isIE8()) {
bar.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
}
/**
* Add the Line chart to the Bar chart
*/
if (!OfficeExcel.isOld()) {
bar.Set('chart.line', line);
} else {
alert("[OfficeExcel] Sorry, your browser doesn't support this");
}
/**
* Now draw the Bar chart, which also causes the line chart to be drawn
*/
bar.Draw();
}
</script>
<p>
This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier
for you to copy and paste it if you wish.
</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>A basic example of a chart that uses the OfficeExcel pseudo events</title>
<meta name="keywords" content="OfficeExcel javascript charts html5 canvas basic example" />
<meta name="description" content="A basic example of the OfficeExcel pseudo-events" />
<meta name="googlebot" content="NOODP">
<!-- 1/3. Include the OfficeExcel libraries -->
<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 of the OfficeExcel pseudo-events</h1>
<!-- 2/3. This is the canvas that the chart is drawn on -->
<canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>
<!--
3/3. This creates and displays the chart. As below, you can call this from the window.onload event,
allowing you to put it in your pages header.
-->
<script>
window.onload = function ()
{
/**
* This is the function for the mousemove event. It changes the pointer to the hand.
* When the mouse is moved away from the bar the pointer is changed back to what it was
* automatically for you.
*
* @param object e The event object
* @param array bar The details of the bar thats was mouseover'ed
*/
function myMousemove (e, bar)
{
e.target.style.cursor = 'pointer';
}
/**
* This is the function for the click event.
*
* @param object e The event object
* @param array bar The details of the bar thats was clicked
*/
function myClick (e, bar)
{
alert('A bar was clicked');
}
var bar = new OfficeExcel.Bar('cvs', [12,13,16,15,16,19,19,12,23,16,13,24]);
bar.Set('chart.events.mousemove', myMousemove);
bar.Set('chart.events.click', myClick);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Draw();
}
</script>
<p>
This is a basic example that shows you how to use the pseudo-events that OfficeExcel has:
</p>
<ul>
<li>chart.events.click</li>
<li>chart.events.mousemove</li>
</ul>
<p>
Here the mousemove event is used to change the mouse cursor (it's automatically changed back for you). And the click event
is used to show an alert.
</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the OfficeExcel package - you can learn more at: |
* | |
* | http://www.OfficeExcel.net |
* | |
* | This package is licensed under the OfficeExcel license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>A basic example of a chart with tooltips that contain Pie charts</title>
<meta name="keywords" content="OfficeExcel javascript charts html5 canvas basic example pie charts tooltips" />
<meta name="description" content=" A basic example of a chart with tooltips that contain Pie charts" />
<meta name="googlebot" content="NOODP">
<!-- Include the OfficeExcel libraries -->
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
</head>
<body>
<h1>A basic example of Pie charts in tooltips</h1>
<canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
/**
* This creates the Bar chart
*/
var bar = new OfficeExcel.Bar('myBar', [12,13,16,15]);
bar.Set('chart.gutter.left', 35);
bar.Set('chart.colors', ['red']);
bar.Set('chart.title', 'A basic graph with charts in tooltips');
bar.Set('chart.labels', ['Kev', 'Brian', 'Fred', 'John']);
// A function which returns the string which is used as every tooltip
if (!OfficeExcel.isOld()) {
bar.Set('chart.tooltips', function () { return '<canvas id="__tooltip__canvas__" width="300" height="200">[No canvas support]</canvas>';});
} else {
alert("[OfficeExcel] Sorry, your browser doesn't support tooltips");
}
bar.Draw();
/**
* This is the function which ceates the Pie chart (using the custom ontooltip OfficeExcel event
*/
function myCreatePieChart(obj)
{
var canvas = obj.canvas;
var context = obj.context;
var id = obj.id;
// This gets the tooltip index from the tooltip (which is stored in the OfficeExcel registry) itself
var idx = OfficeExcel.Registry.Get('chart.tooltip').__index__;
/**
* The Pie chart data. Realistically this would come from a dynamic source,
* eg AJAX
*/
var pieData = [
[4,5,3,6],
[8,4,5,2],
[4,3,5,1],
[4,2,1,3]
];
var pie = new OfficeExcel.Pie('__tooltip__canvas__', pieData[idx]);
pie.Set('chart.key', ['Monday','Tuesday','Wednesday','Thursday']);
pie.Set('chart.align', 'left');
pie.Set('chart.gutter.top', 10);
pie.Set('chart.gutter.bottom', 10);
pie.Set('chart.gutter.left', 10);
pie.Set('chart.gutter.right', 10);
pie.Set('chart.exploded', [3,3,3,3]);
pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
pie.Draw();
}
OfficeExcel.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart);
}
</script>
<p>
This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip
HTML code (specified like regular tooltips), and then it uses the <i>ontooltip</i> event to run some code whhich
then creates the Pie chart in the tooltip.
</p>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html >
<html>
<head>
<title>An example of using an IFRAME to cover the scrollbars</title>
</head>
<body>
<!DOCTYPE html >
<html>
<head>
<style>
.ModalDialog_dialog {
font-family: Georgia, Verdana;
}
</style>
</head>
<body>
<iframe style="position: fixed; top: 0; left: 0; border: none" id="myIframe" src="iframe.html"></iframe>
<div id="myCover"></div>
<script>
document.getElementById("myIframe").style.height = '100%';
document.getElementById("myIframe").style.width = '100%';
</script>
<script src="../libraries/OfficeExcel.modaldialog.js" ></script>
<!-- This is the popup dialog-->
<div id="loginDialog" style="display: none">
<b>Please login</b>
<p>
<table border="0">
<tr>
<td align="right" style="padding-top: 4px">Email</td>
<td><input type="text" size="20" name="email" style="width: 150px" /></td>
</tr>
<tr>
<td align="right" style="padding-top: 4px">Password</td>
<td><input type="password" size="20" name="password" style="width: 150px" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
<input type="submit" name="submit" value="Login &raquo;" onclick="alert('This is just an example'); event.stopPropagation()">
</td>
</tr>
</table>
</p>
</div>
<!-- End of dialog -->
</body>
</html>
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment