Lea/DocumentServer
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fixed directory traversal vulnerability

Browse source 
removed unused components
This commit is contained in:
nikolay ivanov 2014-07-10 11:02:38 +00:00
parent 0b2e9eb57d
commit cba489e3d3
334 changed files with 23 additions and 73068 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
DocService/ResourceService.ashx
View file

@ -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)

2
LICENSE.txt
View file

@ -658,4 +658,4 @@ specific requirements.
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU AGPL, see
<http://www.gnu.org/licenses/>.
<http://www.gnu.org/licenses/>.

BIN
ONLYOFFICE Online Editors-OE-v2.5.0.exe
View file

Binary file not shown.

75
OfficeWeb/sdk/Common/Charts/css/ModalDialog.css
View file

@ -1,75 +0,0 @@
/**
* 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;
}

299
OfficeWeb/sdk/Common/Charts/css/common.css
View file

@ -1,299 +0,0 @@
@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;
}

2
OfficeWeb/sdk/Common/Charts/css/index.html
View file

@ -1,2 +0,0 @@
<?php
header('Location: /');

251
OfficeWeb/sdk/Common/Charts/css/website.css
View file

@ -1,251 +0,0 @@
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;
}

282
OfficeWeb/sdk/Common/Charts/docs/.BC.txt
View file

@ -1,282 +0,0 @@
Backwards compatibility breaks and advisories
===============================================
+---------------------------------------------------------------------------------------+
o | Stable release 13th January 2012 |
+---------------------------------------------------------------------------------------+
o The ModalDialog has been altered so that it is ALWAYS (re)created when it is shown - ie it is no longer cached once it
has been created
o The Y axis title positioning has been adjusted - so please check yours if it's on the right.
o The OfficeExcel.getTooltipTextFromDIV() function has had its return value changed. If no id: tag is found it returns an empty string
o Unlike prior beta releases, if you specify an empty function for the chart.events.mousemove option this no longer
automatically changes the cursor to a hand. If you want this you specify this instead:
obj.Set('chart.events.mousemove', function (e) {e.target.style.cursor = 'pointer';});
The existing pointer will be saved and reverted to when necessary.
o The RScatter .getPoint() method no longer checks to see if there is an associated tooltip defined for a point.
o The Radar chart .getPoint method no longer checks too if there is an associated tooltip defined for a point
o On the Radar chart if you turn off the background circles the diagonals will now not be drawn
o If you use the internal Radar property .data, you may need to change this to .original_data eg: myObj.original_data = ...
o The Gantt chart default for chart.tooltips has been changed to null.
o The Gantt chart default for chart.background.grid.autofit has been changed to true
o The Gantt chart default for the labels position has been changed from top to bottom.
+---------------------------------------------------------------------------------------+
o | Stable release 26th November 2011 |
+---------------------------------------------------------------------------------------+
o chart.boxplot.width is now a SCALE value, not a PIXEL value. Therefore, if your chart.xmax value is 28 (for four
weeks say, 1 week would be represented a value of 7, whereas before that would simply be 7 pixels.
o The Rose chart adjusting has been removed
o The slide in and slideout have each had the arguments used to stipulate the direction renamed:
OfficeExcel.Effects.jQuery.Slide.In(obj, {'from': 'right'});
OfficeExcel.Effects.jQuery.Slide.Out(obj, {'to': left'});
o Is you use the Thermometer chart with a label - please check that the label is in the correct position
o The default font has been changed to Arial. You can change it back with chart.text.font if you wish.
o Separated out the key functionality into its own file - OfficeExcel.common.key.js. If you use the key you will need to
include this file. If you don't use the key this will save roughly 30k.
o The default highlight mode for the Pie chart has been changed to "explode".
o The Pie chart and the Rose chart .getSegment function has undergone significant changes. The main change
being that angles are now measured in radians and not degrees. Roughly, 1 radian = 57.3 degrees If you don't
use the API then you shouldn't notice the change, but if you do you will most likely have to update your code.
+---------------------------------------------------------------------------------------+
o [27-10-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [27-10-2011] Animations in Chrome 15 can be rather slower than Chrome 14. jQuery (ie CSS) based animations are unaffected, as are
some canvas based animations.
o [22-10-2011] IMPORTANT: The default positioning for titles has changed - you may need to adjust the positioning of your titles
o [15-10-2011] The Pie chart chart.segments array is being removed (probably November or December) - use .angles array instead.
o [15-10-2011] The Pie chart start axis has been changed to the "north" axis (instead of the "east" axis. Please test your charts!
o [01-10-2011] Note that due FF7 had issue with the gradient used in the Odometer border so you may find that it has changed very
slightly
+---------------------------------------------------------------------------------------+
o [24-09-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [10-10-2011] The Bar, Line and Scatter charts have had the background grid autofit turned on by default. Also the number
of horizontal grid lines has been changed to 5.
o [03-10-2011] A change has been made to the Pie chart when using tooltips and the full canvas zoom - please test your charts
if upgrading and you use tooltips in conjunction with the zoom.
+---------------------------------------------------------------------------------------+
o [27-08-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [31-08-2011] Donut/Pie chart title positioning may need attention - the default for chart.title.vpos is now 0.5
(the vertical centre of the gutter)
o [31-08-2011] Filled line charts have been changed - please see the changelog file for more
information (20-08-2011). You may need to reverse your colors if you use multiple lines.
+---------------------------------------------------------------------------------------+
o [29-07-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [30-07-2011] When using Line chart specific labels in conjunction with chart.ymin the label positioning
has changed - the labels now start at the X axis vertical position.
o [20-07-2011] The chart.segments option is no longer mmaintained - use obj.angles instead
o [20-07-2011] When adding a Line chart to a Bar chart some of the Line chart properties are no longer set for you -
you will need to set these yourself if you want them. They are (along with what they were set to):
lineObj.Set('chart.noaxes', true);
lineObj.Set('chart.background.barcolor1', 'rgba(0,0,0,0)');
lineObj.Set('chart.background.barcolor2', 'rgba(0,0,0,0)');
lineObj.Set('chart.background.grid', false);
lineObj.Set('chart.ylabels', false);
o [17-07-2011] The default CSS has been altered for tooltips. This affects all chart types. The changes are:
o There is now no CSS border to the tooltip
o The toltip is now transparent a small amount (opacity=0.9)
o The tooltip shadow X & Y offsets are now zero
If you wish to revert these changes you will need to use the tooltip CSS class:
<style>
.OfficeExcel_tooltip {
// ...
}
</style>
+---------------------------------------------------------------------------------------+
o [12-07-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [02-07-2011] The Tradar chart has been renamed to the Radar chart. This will make more identifiable. You WILL
need to update you code to the new name!
o [25-06-2011] The HBar default colors have changed.
o [18-06-2011] The Rose chart has undergone significant changes, now supporting a "stacked" Rose chart as well as
a "non-equi-angular" variant. It also now supports chart.colors.sequential property and
the default chart.strokestyle value has been changed to rgba(0,0,0,0.5). You may need to set the
chart.colors.sequential (to true) to maintain BC.
+---------------------------------------------------------------------------------------+
o [04-06-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [04-06-2011] MAJOR BREAK: The chart.gutter property has been split into four properties:
o chart.gutter.left
o chart.gutter.right
o chart.gutter.top
o chart.gutter.bottom
This affects all graph types (except the LED chart) so rigorous testing will be necessary if
you choose to upgrade.
o [14-05-2011] If you're using chart.width/chart.height, please switch to the individual gutter settings. These
provide finer grained and more intuitive control over the gutters and certain things are done for you
automatically, like for example adjusting coordinates for tooltips and resizing. The chart.width and
chart.height will cease to function starting immediately.
o [02-04-2011] The default color for background bars on the Scatter has changed from white to transparent. This was
necessary to facilitate background images
+---------------------------------------------------------------------------------------+
o [26-03-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [12-03-2011] The OfficeExcel.Clear() API function now clears to transparent, not white. If you wanted it to clear to white
you could call this function from the new onclear event:
function myClear(obj)
{
obj.context.beginPath();
obj.context.fillStyle = 'white';
obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20);
obj.context.fill();
}
DO NOT simply use the OfficeExcel.Clear() function in the onclear event listener function, as you will create an
infinite loop.
o [06-03-2011] The OfficeExcel.getSegment() method has been moved to be a part of both the Pie and Rose objects. This means
that if you use it you will have to change your code slightly. This change was necessary to facilitate
Pie chart exploded segments. This change will also help prevent bugs in this function in the future.
+---------------------------------------------------------------------------------------+
o [28-01-2011] | Stable release |
+---------------------------------------------------------------------------------------+
o [22-01-2011] The OfficeExcel.Clear() function now uses a square 2,000 pixels wide & high
o [15-01-2011] The Gantt adjusting array (kept in the OfficeExcel registry) now uses associative/textual keys instead of numeric ones
o [08-01-2011] The default number of Line chart X tickmarks has been altered ever-so-slightly: Now if you don't have chart.hmargin
set then the X tickmarks will line up with the points on the chart. See the first example on the line chart test
page for an example: http://dev.OfficeExcel.net/tests/_line.html
o [08-01-2011] The custom OfficeExcel event onannotatestart has been renamed to onannotatebegin. The previous name will still work,
but will eventually be removed.
+---------------------------------------------------------------------------------------+
o [24-12-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [04-12-2010] chart.key.vpos is now silently converted to chart.key.position.y (note that these two properies behave slightly
differently - chart.key.position.y is an absolute coordinate). ALSO; the key has been rewritten, so check that
your graphs are working as you expect
o [04-12-2010] The HBar labels (from chart.labels.above) now have an extra property (chart.labels.above.decimals) which controls
how many decimals are shown. This defaults to 0, and as a result you may need to set this if you're expecting decimals.
+---------------------------------------------------------------------------------------+
o [27-11-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [20-11-2010] For the line/bar/scatter, when the X axis is at the bottom and there is a background bar with a
negative start (or it results in a negative end value), you now get a warning.
o [13-11-2010] All line chart labels are now shown, regardless of how many points on the line there are.
o [06-11-2010] The HBar and Scatter have had their scaled handling changed slightly - now if you specify a maximum Y value,
that is what is used.
o [06-11-2010] The API function OfficeExcel.getSCale(max, obj) now takes two arguments - the maximum value and the graph object.
+---------------------------------------------------------------------------------------+
o [30-10-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [30-10-2010] The Scatter chart can now only have 1/3/5 labels
o [30-10-2010] The Line chart can now only have 1/3/5 labels
o [23-10-2010] The Bar chart can now only have 1/3/5/10 labels
o [23-10-2010] The default for chart.scale.decimals has changed, as such you may need to specify this:
myScatter.Set('chart.scale.decimals', 0);
o [09-10-2010] Scatter chart ticksize has changed behaviour slightly, you therefore may need to alter it slightly.
+---------------------------------------------------------------------------------------+
o [25-09-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [18-09-2010] For IE9 compatibility purposes, the IE8 DirectX shadow has been removed from the ModalDialog. This only affects
MSIE8. The background is still semi-opaque.
o [18-09-2010] The common function OfficeExcel.isIE9() has changed to OfficeExcel.isIE9up(). The old one will continue to work, but
not indefinitely.
o [11-09-2010] The Odometer properties chart.units.pre and chart.units.post have now changed to chart.value.units.pre
and chart.value.units.post. The properties chart.units.post and chart.units.pre are now used for the main
labels.
o [04-09-2010] HBar and Pie charts have been moved to DOM2 event registration for tooltips
o [04-09-2010] The OfficeExcel.number_format() function has had its argument list changed
o [04-09-2010] Now that OfficeExcel is moving to DOM2 event handlers, tooltips will be incompatible with IE8
+---------------------------------------------------------------------------------------+
o [28-08-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [28-08-2010] Removed option to have the labels on the outside of a Meter. Now they're always on the inside of the Meter
and there's always 11 of them (including zero)
o [14-08-2010] Changed the HBar property chart.strokecolor to chart.strokestyle
o [07-08-2010] The Odometer property chart.needle.thickness has been changed to chart.needle.width. Work has been done on the
needle head.
o [07-08-2010] Progress bar has now been split into two different graph types:
o HProgress
o VProgress
o [07-08-2010] Progress bar property chart.color is now chart.colors, and should be an array
o [07-08-2010] Changed default Bipolar colors to just one - green
+---------------------------------------------------------------------------------------+
o [31-07-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [17-07-2010] Stepped line charts and their tickmarks have been marginally altered. No final tickmark is now shown (it looks
odd being isolated)
o [17-07-2010] Changed the Odo chart.needle.style to chart.needle.color
o [17-07-2010] The Odo properties chart.start, chart.end and chart.value have all been changed to internal properties:
obj.start, obj.end and obj.value
o [09-07-2010] With the Odometer the old property chart.needle.style has been renamed to be chart.needle.color
o [09-07-2010] The Progress bar has had it's properties chart.max and chart.value changed to class properties, this means
that if you want to make use of these, you will now need to use myProgress.value and myProgress.max.
myProgress being the name of your graph object.
+---------------------------------------------------------------------------------------+
o [26-06-2010] | Stable release |
+---------------------------------------------------------------------------------------+
o [08-05-2010] The Rose charts "chart.labels" property is now different to the "chart.key" property
o [01-05-2010] The Donut chart is now a variant of the Pie chart (chart.variant = donut)
o [24-04-2010] The radar chart has been renamed to Rose. The library is now called OfficeExcel.rose.js and the constructor has
been renamed. It has also been prettied up marginally and labels have been added.
o [17-04-2010] All charts have had their property "chart.tooltip.effect" renamed to "chart.tooltips.effect".
The Scatter chart has also had its property "chart.tooltip.hotspot" renamed to "chart.tooltips.hotspot"
o [17-04-2010] Default chart.tooltips bar chart property has changed from an empty array to null.
o [17-04-2010] The OfficeExcel.common.js library has now been split into 5 separate files because it had
become far too large. You can read the new implementation details here:
http://www.OfficeExcel.net/docs/index.html#implementation
o [10-04-2010] The "coords" arrays (for each object) have been unified. Now you no longer need to take
into account the margins. What you get in the coords arrays are as they are used on the
graph.
+---------------------------------------------------------------------------------------+
o [27-03-2010] | Initial stable release |
+---------------------------------------------------------------------------------------+<!-- Social networking buttons -->
<!-- FOO -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px">
<a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.OfficeExcel.net&notes=OfficeExcel%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=OfficeExcel:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a>
<a href="http://www.twitter.com/_OfficeExcel" target="_blank" title="Follow _OfficeExcel on Twitter"><img src="../images/twitter.png" alt="Follow _OfficeExcel on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&amp;href=http%3A%2F%2Fwww.OfficeExcel.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.OfficeExcel.net"></g:plusone>
</div>

2030
OfficeWeb/sdk/Common/Charts/docs/.CHANGELOG.txt
View file

File diff suppressed because it is too large Load diff

118
OfficeWeb/sdk/Common/Charts/docs/adjusting.html
View file

@ -1,118 +0,0 @@
<!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>

119
OfficeWeb/sdk/Common/Charts/docs/adjusting_bar.html
View file

@ -1,119 +0,0 @@
<!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>

210
OfficeWeb/sdk/Common/Charts/docs/adjusting_gantt.html
View file

@ -1,210 +0,0 @@
<!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>

123
OfficeWeb/sdk/Common/Charts/docs/adjusting_hprogress.html
View file

@ -1,123 +0,0 @@
<!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>

129
OfficeWeb/sdk/Common/Charts/docs/adjusting_line.html
View file

@ -1,129 +0,0 @@
<!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>

120
OfficeWeb/sdk/Common/Charts/docs/adjusting_radar.html
View file

@ -1,120 +0,0 @@
<!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>

129
OfficeWeb/sdk/Common/Charts/docs/adjusting_thermometer.html
View file

@ -1,129 +0,0 @@
<!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>

123
OfficeWeb/sdk/Common/Charts/docs/adjusting_vprogress.html
View file

@ -1,123 +0,0 @@
<!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>

0
OfficeWeb/sdk/Common/Charts/docs/animation-effects.html
View file

125
OfficeWeb/sdk/Common/Charts/docs/animation_segments.html
View file

@ -1,125 +0,0 @@
<!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>

282
OfficeWeb/sdk/Common/Charts/docs/annotate_persist.html
View file

@ -1,282 +0,0 @@
<!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>Making your annotations shareable across different browsers</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs annotating shareable cross browser" />
<meta name="description" content="Making annotations shareable across different browsers" />
<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.line.js"></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
/**
* The function that loads the annotations from the server
*/
function LoadAnnotations ()
{
var canvasPosition = OfficeExcel.getCanvasXY(g.canvas);
var div = document.createElement('DIV');
div.style.backgroundColor = 'white';
div.style.padding = '3px';
div.style.position = 'absolute';
div.style.left = canvasPosition[0] + 5 + 'px';
div.style.top = canvasPosition[1] + 5 + 'px';
div.style.color = 'gray';
div.style.opacity = 1;
div.style.border = '2px solid black';
div.style.zIndex = 99;
div.innerHTML = 'Loading annotations...';
document.body.appendChild(div);
div2 = document.createElement('DIV');
div2.style.backgroundColor = 'gray';
div2.style.opacity = 0.5;
div2.style.position = 'absolute';
div2.style.left = canvasPosition[0] + 'px';
div2.style.top = canvasPosition[1] + 'px';
div2.style.width = g.canvas.width + 'px';
div2.style.height = g.canvas.height + 'px';
//div2.style.zIndex = 98;
document.body.appendChild(div2);
window.localStorage['__OfficeExcel_annotations_cvs__'] = '';
AjaxGet('annotate_persist.html?getannotations=12',
function ()
{
if (this.readyState == 4 && this.status == 200) {
window.localStorage['__OfficeExcel_annotations_cvs__'] = this.responseText;
OfficeExcel.ReplayAnnotations(g);
setTimeout(function () {div.style.opacity = 0.8; div2.style.opacity = 0.4;}, 50);
setTimeout(function () {div.style.opacity = 0.6;div2.style.opacity = 0.3;}, 100);
setTimeout(function () {div.style.opacity = 0.4;div2.style.opacity = 0.2;}, 150);
setTimeout(function () {div.style.opacity = 0.2;div2.style.opacity = 0.1;}, 200);
setTimeout(function () {div.style.opacity = 0;div2.style.opacity = 0;}, 250);
setTimeout(function () {div.style.display = 'none';div2.style.display = 'none';}, 300);
}
}
);
}
/**
* The function that saves annotations to the server
*/
function SaveAnnotations ()
{
var canvasPosition = OfficeExcel.getCanvasXY(g.canvas);
var div = document.createElement('DIV');
div.style.backgroundColor = 'white';
div.style.padding = '3px';
div.style.position = 'absolute';
div.style.left = canvasPosition[0] + 5 + 'px';
div.style.top = canvasPosition[1] + 5 + 'px';
div.style.color = 'gray';
div.style.opacity = 1;
div.style.border = '2px solid black';
div.style.zIndex = 99;
div.innerHTML = 'Saving annotations...';
document.body.appendChild(div);
AjaxPost('annotate_persist.html', 'data=' + window.localStorage['__OfficeExcel_annotations_cvs__']);
setTimeout(function () {div.style.opacity = 0.8}, 50);
setTimeout(function () {div.style.opacity = 0.6}, 100);
setTimeout(function () {div.style.opacity = 0.4}, 150);
setTimeout(function () {div.style.opacity = 0.2}, 200);
setTimeout(function () {div.style.opacity = 0; div.style.display = 'none';}, 250);
}
/**
* Makes an AJAX POST.
*/
function AjaxPost (url, data)
{
// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
// MSIE
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//httpRequest.onreadystatechange = callback;
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send(data);
}
/**
* Makes an AJAX call. It calls the given callback (a function) when ready
*
* @param string url The URL to retrieve
* @param function callback A function object that is called when the response is ready, there's an example below
* called "myCallback".
*/
function AjaxGet (url, callback)
{
// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
// MSIE
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = callback;
httpRequest.open('GET', url, true);
httpRequest.send();
}
window.onload = function (e)
{
/**
* This clears the locally stored annotations so that they can be loaded from server
*/
window.localStorage['__OfficeExcel_annotations_cvs__'] = '';
// Purposefully a global
g = new OfficeExcel.Line('cvs', [5,6,3,4,8,6,7,5,9]);
g.Set('chart.tickmarks', 'endcircle');
g.Set('chart.hmargin', 5);
g.Set('chart.annotatable', OfficeExcel.isOld() ? false : true);
g.Set('chart.labels', ['Ben','Olga','Jeff','Indigo','Kev','Pete','Lou','Fred','John']);
g.Set('chart.contextmenu', OfficeExcel.isOld() ? null : [['Show palette', OfficeExcel.Showpalette], ['Clear', function () {OfficeExcel.Clear(g.canvas);g.Draw();}]]);
g.Set('chart.shadow', true);
g.Set('chart.linewidth', 1.01);
g.Set('chart.ylabels.count', 10);
g.Draw();
LoadAnnotations();
OfficeExcel.AddCustomEventListener(g, 'onannotateend', function (obj) {SaveAnnotations();});
OfficeExcel.AddCustomEventListener(g, 'onannotateclear', function (obj) {SaveAnnotations();});
}
</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>
>
Cross-browser annotations
</div>
<h1>Making <span>annotations shareable cross browser</span></h1>
<div style="text-align: center">
<div class="warning" style="display: inline-block">
This example does not work offline - you must use a website. Annotations are removed every five minutes.
</div>
</div>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<p>
Combining a little AJAX and some very simple server side scripting, you can easily make an annotation system that can persist
across different browsers and computers. You an either use Load/Save buttons to trigger the loading and saving, or like the
example to the right you can make use of the custom OfficeExcel onannotateend event to make it happen automatically.
</p>
<p>
This simple example uses a small PHP server side script that loads and saves the annotation data to a file on the server,
and that looks like this:
</p>
<br clear="all" />
<pre class="code">
&lt;?php
$file = '/tmp/annotation_data';
/**
* Save the annotations to a tmp file
*/
if (isset($_POST) && isset($_POST['data'])) {
file_put_contents($file, $_POST['data']);
exit;
}
/**
* Load the annotations
*/
if (!empty($_GET['getannotations']) && $_GET['getannotations'] == 1) {
$contents = file_get_contents($file);
print($contents);
exit;
}
?&gt;
</pre>
<p>
By making the Javascript Save/Load functions repeat themselves every few seconds, you could easily make a presentation/demo system
that can be used when paticipants are in differing locations - in a similar fashion to Google Docs - or when you want one persons
annotations to be viewable by multiple PCs. On this page though, the Save function is triggered by the custom OfficeExcel event
<i>onannotateend</i>.
</p>
</body>
</html>

198
OfficeWeb/sdk/Common/Charts/docs/annotating.html
View file

@ -1,198 +0,0 @@
<!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>

810
OfficeWeb/sdk/Common/Charts/docs/api.html
View file

@ -1,810 +0,0 @@
<!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>The OfficeExcel API documentation</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs api" />
<meta name="description" content="Information about the OfficeExcel API" />
<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>
<?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>
>
API Documentation
</div>
<h1>API <span>documentation</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>
<br />
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#references">Canvas and context references</a></li>
<li><a href="#events">Working with events</a></li>
<li><a href="#coords">Working with chart coordinates</a></li>
<li><a href="#data">Working with chart data</a></li>
<li><a href="#updating">Updating your charts dynamically</a></li>
<li><a href="#accessors">Setting properties</a></li>
<li><a href="#references.other">References available on OfficeExcel objects</a></li>
<li><a href="#scale">Scale information</a></li>
<li><a href="#text">Adding text to your charts</a></li>
<li>
<a href="#functions">OfficeExcel functions</a>
<ul>
<li><a href="#functions.arrays">Arrays</a></li>
<li><a href="#functions.strings">Strings</a></li>
<li><a href="#functions.numbers">Numbers</a></li>
<li><a href="#functions.misc">Miscellaneous</a></li>
<li><a href="#functions.events">Custom OfficeExcel event related functions</a></li>
<li><a href="#functions.other">Other</a></li>
</ul>
</li>
<li><a href="#skeleton">The skeleton file</a></li>
</ul>
<a name="overview"></a>
<h4>Overview</h4>
<p>
Working with OfficeExcel objects is purposefully easy, to make them straight forward to integrate into your own scripts if you want to. For any
particular chart type there are a few files required - the common libraries and the chart specific library. Eg:
</p>
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.bar.js"&gt;&lt;/script&gt;
</pre>
<p>
<i>OfficeExcel.common.core.js</i> is a function library that contains a large set of functions that support the chart classes.
Some functions, and sets of functions, have their own files. For example, the zoom functions reside in <i>OfficeExcel.common.zoom.js</i>,
so if you don't need zoom, you don't need this file.
Each of the chart libraries (<i>OfficeExcel.*.js</i>) contains that particular charts class. If you'd like to see a "bare bones"
implementation, you can look at the <a href="../examples/basic.html">basic example</a>. There's also a
<a href="#skeleton">skeleton example</a> to make it easier to create new chart types.
</p>
<a name="references"></a>
<h4>Canvas and context references</h4>
<p>
Each chart object maintains references to the <i>context</i> and <i>canvas</i> as properties. So to get hold of them all you
need to do is this:
</p>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
// 1/2 First draw the chart
var myBar = new OfficeExcel.Bar('myCanvas', [1,5,8,4,6,3,1,5,7,8,4,6]);
myBar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myBar.Draw();
// 2/2 Now get hold of the references
var context = myBar.context; // Get hold of a reference to the context
var canvas = myBar.canvas; // Get hold of a reference to the canvas
}
&lt;/script&gt;
</pre>
<a name="events"></a>
<h4>Working with events</h4>
<p>
When working with events, you may come across the situation where you have a reference to the <i>canvas</i>, but
also need to access the chart object. For this reason the constructor of each object adds a reference to the object to the
canvas and you can access it like this:
</p>
<pre class="code">
&lt;script&gt;
document.getElementById("myCanvas").onclick = function (e)
{
var src = (OfficeExcel.isIE8() ? event.srcElement) : e.target;
// The OfficeExcel object constructors add __object__ to the canvas.
var myBar = src.__object__;
}
&lt;/script&gt;
</pre>
<a name="coords"></a>
<h4>Working with chart coordinates</h4>
<p>
For most chart types, the coordinates of elements (eg bars, lines etc) are to be found in the class variable <i>obj.coords</i>.
This is usually a multi-dimensional array consisting of the coordinates of those shapes, or of points. As an example the bar
chart maintains the X, Y, width and height of each bar (or sections of bars in a stacked bar chart). The coords array is
usually a flat array, even when you have multiple sets of data.
</p>
<p>
By using the OfficeExcel.getMouseXY() function and this array you can determine if a bar was clicked on, or if the mouse is near a
line point etc.
</p>
<pre class="code">
var myCoords = myBar.coords;
</pre>
<p>
<b>Note:</b> Previously the coords array values sometimes included the margin values, and sometimes didn't. As of 17th
April 2010 the values have all been unified to not include the margin values, so the values are as reported.
</p>
<p>
<b>Note:</b>
The Line chart also has an object variable <i>myObj.coords2</i>, where the coordinates are indexed differently -
by line index.
</p>
<a name="data"></a>
<h4>Working with chart data</h4>
<p>
Another variable you may need is the <i>data</i> variable. For most chart types, this is where the data is stored. It is usually
untouched, so it is as you supplied to the chart objects constructor. A notable exception to this is filled line charts.
Here the original data is stored in the class variable <i>original_data</i>. The data supplied is modified to produce the stacking
effect. If you need to modify a filled line charts data you will need to change this variable instead.
</p>
<p>
Not all chart types use the <i>data</i> variable. For some the name is different so that it makes a little more sense. The
chart types and their associate data variables are listed below<sup>1</sup>.
</p>
<style>
table#data_properties td,
th {
text-align: center;
}
</style>
<table border="0" align="center" id="data_properties">
<tr>
<th>Chart type</th>
<th>Data variable(s)</th>
</tr>
<tr>
<td>Bar</td>
<td>obj.data</td>
</tr>
<tr>
<td>Bi-polar</td>
<td>obj.left, obj.right</td>
</tr>
<tr>
<td>Donut</td>
<td>This is now a variant of the Pie chart</td>
</tr>
<tr>
<td>Fuel</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Funnel</td>
<td>obj.data</td>
</tr>
<tr>
<td>Gantt</td>
<td>See the <a href="gantt.html#events">docs</a></td>
</tr>
<tr>
<td>Gauge</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Horizontal Bar</td>
<td>obj.data</td>
</tr>
<tr>
<td>Horizontal Progress bar</td>
<td>obj.max, obj.value</td>
</tr>
<tr>
<td>LED</td>
<td>obj.text</td>
</tr>
<tr>
<td>Line</td>
<td>obj.original_data<sup>3</sup></td>
</tr>
<tr>
<td>Meter</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Odometer</td>
<td>obj.start, obj.end, obj.value</td>
</tr>
<tr>
<td>Pie</td>
<td>obj.angles, obj.data</td>
</tr>
<tr>
<td>Radial Scatter chart</td>
<td>obj.data</td>
</tr>
<tr>
<td>Rose</td>
<td>obj.max, obj.data</td>
</tr>
<tr>
<td>Scatter</td>
<td>obj.max, obj.data<sup>2</sup></td>
</tr>
<tr>
<td>Thermometer</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Traditional Radar</td>
<td>obj.data, obj.max</td>
</tr>
<tr>
<td>Vertical Progress bar</td>
<td>obj.max, obj.value</td>
</tr>
<tr>
<td>Waterfall chart</td>
<td>obj.max, obj.data</td>
</tr>
</table>
<ol>
<li style="margin-top: 0">In the table, <i>obj</i> refers to your chart object.</li>
<li style="margin-top: 0">For the Scatter chart, each data point is an array of X/Y coordinates, the color and the tooltip for that point.</li>
<li style="margin-top: 0">
The Line chart <i>obj.original_data</i> is an aggregation of all the datasets given to the Line chart, so the first
dataset is held in <i>obj.original_data[0]</i>, the second in <i>obj.original_data[1]</i> etc.
</li>
</ol>
<a name="updating"></a>
<h4>Updating your charts dynamically</h4>
<p style="background-color: #ffa; padding: 3px; border: 1px dashed black">
<b>Note:</b>
It is important that you're careful with types when making AJAX requests. Since the response is initially a string,
and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To
do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example:
</p>
<pre class="code">
&lt;script&gt;
num = Number('23');
num = parseInt('43');
&lt;/script&gt;
</pre>
<p>
A common request is to be able to update charts dynamically. This is quite simple and consists of three steps:
</p>
<ol>
<li style="margin-top: 0">Get the new data from the server (with an AJAX request for example).</li>
<li style="margin-top: 0">Set the data in your chart object. See the above table for the appropriate property to use.</li>
<li style="margin-top: 0">Call the .Draw() method again.</li>
</ol>
<p>
If you don't need to get data from your server (ie it's all client-side) then you can omit the first step. Also, it may be
sufficient to simply recreate the entire object from scratch. This means that you won't have to alter and
OfficeExcel internal properties - just recreate the chart object and configuration. There's a simple function
you can use for AJAX purposes <a href="index.html#ajax">here</a>.
</p>
<a name="accessors"></a>
<h4>Setting properties</h4>
<p>
To set OfficeExcel properties, ideally you should use each objects setter (there's also a corresponding getter). These functions
accomodate some backwards compatibility changes, so by not using them you run the risk of your charts not working entirely as
expected.
</p>
<pre class="code">
myObj.Set('chart.gutter.left', 25);
myObj.Get('chart.gutter.left');
</pre>
<a name="references.other"></a>
<p>&nbsp;</p>
<h4>References available on OfficeExcel objects</h4>
<p>
OfficeExcel stores various references to objects on the canvas (typically) to make getting hold of them easier. There's also a
Registry object in
which references are stored. Typically the objects are named with the format <i>__xxx__</i>, and you can inspect the
objects by using a console(eg the inspector that's part of Google Chrome - <i>CTRL+SHIFT+J</i>). Some examples are:
</p>
<ul>
<li>__object__ on the canvas - a reference to the chart object</li>
<li>
OfficeExcel.Registry.Get('chart.tooltip') - a reference to the currently visible tooltip. This in turn has the following
available:
<ul>
<li>__text__ - Since setting .innerHTML can cause changes in HTML, this is the original tooltip text.</li>
<li>__index__ - This is the numerical index corresponding to the tooltips array that you set.</li>
<li>__dataset__ - Used in the Scatter chart and corresponding to the dataset.</li>
<li>__canvas__ - A reference to the original canvas that triggered the tooltip.</li>
</ul>
</li>
<li>
OfficeExcel.Registry.Get('chart.mousedown') - Used in annotating, and stipulates whether the mouse button is currently
pressed.
</li>
<li>
OfficeExcel.Registry.Get('chart.contextmenu') - The currently shown context menu, if any. This in turn has the following
properties:
<ul>
<li>__canvas__ - The original canvas object.</li>
</ul>
</li>
</ul>
These are just a sample of what's available, to find more you should use an introspection tool or look at the source.
<a name="scale"></a>
<h4>Scale information</h4>
<p>
For the Bar, Bipolar, HBar, Line and Scatter charts the scale that is used is stored in the <i>scale</i> class variable. Eg:
</p>
<pre class="code">
&lt;script&gt;
var myBar = new OfficeExcel.Bar('cvs', [56,43,52,54,51,38,46,42,52]);
myBar.Draw();
var myScale = myBar.scale
&lt;/script&gt;
</pre>
<a name="text"></a>
<h4>Adding text to your charts</h4>
<p>
If you want to add arbitrary text to your chart(s) you can use the API function <a href="#functions.other">OfficeExcel.Text().</a>
</p>
<pre class="code">
&lt;script&gt;
// Draw a basic chart
var myObj = new OfficeExcel.Bar('myCanvas', [4,5,5,8,7,6,4,8,5,9]);
myObj.Draw();
// Draw some text
myObj.context.beginPath();
size = 12;
font = 'Verdana';
text = 'Some text!;
x = 10;
y = 10;
OfficeExcel.Text(myObj.context, font, size, x, y, text);
myObj.context.fill();
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h4>OfficeExcel functions</h4>
<p>
This is a list of some of the functions available to you in the OfficeExcel common libraries.
It's not every single one that's available, but is a list of the common ones that you're likely to want to use. Arguments
in square brackets are optional.
</p>
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script&gt;
// Returns 9
myArray = [3,2,5,4,9,7,8];
max = OfficeExcel.array_max(myArray);
&lt;/script&gt;
</pre>
<a name="functions.arrays"></a>
<h4>Arrays</h4>
<ul>
<li><b>(number) OfficeExcel.array_max(array)</b><br />Returns the maximum value in the array.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(number) OfficeExcel.array_sum(array)</b><br />Returns the sum of all values in the array. You can also pass a single integer, in which case it is simply returned as-is.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.array_clone(array)</b><br />Creates a copy/clone of the given array. Only numerically indexed arrays are supported.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.array_reverse(array)</b><br />Returns a reversal of the given array.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(boolean) OfficeExcel.is_array(obj)</b><br />Returns true or false as to whether the given object is an array or not.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.array_pad(array, length[, value])</b><br />Pads the given array to the specified length (if the length is less, if not the array is returned as is). The third, optional, argument is the value which is used as the pad value. If not specified, <i>null</i> is used.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.array_shift(array)</b><br />Shifts an element off of the start of the given array and returns the new array.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
</ul>
<a name="functions.strings"></a>
<h4>Strings</h4>
<ul>
<li><b>(string) OfficeExcel.rtrim(string)</b><br />Strips the right hand white space from the string that you pass it.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li>
<b>(string) OfficeExcel.number_format(obj, number[, prepend[, append]])</b><br />
This formats the given number (which can be either an integer or a float. The prepend and append variables are
strings which are added to the string (eg 5%).<br /><br />
<b>Note:</b>As of 5th September 2010 this functions argument list has been changed to include the chart object, as shown above.<br /><br />
<i>File: OfficeExcel.common.core.js</i><p />
</li>
</ul>
<a name="functions.numbers"></a>
<h4>Numbers</h4>
<ul>
<li><b>(number) OfficeExcel.random(min, max)</b><br />Returns a random number between the minimum and maximum that you give.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(string) OfficeExcel.number_format(number[, prepend[, append]])</b><br />See <a href="#functions.strings">above</a>.<br /><i>File: OfficeExcel.common.core.js</i></li>
</ul>
<a name="functions.misc"></a>
<h4>Miscellaneous</h4>
<ul>
<li>
<b>(object) OfficeExcel.Effects.ReplaceCanvasWithDIV(canvas)</b><br />
This function is used by some animation functions to stop the page layout changing when the canvas is removed from
the document. It removes the canvas from the document, replaces it with a DIV and then adds the canvas as a child node
of the DIV. The canvas is placed in the center of the DIV.
<br /><i>File: OfficeExcel.common.effects.js</i>
<p />
</li>
<li>
<b>(object) OfficeExcel.FixEventObject(event)</b><br />Pass this function an event object and it will attempt to "fill in" the missing properties (depending on the browser).
It tries to add:<br /><br />
<ul>
<li>pageX (MSIE)</li>
<li>pageY (MSIE)</li>
<li>target (MSIE)</li>
<li>stopPropagation() (MSIE)</li>
<li>offsetX (FF)</li>
<li>offsetY (FF)</li>
</ul>
<br /><i>File: OfficeExcel.common.core.js</i>
<p />
</li>
<li><b>(null) OfficeExcel.OldBrowserCompat(context)</b><br />This function "fills in" any required functions that some browsers don't have. At the moment this consists of adding the measureText() and fillText() functions to the context when they're missing (usually this means older versions of Opera).<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(number) OfficeExcel.GetDays(date)</b><br />This returns the number of days in the given month. The argument should be a Date object.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(null) OfficeExcel.pr(mixed)</b><br />Emulates the PHP function print_r() by recursively printing the structure of whatever you pass to it. It handles numbers, strings, arrays, booleans, functions and objects.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(null) p(mixed)</b><br />An alias of the above albeit far shorter to type.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(null) cl(mixed)</b><br />A shortcut for the Firebug and Google Chrome debug function console.log().<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(null) OfficeExcel.Clear(canvas[, color])</b><br />Clears the canvas by drawing a white (or the optional color you give) rectangle over it. As of 23rd January 2011 you can now specify <i>transparent</i> as the color and the canvas will be reset back to transparency instead of to white. This may become the default at a later date.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li>
<b>(null) OfficeExcel.ClearAnnotations(id)</b><br />This function clears the annotation data associated with the given canvas ID (but DOES NOT redraw the chart). If you want to clear the visible annotations too, you will need to redraw the canvas. You could do this using the following code:
<br />
<pre class="code">
function ClearAndRedraw (obj)
{
OfficeExcel.Clear(obj.canvas); // This function also calls the OfficeExcel.ClearAnnotations() function
obj.Draw();
}</pre>
<br /><i>File: OfficeExcel.common.annotatate.js</i><p />
</li>
<li><b>(null) OfficeExcel.ReplayAnnotations(object)</b><br />This function redraws any annotations which have previously been drawn on the canvas. You would use this function when annotations are turned off and you want previous annotations to be displayed.<br /><i>File: OfficeExcel.common.annotate.js</i><p /></li>
<li><b>(array) OfficeExcel.getMouseXY(event)</b><br />When passed your event object, it returns the X and Y coordinates (in relation to the canvas) of the mouse pointer. (0,0) is in the top left corner, with the X value increasing going right and the Y value increasing going down.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.getCanvasXY(canvas)</b><br />Similar to the above function but returns the X/Y coordinates of the canvas in relation to the page.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(number) OfficeExcel.degrees2Radians(number)</b><br />Converts and returns the given number of degrees to radians. 1 radian = 57.3 degrees.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(array) OfficeExcel.getScale(max, obj)</b><br />Given the maximum value this will return an appropriate scale. The second argument is the graph object.<br /><i>File: OfficeExcel.common.core.js</i><p /></li>
<li><b>(mixed) OfficeExcel.Registry.Get(name)</b><br />In conjunction with the next function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(mixed) OfficeExcel.Registry.Set(name, value)</b><br />In conjunction with the previous function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.Register(object)</b><br />This function is used in conjunction with the next to register a canvas for redrawing. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li>
<b>(null) OfficeExcel.Redraw([id, [color]])</b><br />This function is used in conjunction with the previous to redraw a canvas. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><br /> <b>Note:</b> All canvases that are registered are redrawn. However the optional first argument can be an ID (a string) of the canvas that is NOT to be redrawn. The optional second argument is the color to use when clearing canvases.<br /><i>File: OfficeExcel.common.core.js</i><br /><br />
</li>
<li><b>(null) OfficeExcel.SetShadow(object, color, offetX, offsetY, blur)</b><br />This function is a shortcut function used to set the four shadow properties. The arguments are: your chart object, the shadow color, the X offset, the Y offset, the shadow blur.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.NoShadow(object)</b><br />This function is a shortcut function used to "turn off" the shadow. The argument is your chart object.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li>
<b>(number) OfficeExcel.Async(mixed[, delay])</b><br />This is a simple function but has significant implications on your pages performance. You
can pass this either a function pointer, or a string containing the code to run and it will run the code asynchronously (ie in
parallel to the page loading). In doing so it can mean that your page is displayed faster, as the chart is created
seperate to the page loading. As such, the placement of your canvas tag becomes more important. What you can do is
define the canvas tag and then the code to produce the chart immediately after it. This is how the front page is coded,
(but not using the OfficeExcel.Async() function).
There's an example of it <a href="async.html">here</a>. The optional delay argument is measured in milliseconds
(1 second = 1000 milliseconds) and defaults to 1. What you can do is specify something like 1000 to make the effect
more pronounced to ensure it's working as expected.
<p>
<b>Note:</b> Since a dev release of version 4, Google Chrome versions 4 and 5 have an issue with rendering text when using
the OfficeExcel.Async() function. The solution here is to simply not use the OfficeExcel.Async() function.
</p>
<i>File: OfficeExcel.common.core.js</i><br /><br />
</li>
<li>
<b>(null) OfficeExcel.filledCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br />
This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control
individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all
the corners are curvy.<br /><i>File: OfficeExcel.common.core.js</i><br /><br />
</li>
<li>
<b>(null) OfficeExcel.strokedCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br />
This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control
individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all
the corners are curvy.<br /><i>File: OfficeExcel.common.core.js</i><br /><br />
</li>
<li>
<b>(null) OfficeExcel.Reset(canvas)</b><br />
This function resets the canvas. At first this function may appear similar to the OfficeExcel.Clear() function, however this
function will reset any translate() that has been performed, and so can stop them accumulating.
<br /><i>File: OfficeExcel.common.core.js</i><br /><br />
</li>
</ul>
<a name="functions.events"></a>
<h4>Custom OfficeExcel event related functions</h4>
<ul>
<li><b>(null) OfficeExcel.FireCustomEvent(object, event)</b><br />This fires a custom event. The object is your chart object, and the name is a string specifying the name of the event.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(number) OfficeExcel.AddCustomEventListener(object, event, callback)</b><br />This attaches a function to the specified event. The object argument is your chart object, the event argument should be the name of the event, eg <i>ontooltip</i>, and the function argument is your function which handles the event. The return value is an ID which can be used with the <i>OfficeExcel.RemoveCustomEventListener()</i> function.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.RemoveCustomEventListener(object, id)</b><br />This removes the custom event listener that corresponds to the given ID. The arguments are the chart object and the ID of the event handler to remove (as returned by <i>OfficeExcel.AddCustomEventListener()</i>).<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.RemoveAllCustomEventListeners([id])</b><br />To easily remove all custom event listeners you can use this function. It also can optionally take one argument - a canvas ID - to limit the clearing to.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
</ul>
<a name="functions.other"></a>
<h4>Other</h4>
<p>
These are functions which are less generic, and used to build the charts. You may still wish to use them however.
</p>
<ul>
<li><b>(null) OfficeExcel.lineByAngle(context, x, y, angle, length)</b><br />This function draws a line from the given X and Y coordinates at the specified angle.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li>
<b>(null) OfficeExcel.Text(context, font, size, x, y, text[, valign[, halign[, border[, angle[, background[, bold[, indicator]]]]]]])</b><br />
This function acts as a wrapper around the canvas text functionality. The arguments are:
<ul>
<li>The context is the canvases 2D context.</li>
<li>The font is the name of the font you want to use (eg Arial).</li>
<li>The size is an integer specifying the size of the text, (measured in points).</li>
<li>The x and y arguments are the X/Y coordinates at which to draw the text.</li>
<li>The text argument is the text to draw.</li>
<li>The optional valign argument is the vertical alignment and can be either <i>top</i>, <i>center</i> or <i>bottom</i>.</li>
<li>The optional halign argument is the horizontal alignment and can be <i>left</i>, <i>center</i> or <i>right</i>.</li>
<li>The optional border argument is a boolean (<i>true</i> or <i>false</i>) controlling whether the text has a border.</li>
<li>The optional angle argument specifies the angle at which the text is drawn (rotated around the X/Y coordinates and measured in degrees).</li>
<li>The optional background argument is the color of the background, (eg #fff).</li>
<li>The optional bold argument is boolean which controls whether the text is bold or not.</li>
<li>And the optional indicator argument is a boolean which controls whether a placement indicator is shown.</li>
</ul>
<br /><i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li><b>(null) OfficeExcel.DrawTitle(canvas, text, gutter[, centerx[, size]])</b><br />This function draws the title. The centerx argument is the center point to use. If not given the center of the canvas is used.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.Tooltip(canvas, text, x, y, idx)</b><br />This function shows a tooltip. The idx value corresponds to the tooltip array that you give.<br /><i>File: OfficeExcel.common.tooltips.js</i><br /><br /></li>
<li>
<b>(null) OfficeExcel.DrawKey(object, key, colors)</b><br />
This function draws the key. The first argument is the chart object, the second is an array of key information and the
last is an array of the colors to use.
<p>
<b>Note:</b> As of the November 2011 the key has been seperated out into its own file.
</p>
<i>File: OfficeExcel.common.key.js</i><br /><br />
</li>
<li><b>(null) OfficeExcel.DrawBars(object)</b><br />This draws the horizontal background bars. The argument is the chart object.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.DrawInGraphLabels(object)</b><br />This draws the in-graph labels. The argument is the chart object.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.DrawCrosshairs(object)</b><br />This function draws the crosshairs. The argument is the chart object.<br /><i>File: OfficeExcel.common.core.js</i><br /><br /></li>
<li><b>(null) OfficeExcel.HideContext()</b><br />This function clears the context menu. OfficeExcel uses it to hide the context menu, but only AFTER your function/callback is run. You may wish to hide the context menu before your own function, in which case you can call this function.<br /><i>File: OfficeExcel.common.context.js</i><br /><br /></li>
<li>
<b>(null) OfficeExcel.showPNG([canvas[, event]])</b><br />
This function allows you to easily facilitate getting a PNG image representation of your chart.
You can use it like this:<br />
<pre class="code">myBar.Set('chart.contextmenu', [
<span style="color: green">['Get PNG', OfficeExcel.showPNG]</span>,
null,
['Cancel', function () {}]
]);</pre>
Optionally, you can pass in the canvas as an argument which will be used, meaning now you do not have to use a
context menu (there's an example <a href="png.html"><b>here</b></a>). It WAS originally designed to be used with a context menu, hence it's part of the <i>OfficeExcel.core.context.js</i>
file.<br />
<i>File: OfficeExcel.common.context.js</i>
<br /><br />
</li>
<li>
<b>(number) OfficeExcel.getGutterSuggest(obj, data)</b><br />
This function returns a suggested gutter setting based on the vertical labels. If the bottom labels are larger, this
setting may be inappropriate. The <i>data</i> variable is a simple single dimension array, <i>eg [1,2,3,4,5]</i>.
<br />
<pre class="code">
var size = OfficeExcel.getGutterSuggest(obj, data);
obj.Set('chart.gutter.left', size);
</pre>
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) OfficeExcel.isOld()</b><br />
This function tests the useragent for MSIE 7 OR 8.<br />
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) OfficeExcel.isIE8()</b><br />
This function tests the useragent for MSIE8.<br />
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) OfficeExcel.isIE8up()</b><br />
This function tests the useragent for MSIE8 or higher.<br />
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) OfficeExcel.isIE9()</b><br />
This function tests the useragent for MSIE9.<br />
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) OfficeExcel.isIE9up()</b><br />
This function tests the useragent for MSIE9 or higher.<br />
<i>File: OfficeExcel.common.core.js</i>
<br /><br />
</li>
<li>
<b>(null) OfficeExcel.background.Draw(obj)</b><br />
This function is used by the Bar, Gantt, Line and Scatter chart to draw the chart background (but not the axes).
It is passed the chart object which it uses to get the properties it uses:<br /><br />
<div>
<div style="float: left">
<ul>
<li>chart.gutter</li>
<li>chart.variant</li>
<li>chart.text.size</li>
<li>chart.text.font</li>
<li>chart.title</li>
<li>chart.title.xaxis</li>
<li>chart.title.xaxis.pos</li>
<li>chart.title.yaxis</li>
<li>chart.title.yaxis.pos</li>
<li>chart.background.barcolor1</li>
<li>chart.background.grid</li>
<li>chart.background.grid.width</li>
</ul>
</div>
<div style="float: left">
<ul>
<li>chart.background.grid.autofit</li>
<li>chart.background.grid.autofit.numhlines</li>
<li>chart.background.grid.autofit.numvlines</li>
<li>chart.background.grid.autofit.align</li>
<li>chart.background.grid.hlines</li>
<li>chart.background.grid.vlines</li>
<li>chart.background.grid.hsize</li>
<li>chart.background.grid.vsize</li>
<li>chart.background.grid.color</li>
<li>chart.background.grid.border</li>
<li>chart.background.barcolor2</li>
</ul>
</div>
</div>
<br clear="all" />
<p>
Note that this function also calls OfficeExcel.DrawTitle() in order to draw the title.<br />
<i>File: OfficeExcel.common.core.js</i>
</p>
<br /><br />
</li>
</ul>
<a name="skeleton"></a>
<h4>The skeleton file</h4>
<p>
The skeleton object
(<a href="../libraries/OfficeExcel.skeleton.js" target="_blank"><i>OfficeExcel.skeleton.js</i></a>) gives you a base for creating new chart types that
match the OfficeExcel object system (eg getters, setters, OfficeExcel names etc). Example usage of the skeleton object would be:
</p>
<pre class="code">
&lt;script&gt;
var myObj = new OfficeExcel.Skeleton('cvs', [3,3,4,5,3,8,3,2,1,9]);
myObj.Set('chart.colors', ['red']);
myObj.Draw();
var colors = myObj.Get('chart.colors');
&lt;/script&gt;
</pre>
</body>
</html>

195
OfficeWeb/sdk/Common/Charts/docs/async.html
View file

@ -1,195 +0,0 @@
<!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>

878
OfficeWeb/sdk/Common/Charts/docs/bar.html
View file

@ -1,878 +0,0 @@
<!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>Documentaion about the OfficeExcel Bar chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="Documentation about the Bar chart including information on all the options available to you" />
<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>
<?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>
>
Bar charts
</div>
<h1>Bar <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">
// Some data that is to be shown on the bar chart. To show a stacked or grouped chart
// each number should be an array of further numbers instead.</span>
var data = [280,45,133];
<span class="javascript-comment">
// An example of the data used by stacked and grouped charts
// var data = [[1,5,6], [4,5,3], [7,8,9]]</span>
<span class="javascript-comment">
// Create the br chart. The arguments are the ID of the canvas tag and the data</span>
var bar = new OfficeExcel.Bar('myCanvas', data);
<span class="javascript-comment">
// Now configure the chart to appear as wanted by using the .Set() method.
// All available properties are listed below.</span>
bar.Set('chart.labels', ['Richard', 'Alex', 'Nick']);
bar.Set('chart.gutter.left', 45);
bar.Set('chart.background.barcolor1', 'white');
bar.Set('chart.background.barcolor2', 'white');
bar.Set('chart.background.grid', true);
bar.Set('chart.colors', ['red']);
<span class="javascript-comment">
// Now call the .Draw() method to draw the chart</span>
bar.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/bar.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the bar chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myBar.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#background">Background</a></li>
<li><a href="#axes">Axes properties</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="background"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a>
<b>chart.background.barcolor1</b><br />
The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.barcolor2"></a>
<b>chart.background.barcolor2</b><br />
The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.grid"></a>
<b>chart.background.grid</b><br />
Whether to show the background grid or not. <br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.color"></a>
<b>chart.background.grid.color</b><br />
The color of the background grid. <br /><i>Default: #ddd</i><br /><br />
<a name="chart.background.grid.hsize"></a>
<b>chart.background.grid.hsize</b><br />
The horizontal background grid size. <br /><i>Default: 40</i><br /><br />
<a name="chart.background.grid.vsize"></a>
<b>chart.background.grid.vsize</b><br />
The vertical background grid size. <br /><i>Default: 18</i><br /><br />
<a name="chart.background.grid.width"></a>
<b>chart.background.grid.width</b><br />
The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 1</i><br /><br />
<a name="chart.background.grid.border"></a>
<b>chart.background.grid.border</b><br />
Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.hlines"></a>
<b>chart.background.grid.hlines</b><br />
Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.vlines"></a>
<b>chart.background.grid.vlines</b><br />
Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit"></a>
<b>chart.background.grid.autofit</b><br />
Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br />
<i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit.numhlines"></a>
<b>chart.background.grid.autofit.numhlines</b><br />
When using autofit this allows you to specify how many horizontal grid lines you want. <br />
<i>Default: 5</i><br /><br />
<a name="chart.background.grid.autofit.numvlines"></a>
<b>chart.background.grid.autofit.numvlines</b><br />
When using autofit this allows you to specify how many vertical grid lines you want. <br />
<i>Default: 20</i><br /><br />
<a name="chart.background.grid.autofit.align"></a>
<b>chart.background.grid.autofit.align</b><br />
If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and OfficeExcel will
attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br />
<i>Default: false</i><br /><br />
<a name="chart.background.hbars"></a>
<b>chart.background.hbars</b><br />
An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: <i>myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br />
<a name="chart.background.image"></a>
<b>chart.background.image</b><br />
If you want to specify a background image to use on your chart, specify it with this property.<br />
<i>Default: null</i><br /><br />
<a name="chart.background.image.stretch"></a>
<b>chart.background.image.stretch</b><br />
By default your background image is stretched (if necessary) to cover the whole chart area (gutters not included).
If this is not what you want then set this property to false.<br />
<i>Default: true</i><br /><br />
<a name="chart.background.image.x"></a>
<b>chart.background.image.x</b><br />
The X position of the image. The coordinates are the top left corner of the image.<br />
<i>Default: null</i><br /><br />
<a name="chart.background.image.y"></a>
<b>chart.background.image.y</b><br />
The Y position of the image. The coordinates are the top left corner of the image.<br />
<i>Default: null</i><br /><br />
<a name="chart.background.image.align"></a>
<b>chart.background.image.align</b><br />
Instead of specifying the coordinates of the image, you can instead simply align it top, bottom, left or right.
Examples are:<br />
<ul>
<li>top left</li>
<li>bottom right</li>
<li>bottom</li>
<li>right</li>
</ul>
<i>Default: null</i><br /><br />
<a name="axes"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axes properties</h3>
<a name="chart.noaxes"></a>
<b>chart.noaxes</b><br />
Whether the axes are drawn<br />
<i>Default: false (the axes ARE drawn)</i><br /><br />
<a name="chart.noxaxis"></a>
<b>chart.noxaxis</b><br />
Whether the X axis is drawn<br />
<i>Default: false (the X axis IS drawn)</i><br /><br />
<a name="chart.noyaxis"></a>
<b>chart.noyaxis</b><br />
Whether the Y axis is drawn<br />
<i>Default: false (the Y axis IS drawn)</i><br /><br />
<a name="chart.noendxtick"></a>
<b>chart.noendxtick</b><br />
When you're combining the Bar and Line charts, you may want to use this property to stop the end X tick from
being drawn.<br />
<i>Default: false (the end tick IS drawn)</i><br /><br />
<a name="chart.numxticks"></a>
<b>chart.numxticks</b><br />
This controls the number of X tickmarks on the X axis.<br />
<i>Default: null</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
The color of the outline of the bars. <br />
<i>Default: #666</i><br /><br />
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of the colors of the actual bars. <br />
<i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br />
<a name="chart.colors.sequential"></a>
<b>chart.colors.sequential</b><br />
If true, for regular bar charts, (not stacked or grouped), the colors that you specify will be used in a sequential
fashion.<br />
<i>Default: false</i><br /><br />
<a name="chart.colors.reverse"></a>
<b>chart.colors.reverse</b><br />
If true, for stacked bar charts only, the colors that you specify will be used in a reverse order to what they are
normally.<br />
<i>Default: false</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.hmargin"></a>
<b>chart.hmargin</b><br />
The horizontal margin (in pixels) of the chart. The horizontal margin is on the inside of the axes.<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
<a name="chart.text.angle"></a>
<b>chart.text.angle</b><br />
The angle of the horizontal text labels (at the bottom of the chart). This can be one of three values - 0, 45 or 90.<br /><i>Default: 0 (Horizontal)</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br />
<a name="chart.labels.above"></a>
<b>chart.labels.above</b><br />
If true, values will be shown above the bars. For regular and stacked bar charts units are included, whereas for
grouped bar charts they're not (usually there isn't enough space for them).
<br /><i>Default: false</i><br /><br />
<a name="chart.labels.above.decimals"></a>
<b>chart.labels.above.decimals</b><br />
This stipulates how many decimals are used in the above bar labels.
<br /><i>Default: 0</i><br /><br />
<a name="chart.labels.above.size"></a>
<b>chart.labels.above.size</b><br />
The font size of the above bar labels. Useful if you only have a few bars.
<br /><i>Default: false</i><br /><br />
<a name="chart.labels.above.angle"></a>
<b>chart.labels.above.angle</b><br />
You can use this to angle the text shown above the bars. It can be anything from -90 to 90 (degrees).
<br /><i>Default: null</i><br /><br />
<a name="chart.labels.ingraph"></a>
<b>chart.labels.ingraph</b><br />
An array of labels for the chart which are drawn "inside" the chart. If you have 5 data points then this should have a corresponding number of elements, though there is a <a href="misc.html#shorthand.ingraph.labels">shorthand available</a>.<br /><i>Default: null</i><br /><br />
<a name="chart.ylabels"></a>
<b>chart.ylabels</b><br />
Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br />
<i>Default: true</i><br /><br />
<a name="chart.ylabels.count"></a>
<b>chart.ylabels.count</b><br />
A value that controls how many Y labels there are. Previously (prior to 8th August 2010) this could be 1,3,5.
Now it can be any number, but keep in mind that if you use this it may result in decimals.<br />
<i>Default: 5</i><br /><br />
<a name="chart.ylabels.specific"></a>
<b>chart.ylabels.specific</b><br />
You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High'].<br />
<i>Default: null</i><br /><br />
<a name="chart.xlabels.offset"></a>
<b>chart.xlabels.offset</b><br />
This allows you finer grained control over the X label positioning if you need it.<br /><i>Default: 0</i><br /><br />
<a name="chart.numyticks"></a>
<b>chart.numyticks</b><br />
The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match. <br /><i>Default: 10</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br />
<i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis"></a>
<b>chart.title.xaxis</b><br />
This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br />
<a name="chart.title.yaxis"></a>
<a name="chart.title.xaxis.size"></a>
<b>chart.title.xaxis.size</b><br />
This allows you to specify a size for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.font"></a>
<b>chart.title.xaxis.font</b><br />
This allows to specify a font for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.bold"></a>
<b>chart.title.xaxis.bold</b><br />
This controls whether the X axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.yaxis"></a>
<b>chart.title.yaxis</b><br />
This allows to specify a title for the Y axis.<br />
<i>Default: none</i><br /><br />
<a name="chart.title.yaxis.size"></a>
<b>chart.title.yaxis.size</b><br />
This allows you to specify a size for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.font"></a>
<b>chart.title.yaxis.font</b><br />
This allows to specify a font for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.bold"></a>
<b>chart.title.yaxis.bold</b><br />
This controls whether the Y axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.xaxis.pos"></a>
<b>chart.title.xaxis.pos</b><br />
This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
<a name="chart.title.yaxis.pos"></a>
<b>chart.title.yaxis.pos</b><br />
This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br />
<!--
<a name="chart.title.yaxis.position"></a>
<b>chart.title.yaxis.align</b><br />
Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br />
<i>Default: left</i><br /><br />
-->
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a drop shadow is applied. <br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /><i>Default: #666</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.formatter"></a>
<b>chart.scale.formatter</b><br />
To allow thoroughly custom formats of numbers in the scale, you can use this option to
specify a function that is used by OfficeExcel to format numbers. This function should
handle ALL of the formatting. Eg:<br /><br />
<pre class="code">
function myFormatter(obj, num)
{
return num + 'F'; // An example of formatting
}
myGraph.Set('chart.scale.formatter', myFormatter);
</pre>
<br /><i>Default: null</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the Y scale.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br />
<a name="chart.ymax"></a>
<b>chart.ymax</b><br />
The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br />
<a name="chart.ymin"></a>
<b>chart.ymin</b><br />
The optional minimum Y scale value. If not specified then it will be 0.<br /><i>Default: 0</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: null</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br />
<i>Default: onclick</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that.
There's more information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.tooltips.highlight"></a>
<b>chart.tooltips.highlight</b><br />
When combining chartss you will need to set this option to fase.<br />
<i>Default: true</i><br /><br />
<a name="chart.crosshairs"></a>
<b>chart.crosshairs</b><br />
If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br />
<a name="chart.crosshairs.linewidth"></a>
<b>chart.crosshairs.linewidth</b><br />
This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br />
<a name="chart.crosshairs.color"></a>
<b>chart.crosshairs.color</b><br />
The color of the crosshairs.<br /><i>Default: #333</i><br /><br />
<a name="chart.crosshairs.hlines"></a>
<b>chart.crosshairs.hlines</b><br />
This determines whether the horizontal crosshair is shown.<br />
<i>Default: true</i><br /><br />
<a name="chart.crosshairs.vlines"></a>
<b>chart.crosshairs.vlines</b><br />
This determines whether the vertical crosshair is shown.<br />
<i>Default: true</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="chart.adjustable"></a>
<b>chart.adjustable</b><br />
Defaulting to false, this determines whether your bar chart will be adjustable. <br /><i>Default: false</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>
<a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="chart.line"></a>
<b>chart.line</b><br />
Formerly a boolean, this now stipulates a line chart object which is to be drawn on top of the bar chart. You can see an example <a href="combine.html">here</a>.<br /><i>Default: null</i><br /><br />
<a name="chart.variant"></a>
<b>chart.variant</b><br />
This simply stipulates whether you want a regular bar chart, a dot chart, a pyramid chart a 3D chart, a sketch or a glassy chart. Possible values are:<ul><li>bar</li><li>dot</li><li>pyramid</li><li>arrow</li><li>3d</li><li>sketch</li><li>glass</li></ul>The pyramid, dot, arrow, sketch and glass variants are only effective for regular bar charts - not grouped or stacked charts.<br /><i>Default: bar</i><br /><br />
<a name="chart.xaxispos"></a>
<b>chart.xaxispos</b><br />
The position of the X axis. This can be <i>bottom</i>, <i>center</i> or <i>top</i>. <br />
<i>Default: bottom</i><br /><br />
<a name="chart.axis.color"></a>
<b>chart.axis.color</b><br />
The color of the axes.<br /><i>Default: black</i><br /><br />
<a name="chart.grouping"></a>
<b>chart.grouping</b><br />
How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br /><i>Default: grouped</i><br /><br />
</div>
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of:
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the bar</li>
<li>The height of the bar</li>
<li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li>
</ul>
An example usage is:
<pre class="code">
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.bar.js"&gt;&lt;/script&gt;
&lt;script&gt;
myGraph = new OfficeExcel.Bar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
myGraph.Draw();
OfficeExcel.Register(myGraph);
myGraph.canvas.onclick = function (e)
{
OfficeExcel.Redraw();
var canvas = e.target;
var context = canvas.getContext('2d');
var obj = canvas.__object__;
<span style="color: green">var coords = obj.getBar(e);</span>
if (coords) {
var top = coords[1];
var left = coords[2];
var width = coords[3];
var height = coords[4];
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'rgba(255,255,255,0.5)';
context.strokeRect(top, left, width, height);
context.fillRect(top, left, width, height);
context.stroke();
context.fill();
}
}
&lt;/script&gt;
</pre>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="getValue"></a>
<b>obj.getValue(mixed)</b>
<p>
This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use.
Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element
array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse
or coordinates are in the gutter areas. An example:
</p>
<pre class="code">
myChart.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
</pre>
</body>
</html>

64
OfficeWeb/sdk/Common/Charts/docs/basic.html
View file

@ -1,64 +0,0 @@
<!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>

107
OfficeWeb/sdk/Common/Charts/docs/basic_combined.html
View file

@ -1,107 +0,0 @@
<!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>

97
OfficeWeb/sdk/Common/Charts/docs/basic_events.html
View file

@ -1,97 +0,0 @@
<!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>

111
OfficeWeb/sdk/Common/Charts/docs/basic_tooltips.html
View file

@ -1,111 +0,0 @@
<!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>

446
OfficeWeb/sdk/Common/Charts/docs/bipolar.html
View file

@ -1,446 +0,0 @@
<!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>Documentation about the OfficeExcel Bi-polar chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs bipolar charts" />
<meta name="description" content="Documentation about the Bi-polar chart including details about all the available options" />
<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>
<?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>
>
Bi-polar charts
</div>
<h1>Bi-polar <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The Bipolar chart takes two arrays of data - one for the left side and one for the right.</span>
var left = [5,6,8,9,12,13,4,9];
var right = [5,8,4,11,15,26,13,16];
<span class="javascript-comment">// Create the Bi-polar object. Give the constructor the ID of the canvas tag along with
// the left sides data and the right sides data.</span>
var bipolar = new OfficeExcel.Bipolar('myBipolar', left, right);
<span class="javascript-comment">// Configure the Bipolar chart to appear as wished.</span>
bipolar.Set('chart.colors', ['#fff', '#eef', '#ddf', '#ccf', '#bbf', '#bbf', '#aaf', '#99f']);
bipolar.Set('chart.margin', 3);
bipolar.Set('chart.labels', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']);
bipolar.Set('chart.title.left', '2007');
bipolar.Set('chart.title.right', '2008');
bipolar.Set('chart.gutter.bottom', 45);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart</span>
bipolar.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/bipolar.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myBipolar.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels, text and axes">Labels, text and axes</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.center"></a>
<b>chart.gutter.center</b><br />
The center area of the chart that the labels sit in. If your labels are large then you may need to increase this.<br />
<i>Default: 60</i><br /><br />
<a name="chart.margin"></a>
<b>chart.margin</b><br />
The space above and below each bar. <br /><i>Default: 2</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<b>chart.title</b><br />
The main title of the chart.<br />
<i>Default: (An empty string)</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title"></a>
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.left"></a>
<b>chart.title.left</b><br />
The left title. <br /><i>Default: An empty string</i><br /><br />
<a name="chart.title.right"></a>
<b>chart.title.right</b><br />
The right title. <br /><i>Default: An empty string</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of colors. These too can be gradients that you make if you wish. <br />
<i>Default: ['#fcf', '#00f', '#f00', '#0f0', '#ff0', '#0ff', '#f0f', '#ff6101', '#b401ff', '#e4ff01', '#fb8195', '#ccc']</i><br /><br />
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
This is the color used as the stroke style. If you didn't want it, you could set this to <i>rgba(0,0,0,0)</i><br />
<i>Default: #333</i><br /><br />
<a name="labels, text and axes"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels, text and axes</h3> <a name="chart.xtickinterval"></a>
<b>chart.xtickinterval</b><br />
The X tick mark interval. <br /><i>Default: null</i><br /><br />
<a name="chart.axis.color"></a>
<b>chart.axis.color</b><br />
The color of the axes. <br /><i>Default: black</i><br /><br />
<a name="chart.xmax"></a>
<b>chart.xmax</b><br />
This allows you to set the maximum X value that the chart uses, instead of it being auto-generated.<br>
<i>Default: null</i></br><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the charts labels (they go in the middle). <br /><i>Default: null</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text used (in points). <br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a>
<a name="chart.scale.formatter"></a>
<b>chart.scale.formatter</b><br />
To allow thoroughly custom formats of numbers in the scale, you can use this option to
specify a function that is used by OfficeExcel to format numbers. This function should
handle ALL of the formatting. Eg:<br /><br />
<pre class="code">
function myFormatter(obj, num)
{
return num + 'F'; // An example of formatting
}
myGraph.Set('chart.scale.formatter', myFormatter);
</pre>
<br /><i>Default: null</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the Y scale.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.scale.round"></a>
<b>chart.scale.round</b><br />
Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
<i>Default: null</i><br /><br />
<b>chart.units.pre</b><br />
The units that are applied to the X axis labels (these are pre-pended to the number).<br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that are applied to the X axis labels (these are appended to the number).<br /><i>Default: none</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: An empty array</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. Cannot be used in conjunction with tooltips.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Turns the shadow on or off.<br /> <i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow.<br /> <i>Default: #666</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The horizontal offset of the shadow.<br /> <i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The vertical offset of the shadow. <br /> <i>Default: 3</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
How severe the blurring effect is for the shadow.<br /> <i>Default: 3</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.background"></a>
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
</div><!-- /DOCS --><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This method when used in an event will return the details of the bar that was clicked on moused over (if any). It returns:
</p>
<ul>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width</li>
<li>The height</li>
<li>The index of the bar (starting at 0)</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
</body>
</html>

169
OfficeWeb/sdk/Common/Charts/docs/bulk-discount.html
View file

@ -1,169 +0,0 @@
<!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>Information about the OfficeExcel bulk licensing discounts that are available</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs" />
<meta name="description" content="Information about the OfficeExcel bulk licensing discounts that are available" />
<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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<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>
>
Bulk discount
</div>
<h1>Bulk <span>licensing discount information</span></h1>
<p>
If you're a web developer or designer wanting to buy licenses for multiple clients, then buying them in bulk can be done by using the
"Buy now..." buttons below. The discounts are as follows:
</p>
<ul>
<li><a href="#15">15 licenses - 50% discount</a></li>
<li><a href="#10">10 licenses - 35% discount</a></li>
<li><a href="#5">5 licenses - 25% discount</a></li>
</ul>
<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>
<a name="15"></a>
<p>&nbsp;</p>
<h3>15 licenses with 50% discount</h3>
<fieldset>
Use one of these buy now buttons if you wish to purchase 15 OfficeExcel licenses with a 50% discount.
<div style="text-align: center">
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
<input name="item_name_1" type="hidden" value="OfficeExcel License" />
<input name="item_description_1" type="hidden" value="15 licenses for OfficeExcel: HTML5 Javascript charts library (50% discount)" />
<input name="item_quantity_1" type="hidden" value="1" />
<input name="item_price_1" type="hidden" value="592.50" />
<input name="item_currency_1" type="hidden" value="GBP" />
<input name="_charset_" type="hidden" value="utf-8" />
<input alt="" width="116" height="61" src="../images/buy.png" type="image" />
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="AVV9K73Y8UHGG">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal <20> The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</fieldset>
<p />
<a name="10"></a>
<p>&nbsp;</p>
<h3>10 licenses with 35% discount</h3>
<fieldset>
Use one of these buy now buttons if you wish to purchase 10 OfficeExcel licenses with a 35% discount.
<div style="text-align: center">
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
<input name="item_name_1" type="hidden" value="OfficeExcel License" />
<input name="item_description_1" type="hidden" value="10 licenses for OfficeExcel: HTML5 Javascript charts library (35% discount)" />
<input name="item_quantity_1" type="hidden" value="1" />
<input name="item_price_1" type="hidden" value="513.5" />
<input name="item_currency_1" type="hidden" value="GBP" />
<input name="_charset_" type="hidden" value="utf-8" />
<input alt="" width="116" height="61" src="../images/buy.png" type="image" />
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NJX94NZABJTSC">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal <20> The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</fieldset>
<p />
<a name="5"></a>
<p>&nbsp;</p>
<h3>5 licenses with 25% discount</h3>
<fieldset>
Use one of these buy now buttons if you wish to purchase 5 OfficeExcel licenses with a 25% discount.
<div style="text-align: center">
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
<input name="item_name_1" type="hidden" value="OfficeExcel License" />
<input name="item_description_1" type="hidden" value="5 licenses for OfficeExcel: HTML5 Javascript charts library (25% discount)" />
<input name="item_quantity_1" type="hidden" value="1" />
<input name="item_price_1" type="hidden" value="296.25" />
<input name="item_currency_1" type="hidden" value="GBP" />
<input name="_charset_" type="hidden" value="utf-8" />
<input alt="" width="116" height="61" src="../images/buy.png" type="image" />
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GHTH3WF8JWCE4">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal <20> The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</fieldset>
<p />
</body>
</html>

195
OfficeWeb/sdk/Common/Charts/docs/color.html
View file

@ -1,195 +0,0 @@
<!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>Information about HTML5 canvas color definitions</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs color" />
<meta name="description" content="Information about the different ways of specifying colors with HTML5 canvas" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A graph 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>
<?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>
>
About canvas color definitions
</div>
<h1>About <span>canvas color definitions</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>
You will probably want to know the different ways you can define a color. There are a few
ways which you can use, all of which are quite straight-forward.
</p>
<ul id="colors">
<li><a href="#named">Named colors</a></li>
<li><a href="#hex">Hex values</a></li>
<li><a href="#rgb">RGB values</a></li>
<li><a href="#rgba">RGBA values</a></li>
<li><a href="#hsl">HSL values</a></li>
<li><a href="#hsla">HSLA values</a></li>
<li><a href="#lgradients">Linear gradients</a></li>
<li><a href="#rgradients">Radial gradients</a></li>
<li><a href="#info">More information</a></li>
</ul>
<a name="named"></a>
<br />&nbsp;<br />
<h2>Named colors</h2>
<p>
The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg:
</p>
<pre class="code">myObject.Set('chart.colors', ['red', 'blue']);</pre>
<a name="hex"></a>
<br />&nbsp;<br />
<h2>Hex values</h2>
<p>
The next, is straight forward hex values like you can use in normal CSS. These consist of a hash sign,
followed by three or six hexadecimal characters. Eg:
</p>
<pre class="code">myObject.Set('chart.colors', ['#f00', '#0000ff']);</pre>
<a name="rgb"></a>
<br />&nbsp;<br />
<h2>RGB values</h2>
<p>
Also as used in CSS, RGB values are the same as what you can use in CSS. Eg:
</p>
<pre class="code">myObject.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)']);</pre>
<a name="rgba"></a>
<br />&nbsp;<br />
<h2>RGBA values</h2>
<p>
Probably new to most people, is rgba(). Similar to regular rgb() values, but with a fourth value that allows you to specify the
alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is
totally opaque (ie. you can't see through it). With a value of 1, rgba() acts exactly like rgb(). This example gives you red
and blue colors that are semi-transparent:
</p>
<pre class="code">myObject.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']);</pre>
<a name="hsl"></a>
<br />&nbsp;<br />
<h2>HSL() values</h2>
<p>
Also probably quite new to you, are hsl() values. Much like rgb(), but instead of red green and blue, it allows you to specify
the Hue, Saturation and Light values instead. For example:
</p>
<pre class="code">myObject.Set('chart.colors', ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']);</pre>
<a name="hsla"></a>
<br />&nbsp;<br />
<h2>HSLA() values</h2>
<p>
Much like rgb() and rgba(), hsl() has a corresponding hsla() version, which allows you to specify an alpha (transparency) value.
Eg:
</p>
<pre class="code">myObject.Set('chart.colors', ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']);</pre>
<a name="lgradients"></a>
<br />&nbsp;<br />
<h2>Linear gradients</h2>
<p>
Gradients can be used in place of color values. You can create a linear gradient like so:
</p>
<pre class="code">myGradient = myObject.context.createLinearGradient(0,0,0,250);
myGradient.addColorStop(0, 'red');
myGradient.addColorStop(1, 'blue');</pre>
<p>
This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical
gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient
in place of a regular color definition. Eg:
</p>
<pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
<a name="rgradients"></a>
<br />&nbsp;<br />
<h2>Radial gradients</h2>
<p>
Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg:
</p>
<pre class="code">myGradient = myObject.context.createRadialGradient(0,0,0,0,0,100);
myGradient.addColorStop(0, 'red');
myGradient.addColorStop(1, 'blue');
</pre>
<p>
Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates
of the end point, along with the radius. After it has been created, you can treat as you would a linear gradient:
</p>
<pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
<a name="info"></a>
<br />&nbsp;<br />
<h2>More information</h2>
<p>
You can read more about CSS3 color definitions <a href="http://www.w3.org/TR/css3-color/" target="_blank" rel="nofollow">here</a>.
</p>
</body>
</html>

438
OfficeWeb/sdk/Common/Charts/docs/combine.html
View file

@ -1,438 +0,0 @@
<!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>Information about combining the Bar and Line charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs combining" />
<meta name="description" content="Documentation about combining charts - eg the Bar chart and the Line 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>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<style>
div.OfficeExcel_tooltip div {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
}
div.OfficeExcel_tooltip div#green {
background-color: green;
}
div.OfficeExcel_tooltip div#red {
background-color: red;
}
div.OfficeExcel_tooltip div#gray {
background-color: #ccc;
}
</style>
<script>
function enlarge_tooltip_graph (e, title)
{
var bg = document.createElement('DIV');
bg.style.opacity = 0;
bg.style.position = 'fixed';
bg.style.left = 0;
bg.style.top = 0;
bg.style.width = '2000px';
bg.style.height = '2000px';
bg.style.backgroundColor = 'rgba(0,0,0,0.2)';
bg.style.zIndex = 32568;
bg.style.textAlign = 'center';
document.body.appendChild(bg);
var div = document.createElement('DIV');
div.style.position = 'relative';
div.style.backgroundColor = 'white';
div.style.top = '200px';
div.style.width = '300px'
div.style.height = '240px';
div.style.padding = '15px';
div.style.WebkitBorderRadius = '5px';
div.style.MozBorderRadius = '5px';
div.style.borderRadius = '5px';
div.style.left = ((document.body.clientWidth / 2) - 175) + 'px';
// Add standard box-shadow and -moz-box-shadow
div.style.WebkitBoxShadow = 'gray 0 0 25px';
div.style.MozBoxShadow = '0 0 25px gray';
div.style.boxShadow = '0 0 25px gray';
div.style.border = '1px black solid';
bg.appendChild(div);
var canvas = document.createElement('CANVAS');
canvas.width = 300;
canvas.height = 240;
canvas.id = 'big_pie';
div.appendChild(canvas);
bg.onmousedown = function (e)
{
this.style.display = 'none';
document.body.removeChild(this);
e.stopPropagation();
}
div.onmousedown = function (e)
{
e.stopPropagation();
}
var data = e.target.__object__.data;
var pie = new OfficeExcel.Pie('big_pie', data);
pie.Set('chart.align', 'left');
pie.Set('chart.colors', ['red','#3F3','#ccc']);
pie.Set('chart.key', ['Jane', 'Fred', 'John']);
pie.Set('chart.key.shadow', true);
pie.Set('chart.key.shadow.blur', 15);
pie.Set('chart.key.shadow.offsetx', 0);
pie.Set('chart.key.shadow.offsety', 0);
pie.Set('chart.key.shadow.color', 'gray');
pie.Set('chart.key.rounded', true);
pie.Set('chart.gutter.top', 2);
pie.Set('chart.gutter.bottom', 2);
pie.Set('chart.gutter.left', 2);
pie.Set('chart.gutter.right', 2);
pie.Draw();
setTimeout(function () {bg.style.opacity = 0.2;}, 50);
setTimeout(function () {bg.style.opacity = 0.4;}, 100);
setTimeout(function () {bg.style.opacity = 0.6;}, 150);
setTimeout(function () {bg.style.opacity = 0.8;}, 200);
setTimeout(function () {bg.style.opacity = 1;}, 250);
}
</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>
>
Combining charts
</div>
<h1>Combining <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>
<ul>
<li><a href="#barandline">Combining bar and line charts</a></li>
<li><a href="#combiningline">Combining Line charts</a></li>
</ul>
<a name="barandline"></a>
<h4>Combining bar and line charts</h4>
<canvas id="myCanvas" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
var bar = new OfficeExcel.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]);
bar.Set('chart.title', 'A bar/line/pie combination (tooltips)');
bar.Set('chart.ymax', 15);
bar.Set('chart.colors', ['#ccc', 'red', 'green']);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.key', ['John', 'Jane', 'Fred']);
bar.Set('chart.key.shadow', true);
bar.Set('chart.key.shadow.offsetx', 0);
bar.Set('chart.key.shadow.offsety', 0);
bar.Set('chart.key.shadow.blur', 10);
bar.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)');
bar.Set('chart.key.background', 'white');
bar.Set('chart.key.rounded', true);
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.background.grid.autofit.numvlines', 12);
bar.Set('chart.background.grid.autofit.numhlines', 5);
bar.Set('chart.gutter.bottom', 30);
bar.Set('chart.gutter.right', 5);
// Define the line first so that it can be added to the bar chart
var line = new OfficeExcel.Line('myCanvas', [1,3,4,3,2,1,4,5,2,3,8,8], [5,6,7,9,7,5,6,3,5,2,5,1]);
line.Set('chart.background.grid', false);
line.Set('chart.linewidth', 2);
line.Set('chart.colors', ['red', 'green']);
line.Set('chart.tickmarks', 'circle');
line.Set('chart.labels.ingraph', ['January',11,,'February']);
line.Set('chart.highlight.fill', 'black');
line.Set('chart.noaxes', true);
line.Set('chart.ylabels', false);
line.Set('chart.animation.unfold.x', true);
// This would all be done programmatically normally, and linked to the key, so that if you change a name in the key,
// it changes in all of the tooltips too
line.Set('chart.tooltips', [
'<b>January</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
'<b>February</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas> <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
'<b>March</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
'<b>April</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
'<b>May</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
'<b>June</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
'<b>July</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
'<b>Aug</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas> <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
'<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
'<b>October</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
'<b>November</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
'<b>December</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4',
'<b>January</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4',
'<b>February</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas> <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5',
'<b>March</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3',
'<b>April</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4',
'<b>May</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1',
'<b>June</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2',
'<b>July</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6',
'<b>August</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas> <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5',
'<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8',
'<b>October</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4',
'<b>November</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9',
'<b>December</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4'
]);
//line.Set('chart.tooltips.highlight', false);
// No need to call Draw() - the bar chart will do it
// Add a Line chart tooltip event that draws the tooltip Pie charts
OfficeExcel.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);
// Add the line chart to the bar chart
bar.Set('chart.line', line);
// Now use effects
bar.Draw();
//OfficeExcel.Effects.Fade.In(bar);
//OfficeExcel.Effects.Bar.Grow(bar);
//OfficeExcel.Effects.Line.Unfold(bar.Get('chart.line'));
/**
* This is the function that creates the tooltip charts
*/
function CreateTooltipGraph (obj)
{
// If the tooltip canvas doesn't exist, don't try to create the
// tooltip pie chart
if (!document.getElementById("__tooltip_canvas__")) {
return;
}
var index = OfficeExcel.Registry.Get('chart.tooltip').__index__;
var tooltip = obj.Get('chart.tooltips')[index];
var canvas = document.getElementById("__tooltip_canvas__");
// Extract the data for the obj.Get('chart.tooltips')[index]ie chart froim the tooltip
var jane_data = Number(tooltip.replace(/.*Jane: (\d+).*/, '$1'));
var fred_data = Number(tooltip.replace(/.*Fred: (\d+).*/, '$1'));
var john_data = Number(tooltip.replace(/.*John: (\d+).*/, '$1'));
var pie_data = [jane_data,fred_data,john_data];
// This data could be dynamic
var pie = new OfficeExcel.Pie('__tooltip_canvas__', [4,5,6]);
pie.Set('chart.gutter.top', 2);
pie.Set('chart.gutter.bottom', 2);
pie.Set('chart.gutter.left', 2);
pie.Set('chart.gutter.right', 2);
pie.Set('chart.colors', ['red','#3F3','#ccc']);
//pie.Draw();
OfficeExcel.Effects.Pie.Grow(pie);
document.getElementById("__tooltip_canvas__").style.cursor = 'pointer';
}
</script>
<p>
This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved.
</p>
<p>
If the values for the line and bar result in different Y scales you may need to specify the <i>chart.ymax</i> property for each chart
so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
</p>
<b>Tooltips</b>
<p>
You can have tooltips on the Line and Bar chart and you can now also have highlighting, as shown on the example.
The order in which you create the charts is also important, you must define the Bar chart first, and subsequently the Line
chart.
</p>
<h4>Update - 28th August 2011</h4>
<p>
You can now have tooltips on both the Line chart <b>and</b> the Bar chart, as is shown in the chart here. Keep in mind
that you will need to have highlighting turned off on both chart types - <i>chart.tooltips.highlight</i>.
</p>
<pre class="code">
&lt;script&gt;
line.Set('chart.tooltips.highlight', false);
bar.Set('chart.tooltips.highlight', false);
&lt;/script&gt;
</pre>
<p>
Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the
Bar chart, in the tooltips.
</p>
<a name="combiningline"></a>
<h4>Combining Line charts</h4>
<!-- This is the canvas that both the line charts use -->
<canvas id="myCanvas2" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
line2 = new OfficeExcel.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
line2.Set('chart.hmargin', 10);
line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
line2.Set('chart.linewidth', 3);
line2.Set('chart.shadow', true);
line2.Set('chart.shadow.offsetx', 2);
line2.Set('chart.shadow.offsety', 2);
line2.Set('chart.ymax', 65);
line2.Set('chart.units.post', 'l');
line2.Set('chart.noendxtick', true);
line2.Set('chart.title', 'An example of axes both sides');
line2.Set('chart.gutter.left', 55);
line2.Set('chart.gutter.right', 55);
line2.Set('chart.background.grid.autofit', true);
line2.Draw();
line3 = new OfficeExcel.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
line3.Set('chart.hmargin', 10);
line3.Set('chart.linewidth', 3);
line3.Set('chart.shadow', true);
line3.Set('chart.shadow.offsetx', 2);
line3.Set('chart.shadow.offsety', 2);
line3.Set('chart.yaxispos', 'right');
line3.Set('chart.gutter.left', 55);
line3.Set('chart.gutter.right', 55);
line3.Set('chart.noendxtick', true);
line3.Set('chart.background.grid', false);
line3.Set('chart.ymax', 100);
line3.Set('chart.colors', ['blue', 'red']);
line3.Set('chart.units.pre', '$');
line3.Set('chart.key', ['Cost', 'Volume']);
line3.Set('chart.key.background', 'rgba(255,255,255,0.8)');
line3.Draw();
</script>
<p>
Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should
be careful with this chart type as it can easily lead to confusion.
</p>
<p>
This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up
this chart is below.
</p>
<p>
The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines,
you can do this without combining any charts. <a href="../examples/line.html">See the line chart example page</a>
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function
{
line2 = new OfficeExcel.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
line2.Set('chart.hmargin', 10);
line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
line2.Set('chart.linewidth', 3);
line2.Set('chart.shadow', true);
line2.Set('chart.shadow.offsetx', 2);
line2.Set('chart.shadow.offsety', 2);
line2.Set('chart.ymax', 65);
line2.Set('chart.units.post', 'l');
line2.Set('chart.noxaxis', true);
line2.Set('chart.noendxtick', true);
line2.Set('chart.title', 'An example of axes both sides');
line2.Draw();
line3 = new OfficeExcel.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
line3.Set('chart.hmargin', 10);
line3.Set('chart.linewidth', 3);
line3.Set('chart.shadow', true);
line3.Set('chart.shadow.offsetx', 2);
line3.Set('chart.shadow.offsety', 2);
line3.Set('chart.yaxispos', 'right');
line3.Set('chart.noendxtick', true);
line3.Set('chart.background.grid', false);
line3.Set('chart.ymax', 65);
line3.Set('chart.colors', ['blue', 'red']);
line3.Set('chart.units.pre', '$');
line3.Set('chart.key', ['Cost', 'Volume']);
line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
line3.Draw();
}
&lt;/script&gt;
</pre>
</body>
</html>

350
OfficeWeb/sdk/Common/Charts/docs/context.html
View file

@ -1,350 +0,0 @@
<!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>Information about the custom context menus available in OfficeExcel</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs context menus" />
<meta name="description" content="Documentation about the custom context menus available in OfficeExcel" />
<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.context.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.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]-->
<!-- Contextmenu CSS classes -->
<style>
.OfficeExcel_contextmenu {
}
.OfficeExcel_contextmenu_background {
}
.OfficeExcel_contextmenu_item {
}
</style>
<?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>
>
Context menus
</div>
<h1>Context <span>menus</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="text-align: center; float: right">
<canvas id="myCanvas" width="500" height="200">[No canvas support]</canvas><br />
<small>(<a href="#mac">some browsers use a double left click</a>)</small>
</div>
<ul>
<li><a href="#what">What are context menus?</a></li>
<li><a href="#look">What do they look like?</a></li>
<li><a href="#multiple">Can I have multiple levels of menus?</a></li>
<li><a href="#define">How do I define context menus?</a></li>
<li><a href="#seperators">Can I have "separators"?</a></li>
<li><a href="#bypass">How do I bypass them?</a></li>
<li><a href="#getshape">How do I get the underlying shape that was clicked on?</a></li>
<li><a href="#use">What can I use them for?</a></li>
<li><a href="#mac">Context menus, Macs, Safari, Opera and MSIE 9</a></li>
<li><a href="#events">Related events</a></li>
</ul>
<a name="what"></a>
<br />&nbsp;<br />
<h3>What are context menus?</h3>
<p>
Context menus are what you see when you click your right mouse button. With OfficeExcel, you can specify custom menus
for your charts if you wish. This way you can define custom actions to be associated with menu items. Context menus are a
very easy way to extend the functionality of your charts, allowing you to associate presentation style functionality
with them.
</p>
<p>
<b>Important:</b> Opera does not allow you to customise the context menu, so with this browser you
should use the left mouse button on the chart, instead of the right.
</p>
<a name="look"></a>
<br />&nbsp;<br />
<h3>What do they look like?</h3>
<img src="../images/context.png" width="148" height="90" alt="An OfficeExcel context menu" style="float: right; margin-right: 200px; border: 2px dashed gray; margin-right: 280px" />
<p>
Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes
you need to use are <b>OfficeExcel_contextmenu_background</b>, <b>OfficeExcel_contextmenu</b> and <b>OfficeExcel_contextmenu_item</b>. Eg:
</p>
<br clear="all" />
<pre class="code">
&lt;style type="text/css"&gt;
.OfficeExcel_contextmenu {
}
.OfficeExcel_contextmenu_item {
}
.OfficeExcel_contextmenu_background {
}
&lt;/style&gt;</pre>
<p>
The "! important" is not necessary if you're not overriding a style that is set by the chart script. If you're having trouble,
it's a good idea to use it though.
</p>
<a name="multiple"></a>
<br />&nbsp;<br />
<h3>Can I have multiple levels of menus?</h3>
<p>
Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface.
This example defines a simple context menu:
</p>
<pre class="code">
bar.Set('chart.contextmenu', [
['Zoom', OfficeExcel.Zoom],
['Application', <span style="color: green">[['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]]</span> ],
null,
['Cancel', function () {}]
]);
</pre>
<p>
As you can see there could easily get to be a lot of arrays, so it may help you during development to structure your code by using
indentation.
</p>
<a name="define"></a>
<br />&nbsp;<br />
<h3>How do I define context menus?</h3>
<p>
Defining a context menu is quite a simple affair. Eg:
</p>
<pre class="code">
myBar.Set('chart.contextmenu', [
['Menu item 1', Callback1],
['Menu item 2', Callback2]
]);</pre>
<p>
As you can see, the value is a two dimension array. The second being an array consisting of a string which is used as the name of the
menu item, and a function object (NOT the function name as a string). The function object is the function called when the menu item is selected.
</p>
<a name="seperators"></a>
<br />&nbsp;<br />
<h3>Can I have "separators"?</h3>
<p>
Yes. Simply pass null instead of an array as your menu item. Eg:
</p>
<pre class="code">
myBar.Set('chart.contextmenu', [
['Menu item 1', Callback1],
null,
['Menu item 2', Callback2]
]);</pre>
<a name="bypass"></a>
<br />&nbsp;<br />
<h3>How do I bypass them?</h3>
<p>
If for any reason you wish to access the browsers own context menu, you can hold down your CTRL key on your keyboard when you
click, and the canvas context menu will be bypassed. Try it on the chart below by holding your CTRL key whilst right clicking.
</p>
<a name="getshape"></a>
<br />&nbsp;<br />
<canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<h3>How do I get the underlying shape that was clicked on?</h3>
<p>
In some circumstances you may want to know which bar/point/segment was right-clicked on when showing the context menu (if any).
In these cases you will find the pertinent information (the same as what you get from the various .get*() methods) on the
context menu object - which is held in the registry: <i>OfficeExcel.Registry.Get('chart.contextmenu').__shape__</i>. The example bar chart
shows it in action.
</p>
<pre class="code">
&lt;script&gt;
function myListener (obj)
{
p(OfficeExcel.Registry.Get('chart.contextmenu').__shape__)
}
OfficeExcel.AddCustomEventListener(myBar, 'oncontextmenu', myListener);
&lt;/script&gt;
</pre>
<a name="use"></a>
<br />&nbsp;<br />
<h3>What can I use them for?</h3>
<p>
Since the context menu items run Javascript functions when selected, you can use them for pretty much
anything you want. For example you could make a presentation system, with the context menu controlling which
chart is shown on the canvas, like the example above.
</p>
<a name="mac"></a>
<br />&nbsp;<br />
<h3>Context menus, Macs, Safari, Opera and MSIE 9</h3>
<p>
Mac Safari, Mac Firefox, Windows Safari and MSIE 9 (beta 1) can have trouble displaying the context menu. So for this reason, for these browsers,
the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so
this browser also uses a left mouse button double click to trigger the context menu.
</p>
<a name="events"></a>
<br />&nbsp;<br />
<h3>Related events</h3>
<p>
There are two context menu related events which you can utilise:
</p>
<ul>
<li><i>onbeforecontextmenu</i></li>
<li><i>oncontextmenu</i></li>
</ul>
<p>
As their names suggest, one fires before the contextmenu is shown, and one after. <b>Important:</b> Because of the
fading effect, it may seem that both events fire before the contextmenu is shown, however this is just due to the nature
of Javascript timers and the fact that alert()s will block them (pause them in effect).
</p>
<script>
/**
* Shows the bar chart
*/
function ShowGraphOne ()
{
OfficeExcel.Clear(document.getElementById('myCanvas'));
var bar = new OfficeExcel.Bar('myCanvas', [[45,15],[16,23],[52,12],[33,64],[34,54],[62,33],[66,23],[12,23],[12,53],[16,45],[26,43],[46,42],[41,41],[32,46]]);
bar.Set('chart.colors', ['#66f', '#f66']);
bar.Set('chart.title', 'Data represented on a bar chart (with context menu)');
bar.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
OfficeExcel.isOld() ? null : bar.Set('chart.contextmenu', [['Zoom in', OfficeExcel.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne], ['Line chart', ShowGraphTwo]]], null, ['Cancel', function () {}]]);
bar.Set('chart.grouping', 'grouped');
bar.Set('chart.zoom.hdir', 'left');
bar.Set('chart.zoom.vdir', 'center');
bar.Draw();
}
/**
* Show the line chart
*/
function ShowGraphTwo()
{
OfficeExcel.Clear(document.getElementById('myCanvas'));
var line = new OfficeExcel.Line('myCanvas', [15,23,12,64,54,33,23,23,53,45,43,42,41,46], [45,16,52,33,34,62,66,12,12,16,26,46,41,32]);
line.Set('chart.title', 'Data represented on a line chart (context menu)');
line.Set('chart.colors', ['#f66', '#66f']);
line.Set('chart.background.barcolor1', 'white');
line.Set('chart.background.barcolor2', 'white');
line.Set('chart.tickmarks', null);
line.Set('chart.linewidth', 3);
line.Set('chart.hmargin', 550 / 26);
line.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']);
OfficeExcel.isOld() ? null : line.Set('chart.contextmenu', [['Zoom in', OfficeExcel.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne],['Line chart', ShowGraphTwo]]], null,['Cancel', function () {}]]);
line.Set('chart.zoom.hdir', 'left');
line.Set('chart.zoom.vdir', 'center');
line.Draw();
}
/**
* Show the first chart
*/
window.onload = function ()
{
ShowGraphOne();
var myBar = new OfficeExcel.Bar('cvs', [54,52,64,84,72,65]);
myBar.Set('chart.labels', ['Fred','Rich','Dave','John','Kev','Lou']);
myBar.Set('chart.title', 'A chart showing the context menu .__shape__ property (context)');
OfficeExcel.isOld() ? null : myBar.Set('chart.contextmenu', [['A sample context menu item', function () {}]]);
myBar.Draw();
function myListener (obj)
{
p(OfficeExcel.Registry.Get('chart.contextmenu').__shape__)
}
OfficeExcel.AddCustomEventListener(myBar, 'oncontextmenu', myListener);
}
</script>
</body>
</html>

248
OfficeWeb/sdk/Common/Charts/docs/css.html
View file

@ -1,248 +0,0 @@
<!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>Information about the CSS classes that are available in OfficeExcel</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs css classes" />
<meta name="description" content="Documentation about the CSS classes that are available to you" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: HTML5 Javascript charts library" />
<meta property="og:description" content="A graph 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>
<style type="text/css">
li {
margin: 0 ! important;
}
li a {
text-decoration: none;
}
</style>
<?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>
>
Available CSS classes
</div>
<h1>Available <span>CSS classes</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>
This is information about the CSS classes available to you to allow you to customise the appearance of tooltips and
context menus.
</p>
<ul>
<li><a href="#OfficeExcel_png">OfficeExcel_png</a></li>
<li><a href="#OfficeExcel_palette">OfficeExcel_palette</a></li>
<li><a href="#OfficeExcel_tooltip">OfficeExcel_tooltip</a></li>
<li><a href="#OfficeExcel_contextmenu">OfficeExcel_contextmenu</a></li>
<li><a href="#OfficeExcel_contextmenu_item">OfficeExcel_contextmenu_item</a></li>
<li><a href="#OfficeExcel_contextmenu_background">OfficeExcel_contextmenu_background</a></li>
<li><a href="#OfficeExcel_zoom_window">OfficeExcel_zoom_window</a></li>
<li><a href="#OfficeExcel_zoomed_canvas">OfficeExcel_zoomed_canvas</a></li>
<li><a href="#OfficeExcel_zoomed_area">OfficeExcel_zoomed_area</a></li>
<li><a href="#ModalDialog_background">ModalDialog_background</a></li>
<li><a href="#ModalDialog_dialog">ModalDialog_dialog</a></li>
<li><a href="#ModalDialog_topbar">ModalDialog_topbar</a></li>
<li><a href="#example">An example usage</a></li>
<li><a href="#important">! important</a></li>
</ul>
<a name="OfficeExcel_png"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_png</h2>
<p>
This controls the appearance of the PNG image which is shown when you use the context menu option <i>OfficeExcel.showPNG()</i>.
</p>
<a name="OfficeExcel_palette"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_palette</h2>
<p>
This controls the appearance of the mini-palette that can be used with annotating.
</p>
<a name="OfficeExcel_tooltip"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_tooltip</h2>
<p>
This controls the appearance of tooltips. The default is to have them look like Windows tooltips.
</p>
<a name="OfficeExcel_contextmenu"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_contextmenu</h2>
<p>
This controls how context menus appear. The default is similar to the look that Windows XP has.
</p>
<a name="OfficeExcel_contextmenu_item"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_contextmenu_item</h2>
<p>
This controls how individual items on the context menu will appear, for example the default has roughly 25px padding-left
to accomodate the left bar.
</p>
<a name="OfficeExcel_contextmenu_background"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_contextmenu_background</h2>
<p>
This is the Windows XP style left vertical bar. By default this is light grey.
</p>
<a name="OfficeExcel_zoom_window"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_zoom_window</h2>
<p>
This is the class to use if you want to customise the mini-zoom window.
</p>
<a name="OfficeExcel_zoomed_canvas"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_zoomed_canvas</h2>
<p>
This is the class to use if you want to customise the full canvas zoom.
</p>
<a name="OfficeExcel_zoomed_area"></a>
<br />&nbsp;<br />
<h2>OfficeExcel_zoomed_area</h2>
<p>
This is the class to use if you want to customise the zoomed area.
</p>
<a name="ModalDialog_background"></a>
<br />&nbsp;<br />
<h2>ModalDialog_background</h2>
<p>
This class controls the dark semi-opaque background for the ModalDialog.
</p>
<a name="ModalDialog_dialog"></a>
<br />&nbsp;<br />
<h2>ModalDialog_dialog</h2>
<p>
This class controls the ModalDialog itself.
</p>
<a name="ModalDialog_topbar"></a>
<br />&nbsp;<br />
<h2>ModalDialog_topbar</h2>
<p>
This class controls the top bar for the ModalDialog. You could, for example, use the <i>display</i> CSS property to
hide this if you don't want it.
</p>
<a name="example"></a>
<br />&nbsp;<br />
<h2>Example usage</h2>
<p>
Here is an example of using the CSS classes. At the time of writing, some of the items here were only implemented in newer
web browsers:
</p>
<pre class="code">
&lt;style&gt;
.OfficeExcel_png {
}
.OfficeExcel_palette {
}
.OfficeExcel_tooltip {
}
.OfficeExcel_contextmenu {
}
.OfficeExcel_contextmenu_background {
}
.OfficeExcel_contextmenu_item {
}
.OfficeExcel_zoom_window {
}
.OfficeExcel_zoomed_canvas {
}
.OfficeExcel_zoomed_area {
}
.ModalDialog_background {
}
.ModalDialog_dialog {
}
.ModalDialog_topbar {
}
&lt;/style&gt;
</pre>
<a name="important"></a>
<br />&nbsp;<br />
<h2>! important</h2>
<p>
If you're attempting to override default styles, then because of the ordering (ie the script is setting the style AFTER
your own CSS) you may need to use the "! important" modifier, for example:
</p>
<pre class="code">
&lt;style&gt;
.OfficeExcel_tooltip {
background-color: white ! important;
}
&lt;/style&gt;
</pre>
</body>
</html>

180
OfficeWeb/sdk/Common/Charts/docs/domcontentloaded.html
View file

@ -1,180 +0,0 @@
<!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>Using the DOMContentLoaded event to create your chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs domcontentloaded" />
<meta name="description" content="An example of using OfficeExcel in conjunction with the new DOMContentLoaded event" />
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts and HTML5 canvas charts library" />
<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');
}
function myFunc ()
{
var line = new OfficeExcel.Line('cvs', [4,3,2,4,5,6,7,4,8,9]);
line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']);
line.Set('chart.hmargin', 5);
line.Set('chart.title', 'A demonstration of the DOMContentLoaded event');
line.Set('chart.title.vpos', 0.5);
line.Set('chart.tickmarks', 'circle');
line.Set('chart.linewidth', 1.01);
if (navigator.userAgent.indexOf('Chrome/6') == -1) {
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();
}
/**
* Install the function to the appropriate event
*/
if(window.addEventListener) {
window.addEventListener('DOMContentLoaded', myFunc, false);
} else if (!OfficeExcel.isOld()) {
document.attachEvent("onDOMContentLoaded", myFunc);
} else {
window.onload = function ()
{
myFunc();
}
}
// 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>
>
DOMContentLoaded event
</div>
<h1>DOMContentLoaded <span>example</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="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<p>
The DOMContentLoaded event is an extremely useful event and can make a big impact on the performance of your pages, hence this
example. The DOMContentLoaded event fires when the pages HTML and scripts have loaded, but not necessarily any images or CSS.
This can make a big improvement on the apparent speed of your page(s).
</p>
<p>
You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>,
and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>.
</p>
<br clear="all" />
<pre class="code">
function createGraph(func)
{
if(window.addEventListener) {
window.addEventListener('DOMContentLoaded', func, false);
} else {
document.attachEvent("onDOMContentLoaded", func);
}
}
</pre>
<h4>Browser support</h4>
<p>
The DOMContentLoaded event is supported by the following browsers:
</p>
<ul>
<li>Google Chrome</li>
<li><a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">Mozilla Firefox</a></li>
<li>Apple Safari</li>
<li>Opera ASA. Opera</li>
<li><a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">Microsoft Internet Explorer 9</a></li>
</ul>
<h4>See also</h4>
You might also be interested in <a href="async.html">asynchronous</a> chart creation as an alternative.
</body>
</html>

102
OfficeWeb/sdk/Common/Charts/docs/donut.html
View file

@ -1,102 +0,0 @@
<!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>Donut charts documentation - the Donut chart is now a variant of the Pie chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs donut charts" />
<meta name="description" content="The Donut chart is now a variant of the Pie chart" />
<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>
<?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>
>
Donut charts
</div>
<h1>Donut <span>charts documentation</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>
Donut charts were formerly separate charts, however it's now simply a variant of the Pie chart.
</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data to be shown on the Donut chart</span>
var data = [45,57,48,32];
<span class="javascript-comment">// Create the Donut chart (which is really a Pie chart).</span>
var donut = new OfficeExcel.Pie('myDonut', data);
<span class="javascript-comment">// Configure the Donut chart to look as wanted.</span>
donut.Set('chart.labels', ['Jan', 'Ben', 'Mark', 'Lucy']);
donut.Set('chart.linewidth', 5);
donut.Set('chart.strokestyle', 'white');
donut.Set('chart.tooltips', ['Jan', 'Ben', 'Mark', 'Lucy']);
<span class="javascript-comment">// Specify the variant, which turns the Pie chart into a Donut chart.</span>
donut.Set('chart.variant', 'donut');
<span class="javascript-comment">// Call the .Draw() method to draw the Donut chart</span>
donut.Draw();
}
&lt;/script&gt;
</pre>
<ul>
<li><a href="../examples/donut.html">Donut chart examples</a></li>
<li><a href="pie.html">Pie chart documentation</a></li>
</ul>
</body>
</html>

222
OfficeWeb/sdk/Common/Charts/docs/dynamic.html
View file

@ -1,222 +0,0 @@
<!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>Information about how you can update your charts dynamically</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs dynamic" />
<meta name="description" content="How you can update your charts dynamically using AJAX" />
<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="/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><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>
>
Updating your charts dynamically
</div>
<h1>Updating <span>your charts dynamically</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="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
window.onload = function (e)
{
d1 = [];
d2 = [];
l = 0;
// Pre-pad the arrays with 250 null values
for (var i=0; i<250; ++i) {
d1.push(null);
d2.push(null);
}
function getGraph(id, d1, d2)
{
var graph = new OfficeExcel.Line(id, d1, d2);
graph.Set('chart.xticks', 100);
graph.Set('chart.background.barcolor1', 'white');
graph.Set('chart.background.barcolor2', 'white');
graph.Set('chart.title.xaxis', 'Time >>>');
graph.Set('chart.title.yaxis', 'Bandwidth (MB/s)');
graph.Set('chart.title.vpos', 0.5);
graph.Set('chart.title', 'Bandwidth used by servers 1 and 2');
graph.Set('chart.title.yaxis.pos', 0.5);
graph.Set('chart.title.xaxis.pos', 0.5);
graph.Set('chart.filled', true);
graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
graph.Set('chart.linewidth', 1);
//graph.Set('chart.ylabels.inside', true);
graph.Set('chart.yaxispos', 'right');
graph.Set('chart.ymax', 20);
graph.Set('chart.xticks', 25);
return graph;
}
function drawGraph ()
{
OfficeExcel.Clear(document.getElementById("cvs"));
var graph = getGraph('cvs', d1, d2);
graph.Draw();
// Add some data to the data arrays
var r1 = OfficeExcel.random(7, 9);
var r2 = OfficeExcel.random(7, 10);
d1.push(r1);
d2.push(r2);
if (d1.length > 250) {
d1 = OfficeExcel.array_shift(d1);
d2 = OfficeExcel.array_shift(d2);
}
if (document.all && OfficeExcel.isIE8()) {
alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
} else {
setTimeout(drawGraph,25);
// This is an alternative to setTimeout() which uses the newer requestAnimationFrame() function
//OfficeExcel.Effects.UpdateCanvas(drawGraph);
}
}
drawGraph();
}
</script>
<p>
The example on the right shows a line chart that automatically updates itself every 25 milliseconds. An ideal
use for this could be showing a networks bandwidth usage, or a servers load value.
</p>
<p>
This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a
non-filled chart might be a better choice.
</p>
<p>
To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server,
or use <a href="index.html#ajax">AJAX</a> if you want the data stored client-side.
</p>
<p>
If you're refreshing the chart often, as it is here, refreshing the whole page probably isn't the best idea, so AJAX may be
the better choice.
</p>
<p>
Be careful of the data types you use to pass the data to OfficeExcel - you should use numbers to represent values, not strings.
</p>
<br clear="all" />
<pre class="code">
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script&gt;
d1 = [];
d2 = [];
// Pre-pad the arrays with 250 null values
for (var i=0; i&lt; 250; ++i) {
d1.push(null);
d2.push(null);
}
function getGraph(id, d1, d2)
{
var graph = new OfficeExcel.Line(id, d1, d2);
graph.Set('chart.background.barcolor1', 'white');
graph.Set('chart.background.barcolor2', 'white');
graph.Set('chart.title.xaxis', 'Time');
graph.Set('chart.filled', true);
graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
graph.Set('chart.linewidth', 3);
graph.Set('chart.ymax', 20);
graph.Set('chart.xticks', 25);
return graph;
}
function drawGraph (e)
{
// Clear the canvas and redraw the chart
OfficeExcel.Clear(document.getElementById("cvs"));
var graph = getGraph('cvs', d1, d2);
graph.Draw();
// Add some data to the data arrays
d1.push(OfficeExcel.random(5, 10));
d2.push(OfficeExcel.random(5, 10));
// Get rid of the first values of the arrays
if (d1.length > 250) {
d1 = OfficeExcel.array_shift(d1);
d2 = OfficeExcel.array_shift(d2);
}
setTimeout(drawGraph,25);
}
drawGraph();
&lt;/script&gt;
</pre>
</body>
</html>

1712
OfficeWeb/sdk/Common/Charts/docs/effects.html
View file

File diff suppressed because it is too large Load diff

566
OfficeWeb/sdk/Common/Charts/docs/events.html
View file

@ -1,566 +0,0 @@
<!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>Custom OfficeExcel events that are available to you</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs custom events" />
<meta name="description" content="Documentation about the custom OfficeExcel events that are available for you to use" />
<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.common.annotate.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.resizing.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.common.zoom.js" ></script>
<script src="../libraries/OfficeExcel.modaldialog.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.scatter.js" ></script>
<script>
window.onload = function (e)
{
var bar1 = new OfficeExcel.Bar('bar1', [1,2,3,5,9,7,8]);
bar1.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar1.Set('chart.tooltips', ['January','February','March','April','May','June','July']);
bar1.Set('chart.title', 'An example of the ontooltip event');
bar1.Draw();
OfficeExcel.AddCustomEventListener(bar1, 'ontooltip', function (obj) {alert('ontooltip event, showing tooltip with index: ' + OfficeExcel.Registry.Get('chart.tooltip').__index__);});
var bar2 = new OfficeExcel.Bar('bar2', [1,2,3,5,9,7,8]);
bar2.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar2.Set('chart.contextmenu', [['Cancel', function () {}]]);
bar2.Set('chart.title', 'An example of the oncontextmenu event');
bar2.Draw();
OfficeExcel.AddCustomEventListener(bar2, 'oncontextmenu', function (obj) {alert('oncontextmenu event fired');});
// Intentionally a global
bar3 = new OfficeExcel.Bar('bar3', [1,2,3,5,9,7,8]);
bar3.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar3.Set('chart.title', 'An example of the onbeforedraw event');
// Drawn when the button is clicked
OfficeExcel.AddCustomEventListener(bar3, 'onbeforedraw', function (obj) {alert('onbeforedraw event fired');});
// Intentionally a global
bar4 = new OfficeExcel.Bar('bar4', [1,2,3,5,9,7,8]);
bar4.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar4.Set('chart.title', 'An example of the ondraw event');
// Drawn when the button is clicked
OfficeExcel.AddCustomEventListener(bar4, 'ondraw', function (obj) {alert('ondraw event fired');});
var bar5 = new OfficeExcel.Bar('bar5', [1,2,3,5,9,7,8]);
bar5.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar5.Set('chart.title', 'An example of the onzoom event');
bar5.Set('chart.contextmenu', [['Zoom', OfficeExcel.Zoom]]);
bar5.Set('chart.zoom.vdir', 'center');
bar5.Draw();
OfficeExcel.AddCustomEventListener(bar5, 'onzoom', function (obj) {alert('onzoom event fired');});
var bar6 = new OfficeExcel.Bar('bar6', [1,2,3,5,9,7,8]);
bar6.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar6.Set('chart.title', 'An example of the onmodaldialog event');
bar6.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('modaldialog_login', 300);}]]);
bar6.Draw();
ModalDialog.AddCustomEventListener('onmodaldialog', function (obj) {alert('onmodaldialog event fired');});
var bar7 = new OfficeExcel.Bar('bar7', [1,2,3,5,9,7,8]);
bar7.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar7.Set('chart.title', 'The onresizebeforedraw event');
bar7.Set('chart.text.angle', 45);
bar7.Set('chart.resizable', true);
bar7.Set('chart.gutter.bottom', 60);
bar7.Draw();
OfficeExcel.AddCustomEventListener(bar7, 'onresizebeforedraw', function (obj)
{
alert('onresizebeforedraw event fired');
});
var bar8 = new OfficeExcel.Bar('bar8', [1,2,3,5,9,7,8]);
bar8.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar8.Set('chart.title', 'An example of the onresize event');
bar8.Set('chart.resizable', true);
bar8.Draw();
OfficeExcel.AddCustomEventListener(bar8, 'onresizebegin', function (obj){cl('onresizebegin event fired');});
OfficeExcel.AddCustomEventListener(bar8, 'onresize', function (obj){cl('onresize event fired');});
OfficeExcel.AddCustomEventListener(bar8, 'onresizeend', function (obj){cl('onresizeend event fired');});
var bar9 = new OfficeExcel.Bar('bar9', [1,2,3,5,9,7,8]);
bar9.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar9.Set('chart.title', 'An example of the onadjust event');
bar9.Set('chart.adjustable', true);
bar9.Draw();
OfficeExcel.AddCustomEventListener(bar9, 'onadjustbegin', function (obj){cl('The onadjuststart event fired');});
OfficeExcel.AddCustomEventListener(bar9, 'onadjust', function (obj){cl('The onadjust event fired');});
OfficeExcel.AddCustomEventListener(bar9, 'onadjustend', function (obj){cl('The onadjustend event fired');});
// Global on purpose
bar10 = new OfficeExcel.Bar('bar10', [1,2,3,5,9,7,8]);
bar10.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar10.Set('chart.title', 'An example of the onannotate event');
bar10.Set('chart.annotatable', true);
bar10.Set('chart.contextmenu', [['ShowPalette', OfficeExcel.Showpalette], ['Clear', function () {OfficeExcel.Clear(bar10.canvas); bar10.Draw();}]]);
bar10.Draw();
OfficeExcel.AddCustomEventListener(bar10, 'onannotatebegin', function (obj){cl('onannotatebegin event fired');});
OfficeExcel.AddCustomEventListener(bar10, 'onannotate', function (obj){cl('onannotate event fired');});
OfficeExcel.AddCustomEventListener(bar10, 'onannotateend', function (obj){cl('onannotateend event fired');});
OfficeExcel.AddCustomEventListener(bar10, 'onannotatecolor', function (obj) {cl('Changed annotate color: ' + obj.Get('chart.annotate.color'));});
OfficeExcel.AddCustomEventListener(bar10, 'onannotateclear', function (obj) {cl('Fired the annotation clear event');});
// Global on purpose
var bar11 = new OfficeExcel.Bar('bar11', [1,2,3,5,9,7,8]);
bar11.Set('chart.labels', ['January','February','March','April','May','June','July']);
bar11.Set('chart.title', 'The onbeforecontextmenu event');
bar11.Set('chart.contextmenu', [['A sample context menu item', null]]);
bar11.Draw();
OfficeExcel.AddCustomEventListener(bar11, 'onbeforecontextmenu', function (obj) {p('Fired the onbeforecontextmenu event)');});
//
// The oncrosshairs event
data = [[45,32]]
var scatter1 = new OfficeExcel.Scatter('scatter1', data);
scatter1.Set('chart.xmax', 90);
scatter1.Set('chart.labels', ['January','February','March']);
scatter1.Set('chart.crosshairs', true);
scatter1.Set('chart.crosshairs.coords', true);
scatter1.Set('chart.crosshairs.coords.labels.x', 'Day');
scatter1.Set('chart.crosshairs.coords.labels.y', 'Amount');
scatter1.Draw();
function myFunc (obj)
{
document.getElementById("crosshairs.out").value = obj.canvas.__crosshairs_x__ + ', ' + obj.canvas.__crosshairs_y__;
}
OfficeExcel.AddCustomEventListener(scatter1, 'oncrosshairs', myFunc);
}
</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>
>
Custom OfficeExcel events
</div>
<h1>Custom <span>OfficeExcel events</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>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li>
<a href="#available.events">Available events</a>
<ul>
<li><a href="#event.ontooltip">ontooltip</a></li>
<li><a href="#event.onbeforecontextmenu">onbeforecontextmenu</a></li>
<li><a href="#event.oncontextmenu">oncontextmenu</a></li>
<li><a href="#event.onbeforedraw">onbeforedraw</a></li>
<li><a href="#event.ondraw">ondraw</a></li>
<li><a href="#event.onzoom">onzoom</a></li>
<li><a href="#event.onmodaldialog">onmodaldialog</a></li>
<li><a href="#event.onresizebeforedraw">onresizebeforedraw</a></li>
<li><a href="#event.onresize">onresizebegin</a></li>
<li><a href="#event.onresize">onresize</a></li>
<li><a href="#event.onresize">onresizeend</a></li>
<li><a href="#event.onadjustbegin">onadjustbegin</a></li>
<li><a href="#event.onadjustbegin">onadjust</a></li>
<li><a href="#event.onadjustbegin">onadjustend</a></li>
<li><a href="#event.onannotatebegin">onannotatebegin</a></li>
<li><a href="#event.onannotatebegin">onannotate</a></li>
<li><a href="#event.onannotatebegin">onannotateend</a></li>
<li><a href="#event.onannotatebegin">onannotatecolor</a></li>
<li><a href="#event.onannotatebegin">onannotateclear</a></li>
<li><a href="#event.onclear">onclear</a></li>
<li><a href="#event.oncrosshairs">oncrosshairs</a></li>
</ul>
</li>
<li><a href="#removing.events">Removing events</a></li>
</ul>
<a name="introduction"></a>
<h4>Introduction</h4>
<p>
Custom events allow you to easily interact with and extend OfficeExcel for your own purposes. The list of available events is below,
as is an example of how to make use of them with the <i>OfficeExcel.AddCustomEventListener()</i> function. Event handler functions (ie your
functions) are passed a single parameter - the chart object. With this you can get references to the canvas and context. There's
an example of this below.
</p>
<pre class="code">&lt;script&gt;
window.onload = function ()
{
var line = new OfficeExcel.Line('myLine', [45,12,16,18,44,54,23,21,56]);
line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
line.Set('chart.hmargin', 5);
line.Set('chart.tickmarks', 'dot');
line.Draw();
<span style="color: green">/**
* This is the call to the OfficeExcel function that registers the event listener
*
* line: The chart object
* ontooltip: The name of the event
* myFunc: The function that handles the event
*/</span>
OfficeExcel.AddCustomEventListener(line, 'ontooltip', myFunc);
}
<span style="color: green">/**
* The function that is called when the ontooltip event fires. It is passed a single parameter - the chart object.
* With this you can get the ID and references to the canvas and context:
* o obj.id
* o obj.canvas
* o obj.context
*/</span>
function myFunc(obj)
{
var id = obj.id;
var canvas = obj.canvas;
var context = obj.context;
alert('This alert was triggered by the custom ontooltip event');
}
&lt;/script&gt;
</pre>
<a name="available.events"></a>
<h4>Available events</h4>
<p>
<a name="event.ontooltip"></a>
<canvas id="bar1" width="400" height="150" style="float: left">[No canvas support]</canvas>
<b>ontooltip</b><br />
This event fires immediately after a tooltip has been created. This event allows you to easily show charts in your tooltips (tooltip
effects that involve moving the tooltip, eg. <i>contract</i>, <i>expand</i> &amp; <i>snap</i>, will not function). You
can find the tooltip object in the OfficeExcel registry - <i>OfficeExcel.Registry.Get('chart.tooltip')</i>. Note that if you're testing and
using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to
avoid this you should use a function that doesn't block execution, eg the Firebug/WebKit function, <i>console.log()</i> (you can use the
<i>cl()</i> shortcut in OfficeExcel).
</p>
<br clear="all" />
<p>
<a name="event.onbeforecontextmenu"></a>
<canvas id="bar11" width="400" height="200" style="float: left">[No canvas support]</canvas>
<b>onbeforecontextmenu</b><br />
The onbeforecontextmenu event fires before the context menu is shown.
</p>
<br clear="all" />
<p>
<a name="event.oncontextmenu"></a>
<canvas id="bar2" width="400" height="150" style="float: left">[No canvas support]</canvas>
<b>oncontextmenu</b><br />
This event fires immediately after the OfficeExcel context menu is shown. If you want it, you can get at the context menu in the
OfficeExcel registry: <i>OfficeExcel.Registry.Get('chart.contextmenu')</i>
<br /><br />
<b>Important:</b> Like the <i>ontooltip</i> event, using <i>alert()</i> can
pause the fade in timers, so you might consider using the Firebug/Webkit <i>console.log</i> functions instead.
</p>
<br clear="all" />
<p>
<a name="event.onbeforedraw"></a>
<div style="float: left">
<canvas id="bar3" width="400" height="150" style="left">[No canvas support]</canvas><br />
<button onmousedown="bar3.Draw()" style="width: 400px">Draw chart</button>
</div>
<b>onbeforedraw</b><br />
Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method. Keep in mind
that since other charts may trigger the .Draw() method, this event can also be triggered by other charts.
</p>
<br clear="all" />
<p>
<a name="event.ondraw"></a>
<div style="float: left">
<canvas id="bar4" width="400" height="150" style="left">[No canvas support]</canvas><br />
<button onmousedown="bar4.Draw()" style="width: 400px">Draw chart</button>
</div>
<b>ondraw</b><br />
The ondraw event fires <i>after</i> the .Draw() method has run. Note that the interactive features of OfficeExcel may call the .Draw()
method multiple times - the zoom in area mode is a prime example.
A chart with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and
hence the ondraw event), whereas the ontooltip event only fires once.
<br /><br />
<b>Note:</b> The <i>ondraw</i> event is not only fired by its own chart,
but (if you're using tooltips for example), can also be fired by other charts on the page.
</p>
<br clear="all" />
<p>
<a name="event.onzoom"></a>
<canvas id="bar5" width="400" height="150" style="float: left">[No canvas support]</canvas>
<b>onzoom</b><br />
The onzoom event fires whenever the canvas is zoomed. When the zoom is in <i>area</i> and <i>canvas</i> modes this fires once,
but when in <i>thumbnail</i> mode this event is like the onmousemove event in that it fires whenever the mouse is moved.
</p>
<br clear="all" />
<p>
<a name="event.onmodaldialog"></a>
<canvas id="bar6" width="400" height="150" style="float: left">[No canvas support]</canvas>
<b>onmodaldialog</b><br />
The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event
may help you to keep your code tidy. This event is utilised slightly differently to the other events:
<br clear="all" />
<pre class="code">ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});</pre>
</p>
<br clear="all" />
<p>
<a name="event.onresizebeforedraw"></a>
<canvas id="bar7" width="400" height="200" style="float: left">[No canvas support]</canvas>
<b>onresizebeforedraw</b><br />
The onresizebeforedraw event was added when translating was necessary to reclaim wasted space, before the introduction
of independent gutters. This event is now no longer necessary to reposition the resize handle. It will still have an
effect though, so if you choose to upgrade then you should remove this from your configuration. The event isn't
planned to be removed, so if you wish to use it, you can.
</p>
<br clear="all" />
<p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
<b>Note:</b>
The annotation events send notifications to the console because using alert() would cause them to lock the window.
</p>
<p>
<a name="event.onresize"></a>
<canvas id="bar8" width="400" height="150" style="float: left">[No canvas support]</canvas>
<b>onresizebegin</b><br />
The onresizebegin event fires when a canvas is starting to be resized. It also fires when the canvas is reset to the original
size.<br /><br />
<b>onresize</b><br />
The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.<br /><br />
<b>onresizeend</b><br />
The onresizeend event fires when a canvas is ended resizing. It also fires when the canvas is reset to the original size.
</p>
<br clear="all" />
<p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
<b>Note:</b>
The adjusting events send notifications to the console because using alert() would cause them to lock the window.
</p>
<p>
<a name="event.onadjustbegin"></a>
<canvas id="bar9" width="400" height="200" style="float: left">[No canvas support]</canvas>
<b>onadjustbegin</b><br />
The onadjustbegin event fires once at the start of an adjusting process. It can be thought of as similar to
the onmousedown event as that's when it usually fires.
</p>
<br />
<p>
<a name="event.onadjust"></a>
<b>onadjust</b><br />
The onadjust event fires whenever one of the supported chart types is adjusted. It usually fires in conjunction with the
onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log())
whilst debugging.
</p>
<br />
<p>
<a name="event.onadjustend"></a>
<b>onadjustend</b><br />
The onadjustend event fires once at the end of an adjusting process. It can be thought of as similar to
the onmouseup event as that's when it usually fires.
</p>
<br clear="all" />
<p style="background-color: #ffa; border: 2px dashed #990; padding: 4px">
<b>Note:</b>
The annotation events send notifications to the console because using alert() would cause them to lock the window.
</p>
<p>
<a name="event.onannotatebegin"></a>
<canvas id="bar10" width="400" height="350" style="float: left">[No canvas support]</canvas>
<b>onannotatebegin</b><br />
The onannotatebegin event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event).
</p>
<p>
<a name="event.onannotate"></a>
<b>onannotate</b><br />
The onannotate event fires when the chart has been annotated. It fires during the annotate procedure.
</p>
<p>
<a name="event.onannotateend"></a>
<b>onannotateend</b><br />
The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event).
</p>
<p>
<a name="event.onannotatecolor"></a>
<b>onannotatecolor</b><br />
The onannotatecolor event fires when the annotation color has been changed using the OfficeExcel palette.
</p>
<p>
<a name="event.onannotateclear"></a>
<b>onannotateclear</b><br />
The onannotateclear event fires when the OfficeExcel annotation data has been cleared using the OfficeExcel.ClearAnnotations() API
function.
</p>
<p>
<a name="event.onclear"></a>
<b>onclear</b><br />
The onclear event fires when the function <i>OfficeExcel.Clear()</i> is called. If you use the <i>.Clear()</i>function inside the onclear event
handler, it will create a loop. Instead, you could use this function:
</p>
<pre class="code">
/**
* This function clears the canvas
*
* @param object obj The chart object
*/
function myClear(obj)
{
obj.context.beginPath();
obj.context.fillStyle = 'white';
obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20);
obj.context.fill();
}
</pre>
<a name="event.oncrosshairs"></a>
<p>
<b>oncrosshairs</b><br />
The oncrosshairs event fires when the crosshairs are moved. This event is very similar to the onmousemove event, but you can
guarantee that this event fires after the crosshairs have been repainted.
</p>
<div style="width: 400px; float: left">
<canvas id="scatter1" width="400" height="200">[No canvas support]</canvas>
<input type="text" id="crosshairs.out" style="width: 400px"/>
</div>
<br clear="all" />
<a name="removing.events"></a>
<h4>Removing events</h4>
<p>
In the case that you need to remove OfficeExcel event listeners, there are a few ways that you can do it. The API function
<i>OfficeExcel.RemoveCustomEventListener(obj, id)</i> can be used to remove a single event listener. This function
takes the chart object and the numerical ID (returned by <i>OfficeExcel.AddCustomEventListener()</i>) as its arguments.
<p />
There's
also the <i>OfficeExcel.RemoveAllCustomEventListeners()</i>, for easily removing all of the pertinent event listeners. This
function can either take no arguments at all, in which case ALL event listeners for ALL objects are removed. Or it can
also take an objects ID (the same id that you pass to the constructor), in which case the removal will be limited to
that object.
</p>
<!-- Login dialog -->
<div style="display: none" class="ModalDialog" id="modaldialog_login">
<b>Login to admin area</b><br /><br />
<table border="0">
<tr>
<td align="right">Email:</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="right"><input type="submit" value="Login &raquo;" /></td>
</tr>
</table>
<div style="font-size: 8pt; float: right"><a href="" onclick="ModalDialog.Hide(); return false">Dismiss</a></div>
</div>
</body>
</html>

337
OfficeWeb/sdk/Common/Charts/docs/external.html
View file

@ -1,337 +0,0 @@
<!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>Integrating OfficeExcel with external libraries</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs external libraries" />
<meta name="description" content="Documentation about integrating OfficeExcel with external libraries (such as the ModalDialog that now comes with OfficeExcel)" />
<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.modaldialog.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.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 ()
{
/**
* Draw the line chart
*/
var line = new OfficeExcel.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
line.Set('chart.background.barcolor1', 'white');
line.Set('chart.background.barcolor2', 'white');
line.Set('chart.tickmarks', null);
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offset', 2);
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.title', 'A line chart with context menu');
// This defines a context menu which shows the dialog. The commented out
// bit defines an onclick handler on the background, so that when you
// click it (the background), the dialog is hidden.
if (!OfficeExcel.isOld()) {
line.Set('chart.contextmenu', [
['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);/*ModalDialog.background.onclick = function () {ModalDialog.Close();};*/}],
null,
['Cancel', function () {}]
]);
}
line.Draw();
}
</script>
<style>
/*
* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
* override something which the scripts set, then because of the ordering you may need to use the "! important"
* modifier.
*/
.ModalDialog_background {
}
.ModalDialog_dialog {
-webkit-box-shadow: gray 0 0 15px ! important;
-moz-box-shadow: 0 0 15px gray ! important;
box-shadow: 0 0 15px gray ! important;
}
.ModalDialog_topbar {
}
</style>
<?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>
>
OfficeExcel &amp; external libraries
</div>
<h1>Integrating <span>OfficeExcel with external libraries</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>
<ul>
<li><a href="#msie">Note about Microsoft Internet Explorer and the ModalDialog</a></li>
<li><a href="#hiding">Hiding the ModalDialog</a></li>
<li><a href="#customising">Customising the ModalDialog</a></li>
<li><a href="#integration">ModalDialog integration</a></li>
<li><a href="#covering">Covering the scroll bars</a></li>
</ul>
<canvas id="myLine" width="400" height="200" style="float: right">[No canvas support]</canvas>
<p>
This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example
adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to
allow logging in to an admin area.
</p>
<p>
The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a
subsequent page loads that takes a few seconds.
</p>
<p>
The ModalDialog was originally an external library, however it's now part of the OfficeExcel package. It's also covered by the
OfficeExcel license - so if you have an <a href="licensing.html">OfficeExcel license</a>, then the ModalDialog is part of that.
</p>
<br /><br />
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;
&lt;script src="OfficeExcel.common.context.js"&gt;
&lt;script src="OfficeExcel.line.js"&gt;
&lt;script src="OfficeExcel.modaldialog.js"&gt;
&lt;script&gt;
window.onload = function ()
{
/**
* Draw the line chart
*/
var line = new OfficeExcel.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
line.Set('chart.background.barcolor1', 'white');
line.Set('chart.background.barcolor2', 'white');
line.Set('chart.tickmarks', null);
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offset', 2);
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.title', 'A line chart with context menu');
<span style="color: green">
// This defines a context menu which calls the given function. This function in turn shows the dialog
line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);
</span>
line.Draw();
}
&lt;/script&gt;
&lt;!-- This is the popup dialog--&gt;
&lt;div id="myDialog" class="modalDialog" style="display: none"&gt;
&lt;b&gt;Please login&lt;/b&gt;
&lt;p&gt;
&lt;table border="0"&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Email&lt;/td&gt;
&lt;td&gt;&lt;input type="text" size="20" name="email" style="width: 150px" />&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Password&lt;/td&gt;
&lt;td&gt;&lt;input type="password" size="20" name="password" style="width: 150px" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2" align="right"&gt;
&lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
&lt;input type="submit"
name="submit"
value="Login &raquo;"
onclick="alert('This is just an example'); event.stopPropagation()"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;!-- End of dialog --&gt;</pre>
<p>
If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the
&quot;css&quot; directory.
</p>
<a name="msie"></a>
<h3>Note about Microsoft Internet Explorer 8 and the ModalDialog</h3>
<p>
Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD
when using this browser. Eg:
</p>
<pre class="code">
&lt;!DOCTYPE html &gt;
</pre>
<a name="hiding"></a>
<h3>Hiding the ModalDialog</h3>
<p>
To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method:
</p>
<pre class="code">
&lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
</pre>
<a name="customising"></a>
<h3>Customising the ModalDialog</h3>
<p>
You can customise the appearance of the ModalDialog by using three CSS classes, which are documented <a href="css.html">here</a>.
This page customises the dialog slightly by changing the shadow X/Y offsets:
</p>
<pre class="code">
&lt;style&gt;
/*
* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
* override something which the scripts set, then because of the ordering you may need to use the "! important"
* modifier.
*/
/**
* This is the semi-opaque background
*/
.ModalDialog_background {
}
/**
* This is the dialog itself
*/
.ModalDialog_dialog {
-webkit-box-shadow: gray 0 0 15px ! important;
-moz-box-shadow: 0 0 15px gray ! important;
box-shadow: 0 0 15px gray ! important;
}
/**
* This is gray bar at the top of the dialog
*/
.ModalDialog_topbar {
}
&lt;/style&gt;
</pre>
<a name="integration"></a>
<h3>ModalDialog integration</h3>
<p>
To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is <b>ModalDialog.Show(id, width)</b>.
The <i>id</i> is the <i>id</i> of the layer to use. Only the <i>.innerHTML</i> is used, not the layer itself, so it can be hidden by
setting the display CSS <i>display</i> property to <i>none</i>. The <i>width</i> is a number which is used as the width of the dialog.
</p>
<p>
The only library needed for the ModalDialog to work is <i>OfficeExcel.modaldialog.js</i> - you do not need to use
<i>OfficeExcel.common.js</i>. This makes for far smaller download requirements.
</p>
<a name="covering"></a>
<h3>Covering the scroll bars</h3>
<p>
Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve
this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following
steps are involved:
</p>
<ol>
<li style="margin-top: 0">The index page of your website creates an IFRAME and sets it to cover the entire window.</li>
<li style="margin-top: 0">This IFRAME then loads the website.</li>
<li style="margin-top: 0">The DIV then covers the top-most window.</li></li>
</ol>
<p style="margin-bottom: 50px">
There is an example of this technique <a href="iframe-setup.html"><b>here</b></a>
</p>
<!-- This is the popup dialog-->
<div id="myDialog" class="modalDialog" 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>

140
OfficeWeb/sdk/Common/Charts/docs/financial.html
View file

@ -1,140 +0,0 @@
<!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 displaying financial data</title>
<meta name="keywords" content="OfficeExcel html5 canvas financial chart example" />
<meta name="description" content="An example of using the Scatter chart to show financial data" />
<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.jpg"/>
<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.scatter.js"></script>
<script src="../libraries/financial-data.js"></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<?php PrintAnalyticsCode() ?>
<script>
window.onload = function ()
{
var s = new OfficeExcel.Scatter('cvs', data);
s.Set('chart.ymin', 0.5);
s.Set('chart.ymax', 1);
s.Set('chart.xmin', Date.UTC(2007,0,1));
s.Set('chart.xmax', Date.UTC(2010,11,31));
s.Set('chart.labels', [ ['2007', Date.UTC(2007,0,1)],['2008', Date.UTC(2008,0,1)],['2009', Date.UTC(2009,0,1)],['2010', Date.UTC(2010,0,1)]]);
s.Set('chart.labels.specific.align', 'center');
s.Set('chart.tickmarks', null);
s.Set('chart.line', true);
s.Set('chart.line.colors', ['red']);
s.Set('chart.units.pre', '$');
s.Set('chart.gutter.left', 40);
s.Set('chart.title', 'Euro/Dollar exchange rate data over the past 4 years');
s.Set('chart.tooltips.effect', 'snap');
s.Set('chart.background.grid.autofit.numvlines', 16);
s.Set('chart.scale.decimals', 2);
s.Draw();
}
</script>
</head>
<body id="licensing">
<a name="top"></a>
<!-- 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>
>
Displaying financial data
</div>
<h1>Displaying <span>financial data</span></h1>
<canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<p>
OfficeExcel can be used to display financial information, as shown here. In this case the chart is showing exchange rate
information for the period 2008 - 2010.
</p>
<p>
Because the Line chart has no concept of an X axis scale, the Scatter chart with a connecting line is used to show the data.
</p>
<p>
<b>Note:</b>
If you don't have a lot of data then if you use a connecting line (as it is here) it may look jagged - particularly if
your data jumps from a high value to a low value or vice versa.
</p>
<p>
The chart uses data that is held in a separate file (because there's a lot of it). You can see this file here:
<a href="../libraries/financial-data.js">financial-data.js</a>
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
// The data variable is defined in the external file
var s = new OfficeExcel.Scatter('cvs', data);
s.Set('chart.ymin', 0.5);
s.Set('chart.xmin', Date.UTC(2007,0,1));
s.Set('chart.xmax', Date.UTC(2010,11,31));
s.Set('chart.labels', [ ['2007', Date.UTC(2007,0,1)],['2008', Date.UTC(2008,0,1)],['2009', Date.UTC(2009,0,1)],['2010', Date.UTC(2010,0,1)]]);
s.Set('chart.labels.specific.align', 'center');
s.Set('chart.tickmarks', null);
s.Set('chart.line', true);
s.Set('chart.line.colors', ['red']);
s.Set('chart.units.pre', '$');
s.Set('chart.gutter.left', 35);
s.Set('chart.title', 'Euro exchange rate data over the past 4 years');
s.Set('chart.tooltips.effect', 'snap');
s.Set('chart.background.grid.autofit.numvlines', 16);
s.Set('chart.scale.decimals', 2);
s.Draw();
}
&lt;/script&gt;
</pre>
</body>
</html>

297
OfficeWeb/sdk/Common/Charts/docs/fuel.html
View file

@ -1,297 +0,0 @@
<!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>Documentation about the Fuel Gauge</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs fuel gauge" />
<meta name="description" content="Documentation about the Fuel Gauge including information on all the options available to you" />
<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>
<?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>
>
Fuel Gauge
</div>
<h1>Fuel <span>Gauge documentation</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 Fuel gauge is recent addition to OfficeExcel, and the available configuration options are shown here.
</p>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Fuel chart. The arguments are: the minimum, the maximum, and the value.</span>
fuel = new OfficeExcel.Fuel('cvs', 0, 100, 67);
<span class="javascript-comment">// Configure the Fuel chart to appear as wanted.</span>
fuel.Set('chart.needle.color', 'blue');
fuel.Set('chart.colors', ['#ddf']);
fuel.Set('chart.labels.empty', 'Empty!');
fuel.Set('chart.labels.full', 'Full');
fuel.Set('chart.icon', '/images/water.jpg');
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
fuel.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/fuel.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Fuel Gauge apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myFuel.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#colors">Colors</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#needle">Needle options</a></li>
<li><a href="#labels">Labels and text</a></li>
<li><a href="#interactive">Interactive features</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
<div>
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
The color of the Fuel Gauge. Noe that despite there being only one color, this is still an array.<br />
<i>Default: ['red']</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 5</i><br /><br />
<a name="needle"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle options</h3>
<a name="chart.needle.color"></a>
<b>chart.needle.color</b><br />
The color of the needle (not including the bulb at the bottom). Note that this is NOT an array - it's just a string.<br />
<i>Default: 'red'</i><br /><br />
<a name="labels"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
<a name="chart.labels.empty"></a>
<b>chart.labels.empty</b><br />
The label used as the empty text.<br />
<i>Default: E</i><br /><br />
<a name="chart.labels.full"></a>
<b>chart.labels.full</b><br />
The label used as the full text.<br />
<i>Default: F</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color used for the text on the chart.<br />
<i>Default: F</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used for the text.<br />
<i>Default: Verdana</i><br /><br />
<a name="interactive"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
The context menu. For more details see <a href="context.html">here</a>.<br />
<i>Default: null</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br />
<i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br />
<i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>
<a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br />
<i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br />
<i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br />
<i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br />
<i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br />
<i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br />
<i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br />
<i>Default: true</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.icon"></a>
<b>chart.icon</b><br />
This should be a data: URL that represents the image to use as the icon on the chart. The
<a href="../examples/fuel.html">example page</a> has an example of a chart that uses this option to show a
water droplet instead of the fuel pump.<br />
<i>Default: [A fuel icon]</i><br /><br />
</div>
</body>
</html>

451
OfficeWeb/sdk/Common/Charts/docs/funnel.html
View file

@ -1,451 +0,0 @@
<!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>Documentation about the Funnel chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs funnel charts" />
<meta name="description" content="Documentation about the Funnel chart including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
Funnel charts
</div>
<h1>Funnel <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Funnel chart. Note the the values start at the maximum and decrease to the minimum.</span>
var funnel = new OfficeExcel.Funnel('funnel1', [100,45,45,26,21,5]);
<span class="javascript-comment">// Configure the chart to look as wished.</span>
funnel.Set('chart.text.boxed', false);
funnel.Set('chart.title', 'Leads through to sales');
funnel.Set('chart.labels', ['A', 'B', 'C', 'D', 'E', 'F']);
funnel.Set('chart.shadow', true);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
funnel.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/funnel.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Funnel chart appears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myFunnel.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a>
<b>chart.colors</b><br />
These are the colors used for each segment.<br /><i>Default: ['red', 'green', 'gray', 'blue', 'black', 'white']</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
<a name="chart.text.boxed"></a>
<b>chart.text.boxed</b><br />
Whether the text is contained within a white bounding box. In some cases this can help readability.<br /><i>Default: true</i><br /><br />
<a name="chart.text.halign"></a>
<b>chart.text.halign</b><br />
The horizontal alignment of the text. Can be <i>center</i> or <i>left</i>.<br /><i>Default: left</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br /><i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a drop shadow is applied to the Funnel chart. The funnel is the first to use the canvas shadow API, and as such they won't be supported on all browsers. Currently only Safari 4+ (possibly earlier versions too), Firefox 3.5+ and Chrome 2+ support canvas shadows.<br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the drop shadow.<br /><i>Default: #666</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow.<br /><i>Default: 3</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array of tooltips for the Funnel chart segments.<br /><i>Default: null</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect that tooltips use - <i>fade</i> or <i>expand</i><br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.<br />
<i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.<br />
<i>Default: rgba(255,255,255,0.5)</i><br /><br />
</div><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getSegment"></a>
<b>obj.getSegment(event)</b><br /><br />
<p>
This function when passed an event object will return details of the appropriate segment (if any). It returns:
</p>
<ul>
<li>The chart object</li>
<li>
An array of 8 numbers (ie 4 coordinates) that describe the segment. The coordinates are the top left corner,
the top right corner, the bottom right corner nd the bottom left corner. ie Clockwise starting at the top left.
</li>
<li>The index of the segment, starting at the top (which is zero) and going down.</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
</body>
</html>

551
OfficeWeb/sdk/Common/Charts/docs/gantt.html
View file

@ -1,551 +0,0 @@
<!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>Documentation about the Gantt chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs gantt charts" />
<meta name="description" content="Documentation about Gantt charts including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
Gantt charts
</div>
<h1>Gantt <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#events">Adding events to your Gantt charts</a></li>
<li><a href="#vbars">Adding vertical bars to your Gantt charts</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Gantt chart. Note that unlike other OfficeExcel charts the actual data is NOT
// given as part of the constructor.</span>
var gantt = new OfficeExcel.Gantt('gantt');
<span class="javascript-comment"></span>// Configure the chart to appear as you want.
gantt.Set('chart.xmax', 365);
gantt.Set('chart.gutter.left', 75);
gantt.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
gantt.Set('chart.title', 'Holiday schedule for Xyz Ltd');
gantt.Set('chart.defaultcolor', 'rgba(255,0,0,1)');
gantt.Set('chart.tooltips', ["&lt;b&gt;Richard&lt;/b&gt;&lt;br /&gt;Richard is going on holiday to Malta.&lt;br /&gt;He'll be away for 28 days.",
"&lt;b&gt;Fred&lt;/b&gt;&lt;br /&gt;Fred is also going away for 28 days",
"&lt;b&gt;Barney&lt;/b&gt;&lt;br /&gt;Barney is off work for two weeks",
"&lt;b&gt;Gloria&lt;/b&gt;&lt;br /&gt;Gloria is off for 3 weeks",
"&lt;b&gt;Paul&lt;/b&gt;&lt;br /&gt; Away for 31 days",
"&lt;b&gt;Harry&lt;/b&gt;&lt;br /&gt;Away for three weeks",
"&lt;b&gt;Shane&lt;/b&gt;&lt;br /&gt;Away for one week",
"&lt;b&gt;Barry&lt;/b&gt;&lt;br /&gt;Away for two weeks",
"&lt;b&gt;Cynthia&lt;/b&gt;&lt;br /&gt;Away for two weeks",
"&lt;b&gt;Graham&lt;/b&gt;&lt;br /&gt;Away for August and September",
"&lt;b&gt;Paul&lt;/b&gt;&lt;br /&gt;Away for 31 days"]);
<span class="javascript-comment">// This is where the events that appear on the Gantt chart are given. You can read about the
// format <a href="#events">below</a>.</span>
gantt.Set('chart.events', [
[31, 28, null, 'Richard'],
[31, 28, null, 'Fred'],
[59, 14, null, 'Barney'],
[59, 21, null, 'Gloria'],
[59, 31, null, 'Paul'],
[80, 21, null, 'Harry'],
[94, 7, null, 'Shane'],
[120, 14, null, 'Barry'],
[130, 14, null, 'Cynthia'],
[211, 61, null, 'Graham'],
[334, 31, null, 'Paul']
]);
gantt.Set('chart.vbars', [
[0, 31, 'rgba(192,255,192,0.5)'],
[59, 31, 'rgba(192,255,192,0.5)'],
[120, 31, 'rgba(192,255,192,0.5)'],
[181, 31, 'rgba(192,255,192,0.5)'],
[243, 30, 'rgba(192,255,192,0.5)'],
[304, 30, 'rgba(192,255,192,0.5)']
]);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
gantt.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/gantt.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the bar chart apears.
</p>
<ul>
<li><a href="#chart configuration">Chart configuration</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="chart configuration"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3>
<a name="chart.xmax"></a>
<b>chart.xmax</b><br />
Required. This determines how many "units" wide the Gantt chart is. For example to represent a year, you would use 365, giving
a granularity of one day.<br />
<i>Default: none</i><br /><br />
<a name="chart.xmin"></a>
<b>chart.xmin</b><br />
This option can sometimes make using a Gantt chart spread over several pages easier.<br />
<i>Default: 0</i><br /><br />
<a name="background"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a>
<b>chart.background.barcolor1</b><br />
Color of the background bars<br /><i>Default: white</i><br /><br />
<a name="chart.background.barcolor2"></a>
<b>chart.background.barcolor2</b><br />
Color of the background bars<br /><i>Default: white</i><br /><br />
<a name="chart.background.grid"></a>
<b>chart.background.grid</b><br />
Whether a grid is shown as part of the background<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.color"></a>
<b>chart.background.grid.color</b><br />
The color of the background grid.<br /><i>Default: #eee</i><br /><br />
<a name="chart.background.grid.hsize"></a>
<b>chart.background.grid.hsize</b><br />
The size of the horizontal grid.<br /><i>Default: 20</i><br /><br />
<a name="chart.background.grid.vsize"></a>
<b>chart.background.grid.vsize</b><br />
The size of the vertical grid.<br /><i>Default: 20</i><br /><br />
<a name="chart.background.grid.width"></a>
<b>chart.background.grid.width</b><br />
The line width of the background grid.<br /><i>Default: 1</i><br /><br />
<a name="chart.background.grid.autofit"></a>
<b>chart.background.grid.autofit</b><br />
Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br />
<i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit.numhlines"></a>
<b>chart.background.grid.autofit.numhlines</b><br />
When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br />
<a name="chart.background.grid.autofit.numvlines"></a>
<b>chart.background.grid.autofit.numvlines</b><br />
When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 75</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points).<br />
<i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br />
<i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br />
<i>Default: black</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the labels which are applied to the chart.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.labels.align"></a>
<b>chart.labels.align</b><br />
This determines whether the horizontal labels are drawn at the <i>top</i> (underneath the title)
or at the <i>bottom</i> (in the bottom gutter).<br />
<i>Default: top</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart.<br /><i>Default: not set</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array of tooltips that are shown when the bars are clicked. They can contain HTML.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br />
<i>Default: onclick</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br />
<i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br />
<i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's
more information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. Cannot be used in conjunction with tooltips.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="chart.borders"></a>
<b>chart.borders</b><br />
Whether a border is shown on the event bars<br /><i>Default: true</i><br /><br />
<a name="chart.defaultcolor"></a>
<b>chart.defaultcolor</b><br />
The default color of bars. If you don't specify a color for the event, this will be used.<br /><i>Default: white</i><br /><br />
<a name="chart.events"></a>
<b>chart.events</b><br />
An array of event information that is displayed on the gantt. See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.vbars"></a>
<b>chart.vbars</b><br />
Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br />
</div><!-- /DOCS --><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This method returns the details of a focused bar (ie clicked or mouseover'ed. It returns:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the bar</li>
<li>The height of the bar</li>
<li>The index of the bar (starting from 0)</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="events"></a>
<p>&nbsp;</p>
<h2>Adding events to your Gantt chart</h2>
<p>
To add events, you specify them using the <i>chart.events</i> property. You could use the following to set some events on your gantt chart:
</p>
<pre class="code">gantt.Set('chart.events', [
[31, 28, 75, 'Richard'],
[12, 28, 67, 'Fred'],
[59, 14, 0, 'Barney'],
[59, 21, 5, 'Gloria'],
[46, 31, 94, 'Paul'],
[80, 21, 46, 'Harry'],
[94, 17, 84, 'Shane'],
[34, 14, 32, 'Barry'],
[64, 14, 28, 'Cynthia', 'red', 'yellow'],
[13, 61, 74, 'Graham'],
[84, 31, 16, 'Paul']
]);
</pre>
<p>
The first value is the (zero indexed) start number relative to your <i>chart.xmax</i>. So if you have set your <i>chart.xmax</i> to 62, (to represent
two months), and this value is 31, the start will be the start of the second month. In this case you could give two labels -
<i>['July', 'August']</i>.
</p>
<p>
The second value is the duration. So using the previous example, if you set this to 7, you would have an event lasting a week.
</p>
<p>
The third value is the "percentage complete" indicator. This is shown to the right of the event, and is optional - you can
specify <i>null</i> if you wish.
</p>
<p>
The fourth value is the label that is used on the left hand side.
</p>
<p>
The optional fifth value stipulates the background colour that the bar is. Default is white.
</p>
<p>
The optional sixth value is the foreground color of the bar. Defaulting to #0c0.
</p>
<p>
The optional seventh value is the border color, defaulting to black
</p>
<p>
And the optional eigth value is the numerical linewidth of the border. The default is 1.
</p>
<a name="vbars"></a>
<p>&nbsp;</p>
<h2>Adding vertical bars to your Gantt chart</h2>
<p>
You can add decorative vertical bars like so:
</p>
<pre class="code">gantt.Set('chart.vbars', [
[0, 31, 'rgba(192,255,192,0.5)'],
[59, 31, 'rgba(192,255,192,0.5)'],
[120, 31, 'rgba(192,255,192,0.5)'],
[181, 31, 'rgba(192,255,192,0.5)'],
[243, 30, 'rgba(192,255,192,0.5)'],
[304, 30, 'rgba(192,255,192,0.5)'],
]);
</pre>
<p>
You can use these for decorative purposes, or to mark events/limits. The first value is the start index, as above.
The second value is the unit length, again as above. The third value is the color of the vertical bar.
</p>
</body>
</html>

336
OfficeWeb/sdk/Common/Charts/docs/gauge.html
View file

@ -1,336 +0,0 @@
<!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>Documentation about the Gauge chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs gauge charts" />
<meta name="description" content="Documentation about Gauge charts including information on all the options available to you" />
<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>
<?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>
>
Gauge charts
</div>
<h1>Gauge <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the chart. The values are: the canvas tag ID, the minimum, the maximum and the actual value.</span>
var gauge = new OfficeExcel.Gauge('cvs', 0, 100, 46);
<span class="javascript-comment">// Configure the chart to appear as wished</span>
gauge.Set('chart.title', 'Bandwidth');
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
gauge.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/gauge.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Gauge chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myGauge.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#needle">Needle</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart.<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart.<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart.<br />
<i>Default: 5</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart.<br />
<i>Default: 5</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font that is used for the text.<br />
<i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the text.<br />
<i>Default: #666</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text<br />
<i>Default: 10</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title.top"></a>
<b>chart.title.top</b><br />
The top title of the chart, if any. <br />
<i>Default: (An empty string)</i><br /><br />
<a name="chart.title.top.font"></a>
<b>chart.title.top.font</b><br />
The font that the top title is rendered in. If not specified the chart.text.font setting is used (usually Arial)<br />
<i>Default: Arial</i><br /><br />
<a name="chart.title.top.size"></a>
<b>chart.title.top.size</b><br />
The size of the top title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: 14</i><br /><br />
<a name="chart.title.top.bold"></a>
<b>chart.title.top.bold</b><br />
Whether the top title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.top.color"></a>
<b>chart.title.top.color</b><br />
The color that the top title is rendered in.<br />
<i>Default: #333</i><br /><br />
<a name="chart.title.top.pos"></a>
<b>chart.title.top.pos</b><br />
If set this number is multiplied with the radius to give the Y position of the title. This allows to totally
override the Y position of the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bottom"></a>
<b>chart.title.bottom</b><br />
The bottom title of the chart, if any. <br />
<i>Default: (An empty string)</i><br /><br />
<a name="chart.title.bottom.font"></a>
<b>chart.title.bottom.font</b><br />
The font that the bottom title is rendered in. If not specified the chart.text.font setting is used (usually Arial)<br />
<i>Default: Arial</i><br /><br />
<a name="chart.title.bottom.size"></a>
<b>chart.title.bottom.size</b><br />
The size of the bottom title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: 14</i><br /><br />
<a name="chart.title.bottom.bold"></a>
<b>chart.title.bottom.bold</b><br />
Whether the bottom title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.bottom.color"></a>
<b>chart.title.bottom.color</b><br />
The color that the bottom title is rendered in.<br />
<i>Default: #333</i><br /><br />
<a name="chart.title.bottom.pos"></a>
<b>chart.title.bottom.pos</b><br />
If set this number is multiplied with the radius to give the Y position of the title. This allows to totally
override the Y position of the title.<br />
<i>Default: null</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the Y scale.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br />
<i>Default: '' (An empty string)</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br />
<i>Default: '' (An empty string)</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.red.start"></a>
<b>chart.red.start</b><br />
The point at which the red area starts.<br />
<i>Default: 90% of the max</i><br /><br />
<a name="chart.red.color"></a>
<b>chart.red.color</b><br />
The red color.<br />
<i>Default: #DC3912</i><br /><br />
<a name="chart.yellow.color"></a>
<b>chart.yellow.color</b><br />
The yellow color.<br />
<i>Default: #FF9900</i><br /><br />
<a name="chart.green.end"></a>
<b>chart.green.end</b><br />
The point at which the green area ends.<br />
<i>Default: 70% of the max</i><br /><br />
<a name="chart.green.color"></a>
<b>chart.green.color</b><br />
The green color.<br />
<i>Default: rgba(0,0,0,0)</i><br /><br />
<a name="chart.border.outer"></a>
<b>chart.border.outer</b><br />
This is the color of the outer border.<br />
<i>Default: #ccc</i><br /><br />
<a name="chart.border.inner"></a>
<b>chart.border.inner</b><br />
This is the color of the inner border.<br />
<i>Default: #f1f1f1</i><br /><br />
<a name="needle"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle</h3>
<a name="chart.needle.tail"></a>
<b>chart.needle.tail</b><br />
Whether the tail for the needle is shown.<br />
<i>Default: false</i><br /><br />
<a name="chart.needle.color"></a>
<b>chart.needle.color</b><br />
This is the color of the needle.<br />
<i>Default: #D5604D</i><br /><br />
<a name="chart.centerpin.color"></a>
<b>chart.centerpin.color</b><br />
This is the color used in the centerpin gradient coloring.<br />
<i>Default: blue</i><br /><br />
<a name="chart.centerpin.radius"></a>
<b>chart.centerpin.radius</b><br />
This is ths radius of the centerpin.<br />
<i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.border.width"></a>
<b>chart.border.width</b><br />
The width of the border that goes around the Gauge.<br />
<i>Default: 10</i><br /><br />
<a name="chart.tickmarks.small"></a>
<b>chart.tickmarks.small</b><br />
The number of small tickmarks on the chart.<br />
<i>Default: 25</i><br /><br />
<a name="chart.tickmarks.big"></a>
<b>chart.tickmarks.big</b><br />
The number of big tickmarks on the chart. If you specify this you will actually get one more than the number
of tickmarks than you specify. So if you specify 5, you'll get 6 tickmarks because of the end tickmarks.<br />
<i>Default: 25</i><br /><br />
</div>
</body>
</html>

210
OfficeWeb/sdk/Common/Charts/docs/gutters.html
View file

@ -1,210 +0,0 @@
<!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 configure different top, bottom, left and right gutter sizes</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs variable gutter sizes" />
<meta name="description" content="Information on variable gutter sizes that you can now configure" />
<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.jpg"/>
<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.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 (e)
{
var bar = new OfficeExcel.Bar('cvs', [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5]);
bar.Set('chart.ymax', 5);
bar.Set('chart.labels', ['January', '\r\nFebruary', 'March', '\r\nApril', 'May', '\r\nJune', 'July', '\r\nAugust', 'September', '\r\nOctober', 'November', '\r\nDecember']);
if (!OfficeExcel.isOld()) {
bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
}
bar.Set('chart.contextmenu', [['Zoom in', OfficeExcel.Zoom]]);
bar.Set('chart.zoom.hdir', 'left');
bar.Set('chart.title', '2010 statistics');
bar.Set('chart.ylabels.specific', ['100,000','10,000','1,000','100','10']);
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.background.grid.autofit.align', true);
bar.Set('chart.title.vpos', 0.5);
bar.Set('chart.gutter.left', 65);
bar.Set('chart.gutter.right', 15);
bar.Set('chart.gutter.bottom', 35);
bar.Draw();
}
</script>
<?php PrintAnalyticsCode() ?>
<style>
ol li {
margin-top: 0;
}
</style>
</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>
>
Variable gutter sizes
</div>
<h1>Variable <span>gutter sizes</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>
<ul>
<li>
<a href="#upgrading">Upgrading from a previous version of OfficeExcel</a>
</li>
</ul>
<canvas id="cvs" width="620" height="300" style="float: right">[No canvas support]</canvas>
<p>
New in June 2011 is the much requested feature of seperate gutter sizing. As the chart to the right shows, this means
that you can now easily set the left/right/top/bottom gutters independently. This makes it easy to give
yourself the space that you need for labels, which will be most noticeable with the Bar chart, the Line chart
and similar chart types. There is another example on the <a href="../examples/hbar.html#gutter-example">HBar example page</a>.
</p>
<p>
Because of the fundamental nature of this change (every chart type has been affected)
you should rigorously test your charts if you choose to upgrade.
</p>
<p>
The new properties are:
</p>
<ul>
<li>chart.gutter.left</li>
<li>chart.gutter.right</li>
<li>chart.gutter.top</li>
<li>chart.gutter.bottom</li>
</ul>
<p>
They all default to 25 pixels (with a few exceptions) and each can be set independently.
</p>
<p>
These new properties eliminate the need for certain others. So starting immediately the following properties are no longer
used:
</p>
<ul>
<li>chart.gutter</li>
<li>chart.width</li>
<li>chart.height</li>
<li>chart.tooltips.coords.adjust</li>
<li>chart.resize.handle.adjust</li>
</ul>
<p>
The <i>chart.gutter</i> property has been completely removed, so you will need to start using the new properties immediately.
The <i>chart.width</i> and <i>chart.height</i> properties are completely unused from this point and the last two
will be phased out starting immediately.
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function (e)
{
var bar = new OfficeExcel.Bar('cvs', [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5]);
bar.Set('chart.ymax', 5);
bar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
bar.Set('chart.text.angle', 45);
bar.Set('chart.contextmenu', [['Zoom in', OfficeExcel.Zoom]]);
bar.Set('chart.zoom.hdir', 'left');
bar.Set('chart.title', '2010 statistics (tooltips)');
bar.Set('chart.ylabels.specific', ['100,000','10,000','1,000','100','10']);
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.background.grid.autofit.align', true);
bar.Set('chart.title.vpos', 0.5);
<span style="color: green">bar.Set('chart.gutter.left', 65);
bar.Set('chart.gutter.right', 5);
bar.Set('chart.gutter.bottom', 60);</span>
bar.Draw();
}
&lt;/script&gt;
</pre>
<a name="upgrading"></a>
<h2>Upgrading from a previous version of OfficeExcel</h2>
<p>
If you're upgrading from a previous version of OfficeExcel then there are a few points you should bear in mind:
</p>
<ol>
<li>
Remove any calls to .translate().
If you use the .translate() method to give yourself extra space, this should be converted to the new gutter properties.
</li>
<li>
If you use <i>chart.tooltips.coords.adjust</i> or <i>chart.resize.handle.adjust</i> then you should remove them. These
properties will cease to have any effect eventually, but not immediately.
</li>
<li>
If you use caching, then you may need to use a CTRL/SHIFT+Refresh on your page to bypass any cached copy of the OfficeExcel
libraries.
</li>
</ol>
</body>
</html>

731
OfficeWeb/sdk/Common/Charts/docs/hbar.html
View file

@ -1,731 +0,0 @@
<!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>Documentation about the Horizontal Bar chart</title>
<meta name="keywords" content="OfficeExcel javascript charts docs hbar horizontal bar" />
<meta name="description" content="Documentation about the Horizontal Bar (HBar) charts including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
Horizontal bar charts
</div>
<h1>Horizontal <span>bar charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">The data that is to be represented on the chart</span>
var data = [280,45,133];
<span class="javascript-comment">// To show a stacked or grouped chart each element of the data array should itself
// be an array containing the data to be shown.
// var data = [[120,80,60],[30,12,13],[50,50,33]];</span>
<span class="javascript-comment">// Create the HBar object giving it the canvas ID and the data just defined.</span>
var hbar = new OfficeExcel.HBar('myCanvas', data);
<span class="javascript-comment">// Configure the chart to appear as wished.</span>
hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick']);
hbar.Set('chart.gutter.left', 45);
hbar.Set('chart.background.barcolor1', 'white');
hbar.Set('chart.background.barcolor2', 'white');
hbar.Set('chart.background.grid', true);
hbar.Set('chart.colors', ['red']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
hbar.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/hbar.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the bar chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myHBar.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#chart">Chart configuration</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#scale and axes">Scale and axes</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 75</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of the colors of the actual bars. <br />
<i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br />
<a name="chart.colors.sequential"></a>
<b>chart.colors.sequential</b><br />
If true, for regular bar charts, the colors that you specify will be used in a sequential fashion.<br />
<i>Default: false</i><br /><br />
<a name="background"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a>
<b>chart.background.barcolor1</b><br />
The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.barcolor2"></a>
<b>chart.background.barcolor2</b><br />
The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.grid"></a>
<b>chart.background.grid</b><br />
Whether to show the background grid or not. <br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.color"></a>
<b>chart.background.grid.color</b><br />
The color of the background grid. <br /><i>Default: #ddd</i><br /><br />
<a name="chart.background.grid.hsize"></a>
<b>chart.background.grid.hsize</b><br />
The horizontal background grid size. <br /><i>Default: 40</i><br /><br />
<a name="chart.background.grid.vsize"></a>
<b>chart.background.grid.vsize</b><br />
The vertical background grid size. <br /><i>Default: 18</i><br /><br />
<a name="chart.background.grid.width"></a>
<b>chart.background.grid.width</b><br />
The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 0.5</i><br /><br />
<a name="chart.background.grid.border"></a>
<b>chart.background.grid.border</b><br />
Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.hlines"></a>
<b>chart.background.grid.hlines</b><br />
Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.vlines"></a>
<b>chart.background.grid.vlines</b><br />
Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit"></a>
<b>chart.background.grid.autofit</b><br />
Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br />
<i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit.numhlines"></a>
<b>chart.background.grid.autofit.numhlines</b><br />
When using autofit this allows you to specify how many horizontal grid lines you want. <br />
<i>Default: 14</i><br /><br />
<a name="chart.background.grid.autofit.numvlines"></a>
<b>chart.background.grid.autofit.numvlines</b><br />
When using autofit this allows you to specify how many vertical grid lines you want. <br />
<i>Default: 20</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
<a name="chart.xlabels"></a>
<b>chart.xlabels</b><br />
A boolean controlling whether the X labels are shown.<br />
<i>Default: true</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the labels to be used on the chart. <br />
<i>Default: An empty array</i><br /><br />
<a name="chart.labels.above"></a>
<b>chart.labels.above</b><br />
This is a boolean which if true, will cause labels to be shown to the right of the bars. (It's called "above"
for API compatibility).<br />
<i>Default: false</i><br /><br />
<a name="chart.labels.above.decimals"></a>
<b>chart.labels.above.decimals</b><br />
This is a number which controls how many decimals are shown. It defaults to 0, and since it was added (4th December 2010)
you may need to set this, otherwise no decimals will be shown.<br />
<i>Default: 0</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br />
<i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br />
<i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br />
<i>Default: 10</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br />
<i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.xaxis"></a>
<b>chart.title.xaxis</b><br />
This allows to specify a title for the X axis.<br />
<i>Default: none</i><br /><br />
<a name="chart.title.xaxis.size"></a>
<b>chart.title.xaxis.size</b><br />
This allows you to specify a size for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.font"></a>
<b>chart.title.xaxis.font</b><br />
This allows to specify a font for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.bold"></a>
<b>chart.title.xaxis.bold</b><br />
This controls whether the X axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.yaxis"></a>
<b>chart.title.yaxis</b><br />
This allows to specify a title for the Y axis.<br />
<i>Default: none</i><br /><br />
<a name="chart.title.yaxis.size"></a>
<b>chart.title.yaxis.size</b><br />
This allows you to specify a size for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.font"></a>
<b>chart.title.yaxis.font</b><br />
This allows to specify a font for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.bold"></a>
<b>chart.title.yaxis.bold</b><br />
This controls whether the Y axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.xaxis.pos"></a>
<b>chart.title.xaxis.pos</b><br />
This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
<a name="chart.title.yaxis.pos"></a>
<b>chart.title.yaxis.pos</b><br />
This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.5</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="scale and axes"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale and axes</h3>
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br /><i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br /><i>Default: ,</i><br /><br />
<a name="chart.scale.round"></a>
<b>chart.scale.round</b><br />
Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
<i>Default: null</i><br /><br />
<a name="chart.xmax"></a>
<b>chart.xmax</b><br />
(Optional) An optional max figure for the X scale.<br />
<i>Default: none (one is calculated)</i><br /><br />
<a name="chart.xmin"></a>
<b>chart.xmin</b><br />
An optional minimum figure for the X scale.<br />
<i>Default: 0</i><br /><br />
<a name="chart.yaxispos"></a>
<b>chart.yaxispos</b><br />
The position of the Y axis. Works with regular and grouped charts. Can be either <i>center</i> or <i>left</i>.<br /> <i>Default: left</i><br /><br />
<a name="chart.axis.color"></a>
<b>chart.axis.color</b><br />
The color of the axes.<br /> <i>Default: black</i><br /><br />
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the X axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the X axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br />
<a name="chart.units.ingraph"></a>
<b>chart.units.ingraph</b><br />
If your units are long, setting this stipulates them to be used for ingraph labels only.<br /><i>Default: false</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.grouping"></a>
<b>chart.grouping</b><br />
How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br />
<i>Default: grouped</i><br /><br />
<a name="chart.vmargin"></a>
<b>chart.vmargin</b><br />
The vertical margin that is applied to each individual bar.<br />
<i>Default: 3</i><br /><br />
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
The color of the outlines of the bars.<br />
<i>Default: black</i><br /><br />
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a small drop shadow is applied. <br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /><i>Default: #666</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. You cannot have context menus AND tooltips, only one or the other. More information on context menus is <a href="context.html">here</a>.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array of tooltips for the chart.<br />
<i>Default: An empty array</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be <i>onclick</i> or <i>onmousemove</i>.<br />
<i>Default: onclick</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The visual effect used when showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br />
<i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
</div><!-- /DOCS --><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<br />&nbsp;<br />
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of:
<ul>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the bar</li>
<li>The height of the bar</li>
<li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li>
</ul>
An example usage is:
<pre class="code">
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.hbar.js"&gt;&lt;/script&gt;
&lt;script&gt;
myGraph = new OfficeExcel.HBar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
myGraph.Draw();
OfficeExcel.Register(myGraph);
myGraph.canvas.onclick = function (e)
{
OfficeExcel.Redraw();
var canvas = e.target;
var context = canvas.getContext('2d');
var obj = canvas.__object__;
<span style="color: green">var bar = obj.getBar(e);</span>
if (bar) {
var top = bar[0];
var left = bar[1];
var width = bar[2];
var height = bar[3];
var idx = bar[4];
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'rgba(255,255,255,0.5)';
context.strokeRect(top, left, width, height);
context.fillRect(top, left, width, height);
context.stroke();
context.fill();
}
}
&lt;/script&gt;
</pre>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="getValue"></a>
<b>obj.getValue(mixed)</b>
<p>
This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use.
Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element
array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse
or coordinates are in the gutter areas. An example:
</p>
<pre class="code">
myChart.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
</pre>
</body>
</html>

275
OfficeWeb/sdk/Common/Charts/docs/howto-events-modaldialog.html
View file

@ -1,275 +0,0 @@
<!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>HOWTO: Add the ModalDialog to your charts using the new pseudo-events</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
<meta name="description" content="A HOWTO guide for adding the ModalDialog to your charts using the newOfficeExcel pseudo-events" />
<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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library" />
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.modaldialog.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<style>
.ModalDialog_dialog {
box-shadow: 0 0 15px gray ! important;
-moz-box-shadow: 0 0 15px gray ! important;
-ms-box-shadow: 0 0 15px gray ! important;
-o-box-shadow: 0 0 15px gray ! important;
}
</style>
<?php PrintAnalyticsCode() ?>
</head>
<script>
labels = ['Kev','Louise','Pete','Gary','Fliss', 'James'];
window.onload = function (e)
{
// -------------------------------------------------------------------------- //
var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
bar1.Set('chart.labels',labels);
bar1.Draw();
// -------------------------------------------------------------------------- //
function ShowDialog (e, bar)
{
// Check this index if you want to show different dialogs based on the bar that was clicked.
var index = bar[5];
ModalDialog.Show('myDialog');
}
var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
bar2.Set('chart.labels',labels);
bar2.Set('chart.events.click',ShowDialog);
bar2.Set('chart.events.mousemove',function (e, bar) {e.target.style.cursor = 'pointer';});
bar2.Draw();
// -------------------------------------------------------------------------- //
}
</script>
<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>
>
HOWTO: Use the ModalDialog with events
</div>
<h1>HOWTO: <span>Use the ModalDialog with events</span></h1>
<p>
This is a step-by-step guide to implementing and using the ModalDialog that comes with OfficeExcel. It can be used as a simple
"Please wait..." style dialog or, as below, it could be used as a user input request. To get it up and running is quite simple,
and you don't have to use it with OfficeExcel charts - it can be used standalone as there are no dependencies on OfficeExcel libraries.
</p>
<h4>1. The basic chart without the ModalDialog</h4>
<p>
The basic chart used is shown below. The chart does not have the ModalDialog added to it yet - it's just a simple Bar chart.
</p>
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script src="OfficeExcel.bar.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.modaldialog.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script&gt;
var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
bar.Draw();
&lt;/script&gt;
</pre>
<h4>2. The ModalDialog</h4>
<p>
This is the DIV whose content is used as the ModalDialog. It is important to remember that only the contents are used, not
the DIV itself. This means that you can hide the DIV with the <i>display:</i> CSS property.
</p>
<pre class="code">
&lt;script src="OfficeExcel.bar.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.modaldialog.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script&gt;
var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
bar.Draw();
&lt;/script&gt;
<span style="color: green">&lt;!-- This is the popup dialog--&gt;
&lt;div id="myDialog" class="modalDialog" style="display: none"&gt;
&lt;b&gt;Please login&lt;/b&gt;
&lt;p&gt;
&lt;table border="0"&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Email&lt;/td&gt;
&lt;td&gt;&lt;input type="text" size="20" name="email" style="width: 150px" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Password&lt;/td&gt;
&lt;td&gt;&lt;input type="password" size="20" name="password" style="width: 150px" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2" align="right"&gt;
&lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
&lt;input type="submit"
name="submit"
value="Login <20>"
onclick="alert('This is just an example'); event.stopPropagation()"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;!-- End of dialog --&gt;</span>
</pre>
<h4>3. Triggering the dialog with the new pseudo-events</h4>
<p>
This function is used to show the dialog. Here, it is triggered using the new OfficeExcel event functions. Doing this means
that you could also check the index of the bar that was clicked, which would allow you to show different dialogs
based on the bar that was clicked.
</p>
<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script src="OfficeExcel.bar.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.modaldialog.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script&gt;
<span style="color: green">function ShowDialog (e, bar)
{
// Check this index if you want to show different dialogs based on the bar that was clicked.
var index = bar[5];
ModalDialog.Show('myDialog');
}</span>
var bar = new OfficeExcel.Bar('cvs', [4,6,5,3,8,9]);
bar.Set('chart.labels', ['Kev','Louise','Pete','Gary','Fliss', 'James']);
<span style="color: green">bar.Set('chart.events.click', ShowDialog);
bar.Set('chart.events.mousemove', function (e, bar) {e.atrget.style.cursor = 'pointer';});</span>
bar.Draw();
&lt;/script&gt;
&lt;!-- This is the popup dialog--&gt;
&lt;div id="myDialog" class="modalDialog" style="display: none"&gt;
&lt;b&gt;Please login&lt;/b&gt;
&lt;p&gt;
&lt;table border="0"&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Email&lt;/td&gt;
&lt;td&gt;&lt;input type="text" size="20" name="email" style="width: 150px" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="right" style="padding-top: 4px"&gt;Password&lt;/td&gt;
&lt;td&gt;&lt;input type="password" size="20" name="password" style="width: 150px" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2" align="right"&gt;
&lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
&lt;input type="submit"
name="submit"
value="Login <20>"
onclick="alert('This is just an example'); event.stopPropagation()"&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;!-- End of dialog --&gt;
</pre>
<!-- This is the popup dialog -->
<div id="myDialog" class="modalDialog" 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 <20>"
onclick="alert('This is just an example'); event.stopPropagation()">
</td>
</tr>
</table>
</p>
</div>
<!-- End of dialog -->
</body>
</html>

230
OfficeWeb/sdk/Common/Charts/docs/howto-events.html
View file

@ -1,230 +0,0 @@
<!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>HOWTO: Add events to your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
<meta name="description" content="A HOWTO guide for adding events to 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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library" />
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<?php PrintAnalyticsCode() ?>
</head>
<script>
window.onload = function ()
{
// -------------------------------------------------------------------------- //
var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
bar1.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
bar1.Draw();
// -------------------------------------------------------------------------- //
function myClick (e, bar)
{
var index = bar[5];
switch (index) {
case 0: alert('The first bar was clicked'); break;
case 1: alert('The second bar was clicked'); break;
case 2: alert('The third bar was clicked'); break;
case 3: alert('The fourth bar was clicked'); break;
case 4: alert('The fifth bar was clicked'); break;
case 5: alert('The sixth bar was clicked'); break;
}
}
var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
bar2.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
bar2.Set('chart.events.click', myClick);
bar2.Draw();
// -------------------------------------------------------------------------- //
function myMousemove (e, bar)
{
e.target.style.cursor = 'pointer';
}
var bar3 = new OfficeExcel.Bar('cvs3', [4,6,5,3,8,9]);
bar3.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
bar3.Set('chart.events.click', myClick);
bar3.Set('chart.events.mousemove', myMousemove);
bar3.Draw();
}
</script>
<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>
>
HOWTO: Add events to your charts
</div>
<h1>HOWTO: <span>Add events to your charts</span></h1>
<p>
Starting from January 2012 adding events to your charts has become much easier. There are two new properties for this:
</p>
<ul>
<li>chart.events.mousemove</li>
<li>chart.events.click</li>
</ul>
<p>
These properties make adding interactivity to you charts very easy. Here's a step-by-step example of using them.
</p>
<h4>1. The chart without the event listeners</h4>
<p>
Here's the basic chart without any event listeners defined:
</p>
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
var bar1 = new OfficeExcel.Bar('cvs1', [4,6,5,3,8,9]);
bar1.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
bar1.Draw();
&lt;/script&gt;
</pre>
<!------------------------------------------------------------------------------------->
<h4>2. The chart with the click event listener added</h4>
<p>
The first step would be to add the click event listener. This function is run when a bar is clicked. The function
that you specify is passed two arguments - the (standard) event object, and a second array of coordinates that
describe the shape. This array can (but doesn't always) contain the OfficeExcel chart object and the index of the shape.
The index begins at zero - so the first bar would have an index of zero, the second bar would have an index of one
and so on.
</p>
<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
<span style="color: green">
function myClick (e, bar)
{
var index = bar[5];
switch (index) {
case 0: alert('The first bar was clicked'); break;
case 1: alert('The second bar was clicked'); break;
case 2: alert('The third bar was clicked'); break;
case 3: alert('The fourth bar was clicked'); break;
case 4: alert('The fifth bar was clicked'); break;
case 5: alert('The sixth bar was clicked'); break;
}
}</span>
var bar2 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
bar2.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
<span style="color: green">bar2.Set('chart.events.click', myClick);</span>
bar2.Draw();
&lt;/script&gt;
</pre>
<!------------------------------------------------------------------------------------->
<h4>3. The chart with the mousemove event listener added</h4>
<p>
The second step is to add the mousemove event listener. This allows us to change the cursor to
<i>pointer</i> when the mouse is moved over a bar. Because this is a common operation the pointer
is automatically changed back to the previous state when it is moved away from the bar.
</p>
<canvas id="cvs3" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
<span style="color: green">
function myMousemove (e, bar)
{
// It's automatically changed back to the previous state for you
e.target.style.cursor = 'pointer';
}
</span>
function myClick (e, bar)
{
var index = bar[5];
switch (index) {
case 0: alert('The first bar was clicked'); break;
case 1: alert('The second bar was clicked'); break;
case 2: alert('The third bar was clicked'); break;
case 3: alert('The fourth bar was clicked'); break;
case 4: alert('The fifth bar was clicked'); break;
case 5: alert('The sixth bar was clicked'); break;
}
}
var bar3 = new OfficeExcel.Bar('cvs2', [4,6,5,3,8,9]);
bar3.Set('chart.labels',['Kev','Louise','Pete','Gary','Fliss']);
bar3.Set('chart.events.click', myClick);</span>
<span style="color: green">bar3.Set('chart.events.mousemove', myMousemove);</span>
bar3.Draw();
&lt;/script&gt;
</pre>
</body>
</html>

218
OfficeWeb/sdk/Common/Charts/docs/howto-images.html
View file

@ -1,218 +0,0 @@
<!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>HOWTO: Add images to your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
<meta name="description" content="A HOWTO guide for adding images to 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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.modaldialog.js" ></script>
<?php PrintAnalyticsCode() ?>
</head>
<script>
window.onload = function (e)
{
/**
* The code that produces the chart for the tooltips method
*/
var bar_tooltips = new OfficeExcel.Bar('cvs_tooltips', [4,6,3,5,4]);
bar_tooltips.Set('chart.tooltips', ['<img src="../images/logo.png" />',
'<img src="../images/alex.png" />',
'<img src="../images/chrome_logo.png" />',
'<img src="../images/unicef.png" />',
'<img src="../images/merry-christmas-snowman.png" />']);
bar_tooltips.Set('chart.labels', ['Pamela','Louise','Kevin','John','Richard']);
bar_tooltips.Set('chart.colors', ['blue']);
bar_tooltips.Set('chart.highlight.stroke', 'rgba(0,0,0,0)');
bar_tooltips.Draw();
/**
* The code that produces the chart for the background image method
*/
var bar_bg = new OfficeExcel.Bar('cvs_bg', [4,6,3,5,4]);
bar_bg.Set('chart.labels', ['Pamela','Louise','Kevin','John','Richard']);
bar_bg.Set('chart.background.image', '../images/logo.png');
bar_bg.Set('chart.background.image.stretch', false);
bar_bg.Draw();
/**
* The code that produces the chart for the CSS method
*/
var bar_css = new OfficeExcel.Bar('cvs_css', [4,6,3,5,4]);
bar_css.Set('chart.labels', ['Pamela','Louise','Kevin','John','Richard']);
bar_css.Draw();
/**
* The code that produces the chart for the ModalDialog method
*/
function ShowDialog (e, bar)
{
var index = bar[5];
var images = ['<img src="../images/logo.png" />',
'<img src="../images/alex.png" />',
'<img src="../images/chrome_logo.png" />',
'<img src="../images/unicef.png" />',
'<img src="../images/merry-christmas-snowman.png" />'];
document.getElementById("myDialog").innerHTML = '<img src="../images/close.png" style="position: absolute; top: 5px; right: 5px; cursor: pointer" onclick="ModalDialog.Hide()" /><center>' + images[index] + '</center>';
ModalDialog.Show('myDialog', 200);
}
var bar_md = new OfficeExcel.Bar('cvs_modaldialog', [4,6,3,5,4]);
bar_md.Set('chart.labels', ['Pamela','Louise','Kevin','John','Richard']);
bar_md.Set('chart.events.click', ShowDialog);
bar_md.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
bar_md.Draw();
ModalDialog.AddCustomEventListener('onmodaldialog', function () {if (console && console.log) cl('ModalDialog has been shown');});
}
</script>
<style>
.OfficeExcel_tooltip {
background-color: white ! important;
opacity: 0.9 ! important;
}
.ModalDialog_dialog {
box-shadow: 0 0 15px rgba(127,127,127,1) ! important;
padding-top: 15px ! important;
}
.ModalDialog_topbar {
display: none;
}
</style>
<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>
>
HOWTO: Add images to your charts
</div>
<h1>HOWTO: <span>Add images to your charts</span></h1>
<p>
There are a few methods of adding images to your charts, and they are:
</p>
<h4>1. Tooltips</h4>
<p>
Tooltips are regular HTML DIV tags and so can contain a wide variety of HTML - links, movies, pictures etc They can be formatted
with CSS (and there's also a specific CSS class that you can use to make them all appear the same - <i>OfficeExcel_tooltip</i>).
For example:
</p>
<canvas id="cvs_tooltips" width="600" height="250">[No canvas support]</canvas>
<h4>2. Background images</h4>
<p>
If what you want to achieve is to add a "tag" to your charts (eg in a corner of the chart), or you simply want a background image
then the Bar, Line and Scatter charts all support background images. The chart below shows an example of these. You don't
have to use a large image - by using the background image properties you can specify whether the image is stretched across
the whole canvas, the X/Y coordinates of the image and the alignment.
</p>
<canvas id="cvs_bg" width="600" height="250">[No canvas support]</canvas>
<p>
<b>Note:</b>
Being a background image, be aware that the image is the first thing that's drawn on the canvas. As such, any grid that you have
will be drawn over the top of the image. You can of course turn the grid off if you don't want this.
</p>
<h4>3. CSS Positioning</h4>
<p>
By using CSS prelative/absolute positioning you can place a regular image over the top of the canvas. As with background images,
the image will not be affected by the canvas redrawing. If you want to link the image or add event listeners to it, you can do
so as you would normally.
</p>
<div style="position: relative">
<canvas id="cvs_css" width="600" height="250">[No canvas support]</canvas>
<img src="../images/logo.png" style="position: absolute; top: 35px; left: 30px; border: 1px dashed gray; padding: 3px" />
</div>
<p>
The HTML markup needed to achieve this is:
</p>
<pre class="code">
&lt;div style="position: relative"&gt;
&lt;canvas id="cvs_css" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;img src="../images/logo.png" style="position: absolute; top: 35px; left: 30px; border: 1px dashed gray; padding: 3px" /&gt;
&lt;/div&gt;
</pre>
<!-- This is here to facilitate image preloading -->
<div style="position: absolute; top 0; left: 0; visibility: hidden">
<img src="../images/logo.png" />'
<img src="../images/alex.png" />'
<img src="../images/chrome_logo.png" />'
<img src="../images/unicef.png" />'
<img src="../images/merry-christmas-snowman.png" />
</div>
<h4>4. Using the ModalDialog</h4>
<p>
You can make use of the ModalDialog to show images, changing the image in the ModalDialog DIV each time it is shown. You can use
the new events to make it easier to do.
</p>
<canvas id="cvs_modaldialog" width="600" height="250">[No canvas support]</canvas>
<!-- The ModalDialog container -->
<div id="myDialog" class="modalDialog" style="display: none"></div>
<!-- -->
</body>
</html>

210
OfficeWeb/sdk/Common/Charts/docs/howto-linking.html
View file

@ -1,210 +0,0 @@
<!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>HOWTO: Add links to your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
<meta name="description" content="A HOWTO guide for adding links to 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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
<?php PrintAnalyticsCode() ?>
</head>
<script>
window.onload = function (e)
{
/**
* The code that produces the chart for the tooltips method
*/
var bar_tooltips = new OfficeExcel.Bar('cvs_tooltips', [4,6,3,5,4]);
bar_tooltips.Set('chart.tooltips', ['Link 1: <a href="http://www.google.com" target="_blank">Google</a>',
'Link 2: <a href="http://www.yahoo.com" target="_blank">Yahoo</a>',
'Link 3: <a href="http://www.bing.com" target="_blank">Bing</a>',
'Link 4: <a href="http://news.bbc.co.uk" target="_blank">BBC News</a>',
'Link 5: <a href="http://www.facebook.com" target="_blank">Facebook</a>']);
bar_tooltips.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
bar_tooltips.Draw();
/**
* This is the function that is run when a bar is clicked (for the chart defined below)
*/
function myEventListener (e, bar)
{
switch (bar[5]) {
case 0: location.href = 'http://www.google.com'; break;
case 1: location.href = 'http://www.yahoo.com'; break;
case 2: location.href = 'http://www.bing.com'; break;
case 3: window.open('http://news.bbc.co.uk', '_blank'); break;
case 4: window.open('http://www.facebook.com', '_blank', 'top=50,left=50,width=900,height=600'); break;
}
}
/**
* The code that produces the chart for the pseudo-events method
*/
var bar_events = new OfficeExcel.Bar('cvs_events', [4,6,3,5,4]);
bar_events.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
bar_events.Set('chart.events.click', myEventListener);
bar_events.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
bar_events.Draw();
/**
* The code that produces the chart for the anchor method
*/
var bar_anchor = new OfficeExcel.Bar('cvs_anchor', [4,6,3,5,4]);
bar_anchor.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
bar_anchor.Draw();
}
</script>
<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>
>
HOWTO: Add links to your charts
</div>
<h1>HOWTO: <span>Add links to your charts</span></h1>
<p>
There are a few methods of adding links to your charts or redirecting to new pages when certain user actions are triggered.
The different methods are listed below.
</p>
<h4>1. Tooltips</h4>
<p>
Tooltips are regular HTML DIV tags and so can contain a wide variety of HTML - links, movies, pictures etc They can be formatted
with CSS (and there's also a specific CSS class that you can use to make them all appear the same - <i>OfficeExcel_tooltip</i>).
For example:
</p>
<canvas id="cvs_tooltips" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
var bar = new OfficeExcel.Bar('cvs', [4,6,3,5,4]);
bar.Set('chart.tooltips', ['Link 1: &lt;a href="http://www.google.com" target="_blank"&gt;Google&lt;/a&gt;',
'Link 2: &lt;a href="http://www.yahoo.com" target="_blank"&gt;Yahoo&lt;/a&gt;',
'Link 3: &lt;a href="http://www.bing.com" target="_blank"&gt;Bing&lt;/a&gt;',
'Link 4: &lt;a href="http://news.bbc.co.uk" target="_blank"&gt;BBC News&lt;/a&gt;',
'Link 5: &lt;a href="http://www.facebook.com" target="_blank"&gt;Facebook&lt;/a&gt;']);
bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
bar.Draw();
&lt;/script&gt;
</pre>
<h4>2. The new pseudo-event listeners</h4>
<p>
As of January 2012 new pseudo-event listeners have been added. This means that you can specify a Javascript function to run
when a bar is clicked. The same function is called for all bars so to determine which bar has been clicked you will have to
check the index of the bar, as below.
</p>
<canvas id="cvs_events" width="600" height="250">[No canvas support]</canvas>
<pre class="code">
&lt;script&gt;
/**
* This is the function that is run when a bar is clicked (for the chart defined below)
*/
function myEventListener (e, bar)
{
var index = bar[5];
switch (index) {
case 0: location.href = 'http://www.google.com'; break;
case 1: location.href = 'http://www.yahoo.com'; break;
case 2: location.href = 'http://www.bing.com'; break;
case 3: window.open('http://news.bbc.co.uk', '_blank'); break;
case 4: window.open('http://www.facebook.com', '_blank', 'top=50,left=50,width=900,height=600'); break;
}
}
var bar = new OfficeExcel.Bar('cvs', [4,6,3,5,4]);
bar.Set('chart.events.click', myEventListener);
bar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
bar.Draw();
&lt;/script&gt;
</pre>
<h5>Note</h5>
<p>
As shown you can either assign a URL to <i>location.href</i>, or alternatively you can use the <i>window.open</i> method. The
difference is largely immaterial however the <i>window.open</i> method does mean you can open the link in a new window, which
is something you can't do if you use <i>location.href</i>. You can also specify what browser controls are shown
(eg. the address bar/buttons etc), the size and the position of the window if you use the <i>window.open</i> method.
</p>
<h4>3. An anchor tag around the canvas</h4>
<p>
This method is rather simple but is mentioned for completeness. You can of course link the whole of the canvas in your HTML
page. The disadvantage with this is that the link will apply to the whole canvas, gutters included, and that there can be
only one URL.
</p>
<a href="http://www.google.com" target="_blank">
<canvas id="cvs_anchor" width="600" height="250">[No canvas support]</canvas>
</a>
<pre class="code">
&lt;a href="http://www.google.com" target="_blank"&gt;
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;/a&gt;
</pre>
<p>
You could also use the canvas onclick event to trigger some Javascript code and then redirect, like this:
</p>
<pre class="code">
&lt;canvas id="cvs" width="600" height="250" onclick="alert('Redirecting...');location.href='http://www.google.com'"&gt;[No canvas support]&lt;/canvas&gt;
</pre>
</body>
</html>

238
OfficeWeb/sdk/Common/Charts/docs/howto-make-a-transition-effect.html
View file

@ -1,238 +0,0 @@
<!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>HOWTO: Make a transition effect</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs links" />
<meta name="description" content="A HOWTO guide for making a transition effect between different 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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
<script src="../libraries/jquery.min.js" ></script>
<?php PrintAnalyticsCode() ?>
</head>
<script>
/**
* This function shows the chart that displays total sales by day.
*/
function ShowChart1 ()
{
// Enable the correct button
document.getElementById("butDayAndPerson").disabled = false;
var bar1 = new OfficeExcel.Bar('cvs', [4,5,8,6,4,3,2]);
bar1.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
bar1.Set('chart.title', 'Total sales by day');
OfficeExcel.Effects.jQuery.Reveal(bar1);
}
/**
* This chart shows the total sales by day again, but this time broken down by person as well.
*/
function ShowChart2 ()
{
// Enable the correct button
document.getElementById("butDay").disabled = false;
var bar2 = new OfficeExcel.Bar('cvs', [[2,2],[3,2],[5,3],[3,3],[3,1],[2,1],[1,1]]);
bar2.Set('chart.title', 'Sales broken down by day and person');
bar2.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
bar2.Set('chart.key', ['John','Brandon']);
bar2.Set('chart.ymax', 10);
OfficeExcel.Effects.jQuery.Reveal(bar2);
}
/**
* This function hides the canvas (whichever chart is being shown) and calls the relevant function to
* show the desired chart. It uses the Conceal effect to hide the canvas and passes the appropriate
* function as the "callback" which is called when the Concealeffect is done.
*
* The callback then clears the canvas and draws the appropriate chart on it.
*/
function TransitionTo(func)
{
// Disable both buttons
document.getElementById("butDay").disabled = true;
document.getElementById("butDayAndPerson").disabled = true;
OfficeExcel.Effects.jQuery.Conceal(document.getElementById("cvs").__object__, null, func);
}
/**
* Initially the canvas is blabk so there is no need to clear anything. So it is sufficient to
* just call the relevant function to show the first chart.
*/
window.onload = function ()
{
ShowChart1();
}
</script>
<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>
>
HOWTO: Make a transition effect
</div>
<h1>HOWTO: <span>Make a transition effect</span></h1>
<p>
You can use the range of OfficeExcel effects to easily make an effective transition effect. This page shows you how you can do just
that with the Conceal ad Reveal effects. If you need to show multiple charts this can be an effective way to switch between the
two.
</p>
<div style="text-align: center">
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<br />
<button onclick="TransitionTo(ShowChart1)" disabled="disabled" id="butDay">Show sales by day only</button>
<button onclick="TransitionTo(ShowChart2)" disabled="disabled" id="butDayAndPerson">Show sales by day and person</button>
</div>
<h4>1. Include the libraries</h4>
<p>
This HTML code, which goes in the page &lt;HEAD&gt;, simply includes the relevant OfficeExcel libraries along with jQuery.
</p>
<pre class="code">
&lt;script src="OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.key.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.effects.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.bar.js" &gt;&lt;/script&gt;
&lt;script src="jquery.min.js" &gt;&lt;/script&gt;
</pre>
<h4>2. Define the Javascript that draws the charts</h4>
<p>
The charts are drawn by individual functions. This makes it easy to call those functions when needed and draw the charts.
</p>
<pre class="code">
&lt;script&gt;
/**
* This function shows the chart that displays total sales by day.
*/
function ShowChart1 ()
{
// Enable the correct button
document.getElementById("butDayAndPerson").disabled = false;
var bar1 = new OfficeExcel.Bar('cvs', [4,5,8,6,4,3,2]);
bar1.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
bar1.Set('chart.title', 'Total sales by day');
OfficeExcel.Effects.jQuery.Reveal(bar1);
}
/**
* This chart shows the total sales by day again, but this time broken down by person as well.
*/
function ShowChart2 ()
{
// Enable the correct button
document.getElementById("butDay").disabled = false;
var bar2 = new OfficeExcel.Bar('cvs', [[2,2],[3,2],[5,3],[3,3],[3,1],[2,1],[1,1]]);
bar2.Set('chart.title', 'Sales broken down by day and person');
bar2.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
bar2.Set('chart.key', ['John','Brandon']);
bar2.Set('chart.ymax', 10);
OfficeExcel.Effects.jQuery.Reveal(bar2);
}
/**
* This function hides the canvas (whichever chart is being shown) and calls the relevant function to
* show the desired chart. It uses the Conceal effect to hide the canvas and passes the appropriate
* function as the "callback" which is called when the Concealeffect is done.
*
* The callback then clears the canvas and draws the appropriate chart on it.
*/
function TransitionTo(func)
{
// Disable both buttons
document.getElementById("butDay").disabled = true;
document.getElementById("butDayAndPerson").disabled = true;
OfficeExcel.Effects.jQuery.Conceal(document.getElementById("cvs").__object__, null, func);
}
/**
* Initially the canvas is blabk so there is no need to clear anything. So it is sufficient to
* just call the relevant function to show the first chart.
*/
window.onload = function ()
{
ShowChart1();
}
&lt;/script&gt;
</pre>
<h4>3. The buttons that trigger the transitions</h4>
<p>
These are just some regular HTML buttons that trigger the transitioning to a new chart. Buttons are disabled when clicked
so that double clicking does not cause any ill-effects. The appropriate button is then enabled when the new chart is shown.
</p>
<pre class="code">
&lt;button onclick="TransitionTo(ShowChart1)" disabled="disabled" id="butDay"&gt;Show sales by day only&lt;/button&gt;
&lt;button onclick="TransitionTo(ShowChart2)" disabled="disabled" id="butDayAndPerson"&gt;Show sales by day and person&lt;/button&gt;
</pre>
<h4>Note</h4>
<p>
Some effects may be unusable in this type of situation because of the references that are added to the canvas. If this situation
arises however it is feasible to use two separate canvas tags which are positioned at the exact same point, and use the
<i>display:</i> CSS attribute to switch between the two. This may also be necessary if you use any interactive features
such as tooltips.
</p>
</body>
</html>

514
OfficeWeb/sdk/Common/Charts/docs/hprogress.html
View file

@ -1,514 +0,0 @@
<!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 personal, |
* | charity and educational purposes it is free to use. You can read the full |
* | license here: |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Documentation about the Horizontal progress bar</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs external libraries" />
<meta name="description" content="Documentation about the HProgress Bar including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
Horizontal Progress bar
</div>
<h1>Horizontal <span>progress bar documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the progress bar. The arguments are: the canvas tag ID, the value and the
// maximum value.</span>
var myProgress = new OfficeExcel.HProgress('myProgress', 78, 100);
<span class="javascript-comment">// Configure the progress bar to appear as requested.</span>
myProgress.Set('chart.colors', ['red']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
myProgress.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/hprogress.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myProgress.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#chart configuration">Chart configuration</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#misc">Miscellaneous</a></li>
<li><a href="#key">Key</a></li>
</ul>
<a name="chart configuration"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3>
<a name="chart.tickmarks"></a>
<b>chart.tickmarks</b><br />
Whether the tickmarks are drawn. <br />
<i>Default: true</i><br /><br />
<a name="chart.tickmarks.color"></a>
<b>chart.tickmarks.color</b><br />
The color used for tickmarks.<br />
<i>Default: black</i><br /><br />
<a name="chart.tickmarks.inner"></a>
<b>chart.tickmarks.inner</b><br />
This controls whether the bar has inner tickmarks<br />
<i>Default: false</i><br /><br />
<a name="chart.tickmarks.zerostart"></a>
<b>chart.tickmarks.zerostart</b><br />
If true, labels and tickmarks will start at and show zero.<br />
<i>Default: false</i><br /><br />
<!--
<a name="chart.value"></a>
<b>chart.value</b><br />
The indicated value. You don't need to set this because it's one of the arguments to the constructor.<br /><br />
<a name="chart.max"></a>
<b>chart.max</b><br />
The maximum value. You don't need to set this because it's one of the arguments to the constructor.<br /><br />
-->
<a name="chart.numticks"></a>
<b>chart.numticks</b><br />
How many tick marks there are. <br /><i>Default: 10</i><br /><br />
<a name="chart.numticks.inner"></a>
<b>chart.numticks.inner</b><br />
How many inner tick marks there are. <br /><i>Default: 50</i><br /><br />
<a name="chart.arrows"></a>
<b>chart.arrows</b><br />
This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.<br><i>Default: false</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a>
<b>chart.colors</b><br />
The colors of the bar(s). This can be a solid color, or a gradient that you create. <br /><i>Default: [#0c0]</i><br /><br />
<a name="chart.background.color"></a>
<b>chart.background.color</b><br />
The background color. <br /><i>Default: #eee</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).<br /><i>Default: false</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow.<br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The blurring effect that is applied to the shadow.<br /><i>Default: 3</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points). <br /><i>Default: 10</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
Labels that are applied to the chart. <br />
<i>Default: An empty array</i><br /><br />
<a name="chart.labels.position"></a>
<b>chart.labels.position</b><br />
This determines whether the labels are placed on the top or the bottom of the progress bar.<br />
<i>Default: bottom</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the Y scale is measured in (these are preppend to the number). <br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the Y scale is measured in (these are appended to the number). <br />
<i>Default: none</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the Y scale.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the progress bar. <br /><i>Default: An empty string</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array, albeit one element only. This is shown when the progress bar is clicked on. This can contain HTML.<br /><i>Default: An empty array</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing the tooltip. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the tooltips use.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="chart.adjustable"></a>
<b>chart.adjustable</b><br />
Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it). <br /><i>Default: false</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key. Either <b>graph</b> or <b>gutter</b> (default).<br />
<i>Default: gutter</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: true</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
</div>
<br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This method returns the details of a focused bar (ie clicked or mouseover'ed. It returns:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the bar</li>
<li>The height of the bar</li>
<li>The index of the bar (starting from 0)</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="getValue"></a>
<b>obj.getValue(mixed)</b>
<p>
This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use.
Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element
array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse
or coordinates are in the gutter areas. An example:
</p>
<pre class="code">
myChart.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
</pre>
</body>
</html>

65
OfficeWeb/sdk/Common/Charts/docs/iframe-setup.html
View file

@ -1,65 +0,0 @@
<!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");
?>

164
OfficeWeb/sdk/Common/Charts/docs/iframe.html
View file

@ -1,164 +0,0 @@
<!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>Integrating OfficeExcel with external libraries and covering the scrollbars</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs external libraries" />
<meta name="description" content="Documentation about covering the scrollbars with the ModalDialog" />
<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>
obj = document.all ? top.document.all['myCover'] : top.document.getElementById('myCover');
iframe = document.all ? top.document.all['myIframe'] : top.document.getElementById('myIframe');
function Cover (msg)
{
// Show the ModalDialog
top.ModalDialog.Show('loginDialog', 300);
}
/**
* This function uncovers the window
*/
function Uncover ()
{
Resize = function (size)
{
iframe.style.width = size + 'px';
iframe.style.height = size + 'px';
iframe.style.position = 'static';
iframe.style.border = '2px dashed gray';
}
for (var i=0; i<10; i++) {
setTimeout('Resize(' + (((10 - i) * 50) + 250 )+')', i * 50);
}
}
</script>
<?php PrintAnalyticsCode() ?>
</head>
<body id="outer">
<!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../" target="_top">OfficeExcel: HTML5 Javascript charts library</a>
>
<a href="./" target="_top">Documentation</a>
>
Covering the browsers scroll bars
</div>
<h1>Covering the scroll bars</h1>
<button onclick="top.location.href = 'external.html#covering'">&laquo; Back</button>
<button onclick="Cover('The window is now completely covered...')">Cover me!</button>
<button onclick="Uncover()">Resize me!</button>
<p>
This is an example of getting the ModalDialog to cover the entire page - including the scroll bars. A regular DIV does
not do this. This text is just here to pad the page and ensure that the browser creates a scroll bar.
</p>
<hr>
<p>
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
</p>
<p>
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
</p>
<p>
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui
</p>
</body>
</html>

129
OfficeWeb/sdk/Common/Charts/docs/image2url.html
View file

@ -1,129 +0,0 @@
<html>
<head>
<title>Image to data: url converter</title>
<style>
body {
font-size: 12pt;
font-family: Georgia;
}
</style>
</head>
<body onload="document.getElementById('url').focus(); document.getElementById('url').value = '/images/logo.png'">
<div style="position: fixed; right: 5px; background-color: #eee; border: 2px solid #000; padding: 3px">
<a href="http://www.OfficeExcel.net" target="_blank"><i>Courtesy of www.OfficeExcel.net</i></a>
</div>
<h1>Image to data: url converter</h1>
<i>
This only works for online images, which are on the [<script>document.write(location.host)</script>] domain. There's no server-side
scripting though, so feel free to put it on your website and use it there.
</i>
#
<h2>Why use data: URLs?</h2>
<p>
By using data: URLs you reduce the number of HTTP requests needed to display your page since the images are part of the
page itself. This does mean though that the images can't be cached (unless of course the page itself is cached). But, if you were
to reuse the same image on subsequent pages, they wouldn't be cached. You can get around this though by using some
Javascript at the bottom of your page to change the URLs to the real image files. The
<a href="http://www.OfficeExcel.net" target="_blank">www.OfficeExcel.net</a> front page uses this technique.
</p>
<p />
URL: <input type="text" value="" id="url" />
<button onclick="Go()">Go!</button>
<p />
The data: url:
<textarea id="output" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the output URL goes...</textarea>
<p />
A full image tag with the url as the src:
<textarea id="output_tag" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the image tag goes...</textarea>
<p>The image itself using the data: url:</p>
<script>
function Go()
{
var url = document.getElementById("url").value;
var text = document.getElementById("output");
var text_tag = document.getElementById("output_tag");
var img = document.createElement('IMG');
img.src = url;
document.body.appendChild(img);
/*******************************************************
* Create the canvas and paint the image onto it
*******************************************************/
canvas = CreateCanvas(img);
/*******************************************************
* Now use the .toDataURL() function to get the data: url
*******************************************************/
var data = canvas.toDataURL();
/*******************************************************
* Populate the first text box
*******************************************************/
text.value = data;
text.select();
/*******************************************************
* Populate the second text box
*******************************************************/
text_tag.value = '<img src="' + data + '" width="' + img.offsetWidth + '" height="' + img.offsetHeight + '" alt="An image" />'
/*******************************************************
* Add the image tag just created to the DOM
*******************************************************/
img.src = data;
img.width = img.offsetWidth;
img.height = img.offsetHeight;
}
/*******************************************************
* This function creates the canvas and appends it to the
* DOM
*
* @param img The image DOM object
*******************************************************/
function CreateCanvas(img)
{
var canvas = document.createElement('CANVAS');
var context = canvas.getContext('2d');
canvas.width = img.offsetWidth;
canvas.height = img.offsetHeight;
document.body.appendChild(canvas);
/*******************************************************
* Now add the image to the canvas
*******************************************************/
context.drawImage(img, 0, 0);
/*******************************************************
* Move the canvas off-screen
*******************************************************/
canvas.style.position = 'absolute';
canvas.style.left = (-1 * img.offsetWidth) + 'px';
canvas.style.top = (-1 * img.offsetHeight) + 'px';
return canvas;
}
</script>
</body>
</html><!-- Social networking buttons -->
<?php
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
require("/OfficeExcel.{$prefix}/social.html");
?>

911
OfficeWeb/sdk/Common/Charts/docs/index.html
View file

@ -1,911 +0,0 @@
<!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>The OfficeExcel documentation and other HTML5 examples</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs examples" />
<meta name="description" content="The OfficeExcel documentation along with other HTML5 examples" />
<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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<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>
>
Documentation and HTML5 examples
</div>
<h1>Documentation <span>and HTML5 examples</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="text-align: center">
<div class="warning" style="display: inline; display: inline-block">
Need something that OfficeExcel doesn't currently support? OfficeExcel license holders can usually be accomodated - please
<a href="mailto:support@OfficeExcel.net"><b>contact support</b></a> to discuss your requirements.
</div>
</div>
<div>
<h4>Introduction</h4>
<ul>
<li>
<a href="../index.html#intro" title="A short description of OfficeExcel: HTML5 Javascript charts library">Introduction to OfficeExcel: HTML5 Javascript charts library</a>
<ul>
<li><a href="what-is-html5-canvas.html" title="A brief description of what HTML5 canvas is">What is HTML5 canvas?</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="../examples/index.html"><b>Example charts</b></a></li>
<li><a href="licensing.html">The OfficeExcel license</a></li>
<li><a href="release-notes.html">Release notes</a></li>
</ul>
</div>
<div style="float: left; width: 202px">
<h4>Chart types</h4>
<ul>
<li><a href="bar.html">Bar charts</a></li>
<li><a href="bipolar.html">Bi-polar charts</a></li>
<li><a href="donut.html">Donut charts</a></li>
<li><a href="fuel.html">Fuel charts</a></li>
<li><a href="funnel.html">Funnel charts</a></li>
<li><a href="gauge.html">Gauge charts</a></li>
<li><a href="gantt.html">Gantt charts</a></li>
<li><a href="hbar.html">Horizontal bar charts</a></li>
<li><a href="hprogress.html">Horizontal progress bar</a></li>
<li><a href="led.html">LED Grid</a></li>
<li><a href="line.html">Line charts</a></li>
<li><a href="meter.html">Meter charts</a></li>
<li><a href="odo.html">Odometer charts</a></li>
<li><a href="pie.html">Pie charts</a></li>
<li><a href="radar.html">Radar charts</a></li>
<li><a href="rose.html">Rose charts</a></li>
<li><a href="rscatter.html">Radial scatter charts</a></li>
<li><a href="scatter.html">Scatter charts</a></li>
<li><a href="thermometer.html">Thermometer charts</a></li>
<li><a href="vprogress.html">Vertical progress bar</a></li>
<li><a href="waterfall.html">Waterfall charts</a></li>
</ul>
<h4>Basic examples</h4>
<ul>
<li><a href="basic.html">A basic example</a></li>
<li><a href="basic_events.html">A basic example of the OfficeExcel pseudo-events</a></li>
<li><a href="basic_tooltips.html">A basic example of a charts in tooltips</a></li>
<li><a href="basic_combined.html">A basic example of a combined Bar/Line chart</a></li>
</ul>
</div>
<div style="float: left; width: 435px">
<h4>HOWTO Guides</h4>
<ul>
<li><a href="howto-make-a-transition-effect.html">Make a transition effect</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
<li><a href="howto-events.html">Add events to your charts</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
<li><a href="howto-images.html">Add images to your charts</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
<li><a href="howto-linking.html">Add links to your charts</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
<li><a href="howto-events-modaldialog.html">Use the ModalDialog with events</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
</ul>
<h4>Features and examples</h4>
<ul>
<li><a href="pseudo-standard-events.html">Pseudo-standard events</a><img src="../images/new.png" alt="New!" width="31" height="12" /></li>
<li><a href="financial.html">Displaying financial data</a></li>
<li><a href="xml-data.html">Fetching data from an XML file (AJAX)</a></li>
<li><a href="effects.html">Animation and visual effects</a></li>
<li><a href="gutters.html">Variable gutter sizes</a></li>
<li><a href="setconfig.html">The OfficeExcel.SetConfig() function</a></li>
<li><a href="keys.html">Examples of keys in charts</a></li>
<li><a href="dynamic.html">Updating your charts dynamically</a></li>
<li><a href="png.html">Retrieving a PNG of your charts</a></li>
<li><a href="domcontentloaded.html">DOMContentLoaded example</a></li>
<li><a href="events.html">Custom OfficeExcel events</a></li>
<li><a href="adjusting.html">Adjusting your charts interactively</a></li>
<li><a href="tooltips.html">Using tooltips in your charts</a></li>
<li><a href="resizing.html">Resizing your charts</a></li>
<li><a href="msie.html">Microsoft Internet Explorer support</a></li>
<li><a href="async.html">Asynchronous processing</a></li>
<li><a href="zoom.html">Zooming your charts</a></li>
<li>
<a href="annotating.html">Annotating your charts</a>
<ul>
<li><a href="annotate_persist.html">Making your annotations shareable across browsers/computers</a></li>
</ul>
</li>
<li><a href="combine.html">Combining charts</a></li>
<li><a href="external.html">Integrating OfficeExcel with external libraries (ModalDialog)</a></li>
<li><a href="css.html">Available CSS classes</a></li>
<li><a href="color.html">About canvas color definitions</a></li>
<li><a href="context.html">Context menus</a></li>
</ul>
</div>
<div style="float: left; width: 338px">
<h4>Miscellaneous</h4>
<ul>
<li><a href="#support" title="Need support? Get it here"><b>Support</b></a></li>
</ul>
<ul>
<li><a href="misc.html">Miscellaneous documentation</a></li>
<li><a href="issues.html">Common issues</a></li>
<li>
<a href="api.html">API Documentation</a>
<p />
</li>
<li><a href=".CHANGELOG.txt">The changelog</a></li>
<li><a href=".BC.txt">Backwards compatibility breaks</a></li>
</ul>
<h4>On this page:</h4>
<ul>
<li><a href="#benefits" title="Benefits of OfficeExcel: HTML5 Javascript charts library">Benefits of OfficeExcel: HTML5 Javascript charts library</a></li>
<li><a href="#browser" title="Information about browser support">Browser support</a></li>
<li><a href="#performance" title="Things you may want to look at concerning performance">Improving the performance of your charts</a></li>
<li><a href="#implementation" title="Implementing OfficeExcel on your website">Implementing OfficeExcel</a></li>
<li><a href="#structure" title="Suggested structure for OfficeExcel">Suggested structure for OfficeExcel</a></li>
<li>
<a href="#integration" title="Information on integrating OfficeExcel with server side scripting">Integration with server side scripting</a>
<ul>
<li><a href="#mysql" title="Integration with PHP &amp; MySQL">Integration with PHP &amp; MySQL</a></li>
<li><a href="#ajax" title="Making AJAX requests">Making AJAX requests</a></li>
</ul>
</li>
</ul>
</div>
<!------------------------------------------------------------------------------------------------------------------------>
<br clear="all" />
<hr />
<a name="benefits"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Benefits of OfficeExcel: HTML5 Javascript charts library</h2>
<p>
The HTML5 canvas tag is a new tag for HTML5. It allows for two dimensional drawing easily using Javascript.
This makes it perfect for producing charts. Because Javascript runs on your users' computer, none of the load on your web server
normally associated with producing charts is incurred. Not only that but because
of the greater processing power that is typically available on users' computers, they will be much faster. And,
because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and
cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as
benefiting your website, ie:
</p>
<ul>
<li><b>It can save you money by reducing the load on your web server(s)</b><br /><br /></li>
<li><b>It can speed up your web pages</b></li>
</ul>
<p>
Imagine, you are creating 10,000 charts a day and the data is such that the resulting charts cannot be cached. With the OfficeExcel
library you can reduce that figure to zero. All the processing is done by each individual web browser, much like
showing the HTML that you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries
once. So, much lower bandwidth bills and less strain on your webserver.
</p>
<p>
And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page
on your own PC. Download the archive and see! Useful if you need to do a presentation (for example) and want to use the same
charts as your website.
</p>
<div>
<div style="width: 45%; background-color: #fff; display: inline; display: inline-block">
<ul>
<li>Cross browser support.</li>
<li>20+ Different base chart types (<a href="../examples/index.html">Examples</a>).</li>
<li>Charts work on and off-line.</li>
<li>Interactive features.</li>
</ul>
</div>
<div style="width: 45%; display: inline; display: inline-block">
<ul>
<li>Charts are created on the client - no server overhead.</li>
<li>Very easy setup (see <a href="#implementation">Implementing OfficeExcel</a>).</li>
<li>Fully documented.</a></li>
<li>Very easy to learn.</li>
</ul>
</div>
</div>
<a name="browser"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Browser support</h2>
<p>
Since the charts are produced using HTML5 features (the new <b>canvas</b> tag), client support includes:
</p>
<ul>
<li>Mozilla Firefox 3.0+</li>
<li>Google Chrome 1+</li>
<li>Apple Safari 3+</li>
<li>Opera 9.5+</li>
<li>Microsoft Internet Explorer 7+ (see note)</li>
<li>iPhone (text support from iOS v4+)</li>
<li>iPad (text support from iOS v4.2+)</li>
</ul>
<p>
The HTML5 canvas tag is part of the <a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5 specification</a>,
and all of the above browsers have some sort of support for it.
</p>
<p>
<b>HTML5 canvas &amp; Microsoft Internet Explorer (MSIE)</b><br />
Microsoft Internet Explorer 6/7/8 don't natively support the HTML5 canvas tag. To support
MSIE 7 and 8 you will need to use either
<a href="http://code.google.com/chrome/chromeframe/" target="_blank">Google Chrome Frame</a> or
<a href="http://code.google.com/p/explorercanvas/" target="_blank">ExCanvas from Google</a>
(which is included in the OfficeExcel archive). Read more about Internet Explorer compatibility
<a href="msie.html">here</a>.
<p />
<span style="color: #090">
Starting from the developer preview 3, <b style="color: black">Microsoft Internet Explorer 9</b> has full support for
HTML5 canvas.
</span>
<p>
MSIE 6 is supported using Google Chrome Frame.
</p>
</p>
<p>
<b>OfficeExcel and older browsers</b><br />
Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or
text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested.
</p>
<p>
<b>Other devices</b><br />
Other devices (eg mobile devices) may support or may be intending to support the HTML5 canvas tag as part of their HTML5 support. Typically
the newer a device or its OS the higher the likelyhood is that it has support for HTML5 canvas.
</p>
<a name="performance"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Improving the performance of your charts</h2>
<p>
Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune
OfficeExcel further. The biggest thing you can do is use HTTP compression, which reduces the initial download time of the libraries,
but there are a number of things you can do:
</p>
<ul>
<li>
<b>Compression</b><br />HTTP compression can dramatically reduce your bandwidth bills and increase the speed
of your website. The OfficeExcel.common.core.js file for example used to be over 100k, but with compression this was reduced
to around 17k. Less than a fifth of the original size! <span style="color: red">If you do only one thing to aid performance,
then it should be this.</span>
<p>
To achieve this with Apache you have a few options:
</p>
<ul style="list-style-type: disc">
<li>You can use the Apache module mod_gzip which compresses the libraries on the fly.</li>
<li>
You can compress the libraries manually using the Unix gzip command, rename them to remove the .gz suffix
and add the header using an Apache directive
(eg <span style="background-color: #C5FFC5; padding: 1px">AddEncoding gzip .js</span>). If you have some sort of
release process/script, it would make sense to add this to it to automate the procedure.
</li>
</ul>
<p>
</li>
<li>
<b>Minification</b><br />
Minification reduces the size of the library before compression takes effect, removing unnecessary spaces and comments etc.
A combination of minification and compression will give superb results. For example, before being split up into seperate files,
minification combined with compression reduced the common library from over 100k to roughly 10k (!). There is a PHP shell
script that you can use to minify the libraries in the scripts directory.
<p>
You can get pre-minified versions of the libraries <a href="http://www.OfficeExcel.net/OfficeExcel.minified.zip">here</a>.
</p>
</li>
<p>
<li>
<b>Pre-emptive caching</b><br />
Slightly different to caching itself, is pre-emptive caching. This involves downloading the libraries before the page that requires
them is shown. This way, they're already in the users browser cache and the chart will subsequently appear to be much much
quicker. An example of this would be having the library included at the bottom of your index page of your website (optionally
with the <b>defer="defer"</b> attribute). The script can be downloaded at will because the page doesn't actually use it, but
for subsequent pages it will already be in the users browser cache.
<p>
</li>
<li>
<b>Caching</b><br />
Since the libraries you're using won't change that often, you can set distant Expires: headers on them, or appropriate
Cache-Control: headers, and the client will not even have to contact your server for it. When you want to make sure
the library is re-downloaded (eg. you update the library), then simply change the filename.
<p>
</li>
<li>
<b>Script tag placement</b><br />
According to <a href="http://developer.yahoo.com/performance/" target="_blank">Yahoo! guidelines</a> placing the &lt;SCRIPT&gt;
tag at the bottom of the page can increase the percieved load time. If you do this, then your charts should be
created in the window.onload event, otherwise the browser may try to create them without the library
having been loaded, and will therefore subsequently fail.
<p>
You should also consider the effect that this has when your page is rather weighty. If the page is weighty there
will be a small delay before the onload event fires, and therefore creates the chart. This might not be so bad if the
chart is not immediately visible, however if it is then you should carefully consider using the onload event. You
may wish to load the library in the page header, define the canvas tag and then immediately define the javascript
that creates the chart. This way
the chart will be created and shown, and then the rest of the page loads. The end result is that your chart
appears to be faster.
<p />
Between the onload event, asychronous Javascript and careful tag placement, you will need to experiment to get the right result
for you.
</li>
<li>
<b>Document structure</b><br />
The structure of your document can have a significant impact on how fast your charts are displayed. If, for example, you use
tables for layout, this can delay the display of elements that are affected by the size of the table. Where possible, you
should consider trying to convert your layout to DIVs. An example of this is the front page of this website. The charts
were right aligned using a table as a container. This caused a visible delay when showing them. In this case it was a
simple matter to convert the page to use DIVs, and the page subsequently displays much faster.
<p />
</li>
<li>
<b>Creating your charts asynchronously</b><br />
Where possible, you may wish to create your charts asynchronously. This allows the browser to continue rendering the page
immediately after getting to the code that creates the chart. This might not be perceptible if you don't have a lot of
charts, or your page is small. You can read a little more about this and see example code <a href="async.html">here</a>.
<p />
Note that recent releases of Google Chrome (from a dev release of version 4) have had an issue with creating charts
asynchronously, which presents itself by not drawing text sometimes (it's not consistent). Simply not using
asynchronous chart production in this case resolves the issue.
</li>
<li>
<b>DOMContentLoaded event</b><br />
Using this event can speed up the display of your charts signifcantly compared to the more well known <i>onload</i> event.
It is supported by Chrome, Gecko based browsers (ie Firefox), Safari, Opera and Internet Explorer 9. This event fires when
the structure of the page is loaded, but not necessarily the images or CSS. This means that if your page is laden with
images, this event will fire before the onload event, thus creating your charts quicker. The effect can be very noticeable.
<pre class="code">
function addListener(func)
{
if(window.addEventListener) {
window.addEventListener('DOMContentLoaded', func, false);
} else {
document.attachEvent("onDOMContentLoaded", func);
}
}
</pre>
You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>,
and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>.
There's an example <a href="domcontentloaded.html">here</a>.
<p />
</li>
<li>
<b>AJAX requests</b><br />
If you can take advantage of AJAX, you can use this method to retrieve data from your server. If, for example, you have a chart that
shows ongoing information, instead of simply refreshing the entire page, you could use an AJAX request to just retrieve the
data that you want and update the chart that way. This reduces the amount of data needed to be transferred, thus reducing the
bandwidth used, and will be quicker than a full page refresh, particularly if your page is weighty. There's a simple AJAX
function that you can use <a href="#ajax">below</a>.
<p />
</li>
<li>
<b>Combining libraries</b><br />
You may wish to consider combining the OfficeExcel libraries into a single file.
This won't save on the size of the individual libraries, but will save on the headers that are sent as part of the response.
If a typical response sends 500 bytes worth of headers, and you send four chart libraries, then combining the libraries
would save 1500 bytes. Multiple factors need to be considered though, including things like caching, which can circumvent
the unneccessary repeated downloading of the libraries.
<p>
To make your life straight-forward, you may want to make this a part of your release script/process. This way you
can make changes to the scripts in your development environment as you would normally.
</p>
<p>
Another effect of combining libraries is reducing the amount of HTTP connections needed to retrieve them. Most browsers
have a limit on how many connections they can create simultaneously, so if they're not being used to retrieve your
chart libraries, they can be used for something else.
</p>
</li>
<li>
<b>Avoiding shadow blur with animations</b><br />
If you're using animations then you may wish to avoid or reduce the shadow blur that you're using. With HTML5 canvas shadow
blur is a drain on performance - so if you're looking to get the most out of your charts or are using animations
which require redrawing the chart, turning off the shadow blur can reduce the time it takes to draw the charts leading to
smoother charts.
</li>
</ul>
<b>A reasonable performance strategy</b>
<p>
Although there's a lot you can do in regards to performance, a few of the points here will suffice for most
websites:
<ul>
<li>Compression</li>
<li>Minification</li>
<li>Pre-emptive caching</li>
<li>Caching</li>
</ul>
The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain,
effectively for free. Secondly, use the minified libraries. Since you can download them <a href="../OfficeExcel.minified.zip">here</a>,
you might as well use them. Then we have pre-emptive caching. Since most websites won't show charts on the front page or will
have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching
should be done as a matter of course. There's no reason to keep downloading the same library so even caching for only 30 minutes
(or the duration of an average visit to your website) will produce results.
</p>
<p>
<b>General website performance tools</b><br /><br />
If your aim is to improve your websites performance as a whole then you may be interested in these tools:
</p>
<ul>
<li>
<a href="http://www.webpagetest.org/" target="_blank">http://www.webpagetest.org/</a><br />
This site can provide a wealth of information about how to improve the permance of your website, specific to your site.<br /><br />
</li>
<li>
<a href="http://code.google.com/speed/page-speed/docs/using_chrome.html" target="_blank">Page Speed for Google Chrome</a><br />
<a href="http://code.google.com/speed/page-speed/docs/using_firefox.html" target="_blank">Page Speed for Mozilla Firefox</a><br />
<a href="http://pagespeed.googlelabs.com/" target="_blank">Page Speed online</a><br />
The Page Speed plugins and the online tool also provide a great deal of information about how to speed up your website.<br /><br />
</li>
<li>
<a href="image2url.html">Convert images to <i>data:</i> URLs</a><br />
A tool which converts images to <i>data:</i> URLs. Using <i>data:</i> URLs can reduce the number of HTTP requests used.
</li>
</ul>
<a name="implementation"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Implementing OfficeExcel</h2>
<p>
Getting OfficeExcel up and running is very easy and consists of three steps. If you're having trouble I suggest you get hold of a copy of
<a href="http://www.mozilla.com" target="_blank">Firefox</a> along with <a href="http://www.getfirebug.com" target="_blank">Firebug</a> - its
Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or
not using the onload event when you need to. You might also benefit from using the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a>
for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use
the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console.
</p>
<ol>
<li>
Include the libraries (put this in your documents &lt;HEAD&gt;):
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.adjusting.js"&gt;&lt;/script&gt; &lt;!-- Just needed for adjusting --&gt;
&lt;script src="OfficeExcel.common.annotate.js"&gt;&lt;/script&gt; &lt;!-- Just needed for annotating --&gt;
&lt;script src="OfficeExcel.common.context.js"&gt;&lt;/script&gt; &lt;!-- Just needed for context menus --&gt;
&lt;script src="OfficeExcel.common.effects.js"&gt;&lt;/script&gt; &lt;!-- Just needed for visual effects --&gt;
&lt;script src="OfficeExcel.common.resizing.js"&gt;&lt;/script&gt; &lt;!-- Just needed for resizing --&gt;
&lt;script src="OfficeExcel.common.tooltips.js"&gt;&lt;/script&gt; &lt;!-- Just needed for tooltips --&gt;
&lt;script src="OfficeExcel.common.zoom.js"&gt;&lt;/script&gt; &lt;!-- Just needed for zoom --&gt;
&lt;script src="OfficeExcel.bar.js"&gt;&lt;/script&gt; &lt;!-- Just needed for bar charts --&gt;
&lt;script src="OfficeExcel.bipolar.js"&gt;&lt;/script&gt; &lt;!-- Just needed for bi-polar charts --&gt;
&lt;script src="OfficeExcel.fuel.js"&gt;&lt;/script&gt; &lt;!-- Just needed for fuel charts --&gt;
&lt;script src="OfficeExcel.funnel.js"&gt;&lt;/script&gt; &lt;!-- Just needed for funnel charts --&gt;
&lt;script src="OfficeExcel.gantt.js"&gt;&lt;/script&gt; &lt;!-- Just needed for gantt charts --&gt;
&lt;script src="OfficeExcel.gauge.js"&gt;&lt;/script&gt; &lt;!-- Just needed for gauge charts --&gt;
&lt;script src="OfficeExcel.hbar.js"&gt;&lt;/script&gt; &lt;!-- Just needed for horizontal bar charts --&gt;
&lt;script src="OfficeExcel.hprogress.js"&gt;&lt;/script&gt; &lt;!-- Just needed for horizontal progress bars --&gt;
&lt;script src="OfficeExcel.led.js"&gt;&lt;/script&gt; &lt;!-- Just needed for LED charts --&gt;
&lt;script src="OfficeExcel.line.js"&gt;&lt;/script&gt; &lt;!-- Just needed for line charts --&gt;
&lt;script src="OfficeExcel.meter.js"&gt;&lt;/script&gt; &lt;!-- Just needed for meter charts --&gt;
&lt;script src="OfficeExcel.odo.js"&gt;&lt;/script&gt; &lt;!-- Just needed for odometers --&gt;
&lt;script src="OfficeExcel.pie.js"&gt;&lt;/script&gt; &lt;!-- Just needed for pie AND donut charts --&gt;
&lt;script src="OfficeExcel.radar.js"&gt;&lt;/script&gt; &lt;!-- Just needed for radar charts --&gt;
&lt;script src="OfficeExcel.rose.js"&gt;&lt;/script&gt; &lt;!-- Just needed for rose charts --&gt;
&lt;script src="OfficeExcel.rscatter.js"&gt;&lt;/script&gt; &lt;!-- Just needed for rscatter charts --&gt;
&lt;script src="OfficeExcel.scatter.js"&gt;&lt;/script&gt; &lt;!-- Just needed for scatter charts --&gt;
&lt;script src="OfficeExcel.thermometer.js"&gt;&lt;/script&gt; &lt;!-- Just needed for thermometer charts --&gt;
&lt;script src="OfficeExcel.vprogress.js"&gt;&lt;/script&gt; &lt;!-- Just needed for vertical progress bars --&gt;
&lt;script src="OfficeExcel.waterfall.js"&gt;&lt;/script&gt; &lt;!-- Just needed for waterfall charts --&gt;
</pre>
</li>
<li>
Add the canvas tag (put it where you want the chart to appear):
<pre class="code">
&lt;canvas id="myCanvas" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
</pre>
</li>
<li>
Create the chart (since it is using the onload event, you can put this anywhere):
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
var bar = new OfficeExcel.Bar('myCanvas', data);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('chart.gutter.left', 35);
bar.Draw();
}
&lt;/script&gt;
</pre>
</li>
</ol>
<p>
There's also a very <a href="../examples/basic.html">basic example</a> of using OfficeExcel, that does very little. It can be helpful to
illustrate how you can get OfficeExcel up and running.
</p>
<a name="structure"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Suggested structure for OfficeExcel</h2>
<img src="../images/structure.png" width="175" height="205" alt="Suggested structure for OfficeExcel" style="float: right" />
<p>
The suggested layout structure for the OfficeExcel libraries is shown on the right. The <b>www.example.com</b> folder represents
the root/top level of your website with the <b>javascript</b> directory beneath that. The <b>css</b> and <b>images</b>
folders are shown for
illustrative purposes only. If you follow this layout then your URLs to the OfficeExcel libraries would be:
</p>
<p>
<b>http://www.example.com/javascript/OfficeExcel/OfficeExcel.common.core.js</b><br />
<b>http://www.example.com/javascript/OfficeExcel/OfficeExcel.bar.js</b><br />
etc
</p>
<p>
By using this structure you make OfficeExcel easy to update should you need to, and also keep all the OfficeExcel libraries in
one, easy to find, place.
</p>
<br clear="all" />
<a name="integration"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Integration with server side scripting</h2>
<p>
This is a very easy process, as easy as sending content to the browser. All you need to do is make the <i>data</i> variable
(as in the example below) contain the data you want to be displayed. Eg:
</p>
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.line.js"&gt;&lt;/script&gt;
&lt;canvas id="myCanvasTag" width="600" height="200"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script&gt;
data = [78,16,26,23,25,51,34,64,84,84];
line = new OfficeExcel.Line("myCanvasTag", data);
line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);
line.Draw();
&lt;/script&gt;
</pre>
<p>
To get the above using PHP you could do this:
</p>
<pre class="code">&lt;?php
// This simply makes a string out of the array of data
$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
// This prints out the required HTML markup
print('&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;' . "\n");
print('&lt;script src="OfficeExcel.line.js"&gt;&lt;/script&gt;' . "\n\n");
print('&lt;canvas id="myCanvasTag" width="600" height="200"&gt;[No canvas support]&lt;/canvas&gt;' . "\n\n");
print('&lt;script&gt;' . "\n");
print(' var data = [' . $myData . '];' . "\n\n");
print(' var line = new OfficeExcel.Line("myCanvasTag", data);' . "\n");
print(' line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
print(' line.Draw();' . "\n");
print('&lt;/script&gt;');
?&gt;
</pre>
<p>
Strictly speaking the <span style="font-family: Monospace">var</span> isn't necessary, however if you put the code inside a
function (like window.onload), it's probably best to do so as using <span style="font-family: Monospace">var</span> will
make the variable local, and not global. So doing so will help prevent naming clashes.
</p>
<a name="mysql"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Integration with PHP &amp; MySQL</h4>
<p>
This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code
below shows (it's based on a database called OfficeExcel_example):
</p>
<pre class="code">
#
# Table structure for table `daily_statistics`
#
CREATE TABLE `daily_statistics` (
`st_day` char(9) NOT NULL,
`st_statistics` tinyint(4) NOT NULL,
UNIQUE KEY `st_day` (`st_day`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
#
# Dumping data for table `daily_statistics`
#
INSERT INTO `daily_statistics` VALUES ('Mon', 124);
INSERT INTO `daily_statistics` VALUES ('Tue', 95);
INSERT INTO `daily_statistics` VALUES ('Wed', 64);
INSERT INTO `daily_statistics` VALUES ('Thu', 94);
INSERT INTO `daily_statistics` VALUES ('Fri', 75);
INSERT INTO `daily_statistics` VALUES ('Sat', 98);
INSERT INTO `daily_statistics` VALUES ('Sun', 84);
</pre>
<pre class="code">
&lt;?php
/**
* Change these to your own credentials
*/
$hostname = "localhost";
$username = "root";
$password = "PASSWORD";
$database = "OfficeExcel_example";
$connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error());
mysql_select_db($database);
$result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
if ($result) {
$labels = array();
$data = array();
while ($row = mysql_fetch_assoc($result)) {
$labels[] = $row["st_day"];
$data[] = $row["st_statistics"];
}
// Now you can aggregate all the data into one string
$data_string = "[" . join(", ", $data) . "]";
$labels_string = "['" . join("', '", $labels) . "']";
} else {
print('MySQL query failed with error: ' . mysql_error());
}
?&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- Don't forget to update these paths --&gt;
&lt;script src="libraries/OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script src="libraries/OfficeExcel.line.js" &gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script&gt;
chart = new OfficeExcel.Line('cvs', &lt;?php print($data_string) ?&gt;);
chart.Set('chart.background.grid.autofit', true);
chart.Set('chart.gutter.left', 35);
chart.Set('chart.gutter.right', 5);
chart.Set('chart.hmargin', 10);
chart.Set('chart.tickmarks', 'endcircle');
chart.Set('chart.labels', &lt;?php print($labels_string) ?&gt;);
chart.Draw();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
This PHP code provides the data in two strings - <i>$labels_string</i> and <i>$data_string</i>. These variables are then used
in the OfficeExcel code to provide the data and the labels.
</p>
<p><b>Remember:</b></p>
<ul>
<li>Change the database hostname/username/password/database to match your own.</li>
<li>Ensure you have the correct paths to the OfficeExcel libraries.</li>
</ul>
<a name="ajax"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Making AJAX requests</h4>
<p style="background-color: #ffa; padding: 3px; border: 1px dashed black">
<b>Note:</b>
It is important that you're careful with types when making AJAX requests. Since the response is initially a string,
and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To
do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example:
</p>
<pre class="code">
&lt;script&gt;
num = Number('23');
num = parseInt('43');
&lt;/script&gt;
</pre>
<p>
Here is a simple function that you could use to get data from your server using AJAX:
</p>
<pre class="code">
&lt;script&gt;
/**
* Makes an AJAX call. It calls the given callback (a function) when ready
*
* @param string url The URL to retrieve
* @param function callback A function object that is called when the response is ready, there's an example below
* called "myCallback".
*/
function AjaxCall (url, callback)
{
// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
// MSIE
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = callback;
httpRequest.open('GET', url, true);
httpRequest.send();
}
/**
* This sample callback function is called when the data is ready (readyState=4)
*/
function myCallback ()
{
if (this.readyState == 4 && this.status == 200) {
// Everything is good, the response is received
alert(this.responseText);
}
}
&lt;/script&gt;
</pre>
<p>And you would use it like this:</p>
<pre class="code">
&lt;script&gt;
AjaxCall('http://www.example.com/getSomething.php', myCallback);
&lt;/script&gt;
</pre>
<p>
There's an example <a href="dynamic.html">here</a> that shows updating your chart dynamically and a fuller example
of fetching data with AJAX <a href="xml-data.html">here</a>.
</p>
<a name="support"></a>
<br />&nbsp;<br />&nbsp;<br />
<h2>Support</h2>
<p>
If you have a support issue you can send it to the support email address:
<a href="mailto:support@OfficeExcel.net"><b>support@OfficeExcel.net</b></a>. You can also follow
<a href="http://www.twitter.com/_OfficeExcel" target="_blank">@_OfficeExcel on twitter</a> to get notifications of new releases and
notable updates.
</p>
<p>
If you have a chart that you would like added to the <a href="http://dev.OfficeExcel.net/tests">test suite</a> of charts, then feel free to email it to the
support address above. The chart should be totally self-contained (ie not rely on external libraries like jQuery).
You can think of it this way - free testing! Thanks.
</p>
<br />
<br />
</body>
</html>

157
OfficeWeb/sdk/Common/Charts/docs/ingraph.html
View file

@ -1,157 +0,0 @@
<!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>Documentation about the in-graph labels that are available to you</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs ingraph in-graph" />
<meta name="description" content="Documentation about the in-graph labels that are available to you" />
<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.jpg"/>
<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>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<script src="../libraries/OfficeExcel.scatter.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>
>
In-graph labels
</div>
<h1>In-graph <span>labels</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>
<br />
<p>
This page shows the various options for in-graph labels. The in-graph labels can be set like this:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', [,,'Hoolio',,'Olga']);</pre>
<p>
Or like this if you want to be more specific:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', [,,<span style="color: green">['Hoolio', 'red', 'yellow', -1, 60]</span>,,'Olga']);</pre>
<p>
The array can consist of:
</p>
<ul>
<li>The label text</li>
<li>The text color</li>
<li>The background color</li>
<li>This can be 1 or -1 and denotes whether the label should be above or below the line. This has no effect in Bar or Scatter charts</li>
<li>The length of the label pointer/arrow</li>
</ul>
<h4>Example line chart</h4>
<canvas id="line" width="600" height="250">[No canvas support]</canvas>
<script>
myGraph = new OfficeExcel.Line('line', [4,5,6,3,2,5,6,4,2,4,1]);
myGraph.Set('chart.title', 'Line chart with in-graph labels');
myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']);
myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']);
myGraph.Draw();
</script>
<h4>Example bar chart</h4>
<canvas id="bar" width="600" height="250">[No canvas support]</canvas>
<script>
myGraph = new OfficeExcel.Bar('bar', [4,5,6,3,2,5,6,4,2,4,1]);
myGraph.Set('chart.colors', ['#fcc']);
myGraph.Set('chart.title', 'Bar chart with in-graph labels');
myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']);
myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']);
myGraph.Draw();
</script>
<canvas id="scatter" width="600" height="250">[No canvas support]</canvas>
<script>
myGraph = new OfficeExcel.Scatter('scatter', [[5,15],[24,30],[27,3],[23, 5]], [[4,12]]);
myGraph.Set('chart.title', 'Scatter chart with in-graph labels');
myGraph.Set('chart.labels', ['W1','W2','W3','W4']);
myGraph.Set('chart.labels.ingraph', [null,null,['Hoolio', 'red', 'yellow', -1, 60],'Olga','Fred']);
myGraph.Set('chart.xmax', 31);
myGraph.Draw();
</script>
<h4>Example bar chart (arrow variant)</h4>
<canvas id="bar1" width="600" height="250">[No canvas support]</canvas>
<script>
myGraph = new OfficeExcel.Bar('bar1', [4,5,6,3,2,5,6,4,2,4,1]);
myGraph.Set('chart.colors', ['#fcc']);
myGraph.Set('chart.title', 'Bar chart with in-graph labels (arrow variant)');
myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']);
myGraph.Set('chart.variant', 'arrow');
myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']);
myGraph.Draw();
</script>
<h4>Example bar chart (dot variant)</h4>
<canvas id="bar2" width="600" height="250">[No canvas support]</canvas>
<script>
myGraph = new OfficeExcel.Bar('bar2', [4,5,6,3,2,5,6,4,2,4,1]);
myGraph.Set('chart.colors', ['#fcc']);
myGraph.Set('chart.title', 'Bar chart with in-graph labels (dot variant)');
myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']);
myGraph.Set('chart.labels.ingraph', [6,['Foo', 'red', 'yellow', null, 75],3,'Bar']);
myGraph.Set('chart.variant', 'dot');
myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']);
myGraph.Draw();
</script>
</body>
</html>

112
OfficeWeb/sdk/Common/Charts/docs/issues.html
View file

@ -1,112 +0,0 @@
<!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>Common issues that you may come across</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs common issues" />
<meta name="description" content="Documentation about common issues that you may come across when using OfficeExcel" />
<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.jpg"/>
<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>
>
Common issues
</div>
<h1>Common <span>issues</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>
These are some common issues that you should be aware of. If you're having trouble, you may want to look through these to see
if any apply to you or may be the source of your problem.
</p>
<a name="requestAnnotationFrame"></a>
<h4>Low animation frame rate in Chrome 15</h4>
<p>
In Chrome 15 the experimental function <i>requestAnimationFrame()</i> has a lower frame-rate than it does in Chrome 14.
Not all animations are affected and animations that animate CSS properties using jQuery (eg the Line chart Trace
animation) shouldn't be affected. The Odometer is particularly affected if you use tickmarks. In this you can turn off
tickmarks and use the tickmark highlighting instead.
</p>
<p>
<b>Note:</b>
A second release of Chrome 15 seems to have rectified the issue so you may not experience this.
</p>
<a name="annotations"></a>
<h4>Annotations aren't saved when running locally in Mozilla Firefox</h4>
<p>
The solution here is to run the charts using a web server. At this time (March 2010) only Safari, Chrome and Opera
support saving annotations when running locally.
</p>
<h4>Shadows in Google Chrome and the line chart</h4>
<p>
Shadows in recent versions of Google Chrome are somewhat broken. Firefox, MSIE, Opera and Safari are fine. The reason for this
error is a combination of factors it seems - shadow blurring and line width. Fixes have been added to allow shadow blurring and
a 1 pixel linewidth, though some chart types may still be affected.
</p>
<!--
<p>
<b></b><br />
</p>
-->
</body>
</html>

152
OfficeWeb/sdk/Common/Charts/docs/keys.html
View file

@ -1,152 +0,0 @@
<!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>Examples of using keys in your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs LED chart" />
<meta name="description" content="Documentation about using keys in your charts" />
<meta name="googlebot" content="NOODP">
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../favicon.png">
<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.jpg"/>
<!-- 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.key.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<script src="../libraries/OfficeExcel.pie.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
var pie = new OfficeExcel.Pie('myPie', [45,43,23,68,84,41]);
pie.Set('chart.title', 'A pie chart showing gutter mode');
pie.Set('chart.key', ['John','Fred','Lou','Pete','Kevin','Gary']);
pie.Set('chart.key.position', 'gutter');
pie.Set('chart.key.position.y', pie.canvas.height - 35);
pie.Set('chart.key.rounded', false);
pie.Set('chart.key.shadow', true);
pie.Set('chart.key.shadow.offsetx', 3);
pie.Set('chart.key.shadow.offsety', 3);
pie.Set('chart.key.shadow.blur', 0);
pie.Set('chart.key.shadow.color', '#aaa');
pie.Set('chart.radius', 80);
pie.Draw();
var line = new OfficeExcel.Line('myLine', [8,4,2,5,6,4,3,7,8,9,7,6], [4,3,1,6,5,8,4,9,8,7,4,6]);
line.Set('chart.key', ['Richard', 'Fred']);
line.Set('chart.title', 'A line chart showing the key in graph mode (interactive)');
line.Set('chart.key.position', 'graph');
line.Set('chart.key.shadow', true);
line.Set('chart.key.shadow.offsetx', 0);
line.Set('chart.key.shadow.offsety', 0);
line.Set('chart.key.shadow.blur', 15);
line.Set('chart.key.shadow.color', '#ccc');
line.Set('chart.key.interactive', true);
line.Set('chart.hmargin', 5);
line.Set('chart.linewidth', 3);
line.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
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>
>
Examples of keys in charts
</div>
<h1>Examples <span>of keys in 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; display: inline-block; width: 650px">
<canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>
<canvas id="myPie" width="450" height="250" style="float: right">[No canvas support]</canvas>
</div>
<p>
As of 4th December 2010 the code that produces the keys has been rewritten. There are two variants of keys available,
a horizontal one designed to sit in the gutter, and a vertical one that is designed to sit on top of (ie over) the chart.
</p>
<p>
The actual positioning is now configurable though, so you could have a horizontal key and position it to sit on top
of the chart.
</p>
<h4>Key properties</h4>
<p>
The available key properties and their defaults are listed below (some chart types have slightly different defaults to
suit):
</p>
<ul>
<li>chart.key (<i>[] (An empty array)</i>)</li>
<li>chart.key.position (<i>graph</i>)</li>
<li>chart.key.position.gutter.boxed (<i>true</i>)</li>
<li>chart.key.position.x (<i>null</i>)</li>
<li>chart.key.position.y (<i>null</i>)</li>
<li>chart.key.shadow (<i>false</i>)</li>
<li>chart.key.shadow.offsetx (<i>2</i>)</li>
<li>chart.key.shadow.offsety (<i>2</i>)</li>
<li>chart.key.shadow.color (<i>#666</i>)</li>
<li>chart.key.shadow.blur (<i>3</i>)</li>
<li>chart.key.color.shape (<i>square</i>)</li>
<li>chart.key.background (<i>white</i>)</li>
<li>chart.key.rounded (<i>true</i>)</li>
<li>chart.key.text.size (<i>10</i>)</li>
</ul>
<h4>Interactive keys</h4>
<p>
The Line chart supports interactive keys - as shown in the example. This is only available when the key
is in <i>graph</i> mode. This allows you to click a key item and it will be highlighted on the chart.
</p>
</body>
</html>

182
OfficeWeb/sdk/Common/Charts/docs/led.html
View file

@ -1,182 +0,0 @@
<!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>Documentation about the LED Grid</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs LED chart" />
<meta name="description" content="Documentation about LED charts including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
LED Grids
</div>
<h1>LED <span>Grid documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the LED object</span>
var led = new OfficeExcel.LED('myCanvas', 'An LED display');
<span class="javascript-comment">// Configure the LED chart to look as wished</span>
led.Set('chart.dark', '#666');
led.Set('chart.light', 'white');
<span class="javascript-comment">// Call the .Draw() method to draw the chart</span>
led.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/led.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the LED grid apears.
</p>
<ul>
<li><a href="#chart configuration">Chart configuration</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
</ul>
<a name="chart configuration"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> <a name="chart.dark"></a>
<b>chart.dark</b><br />
Color of the darkened (ie unlit) lights<br /><i>Default: #eee</i><br /><br />
<a name="chart.light"></a>
<b>chart.light</b><br />
Color of lit lights<br /><i>Default: #f66</i><br /><br />
<a name="chart.background"></a>
<b>chart.background</b><br />
The color of the background.<br /><i>Default: white</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
</div><!-- /DOCS --><br /><br />
</body>
</html>

399
OfficeWeb/sdk/Common/Charts/docs/licensing.html
View file

@ -1,399 +0,0 @@
<!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>Licensing FAQs and information</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart licensing" />
<meta name="description" content="Documentation and information about the OfficeExcel license" />
<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.jpg"/>
<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>
<?php PrintAnalyticsCode() ?>
</head>
<body id="licensing">
<a name="top"></a>
<!-- 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>
>
The OfficeExcel license
</div>
<h1>The <span>OfficeExcel license</span></h1>
<p>
OfficeExcel is free to use for non-commercial entities and there is a non-free commercial license available for commercial entities
who wish to use OfficeExcel. The commercial license is described below.
</p>
<ul>
<li><a href="#license.overview">An overview of the licensing terms</a></li>
<li>
<a href="#license.commercial">Commercial usage</a>
<ul>
<li><a href="#license.commercial.faqs">Commercial license FAQs</a></li>
</ul>
</li>
<li><a href="#license.free">Non-commercial free usage</a></li>
<li><a href="#license.legal">Legal terms</a></li>
</ul>
<ul>
<li><a href="#contact"><b>Contact support</b></a></li>
</ul>
<a name="license.overview"></a>
&nbsp;<br /><br />
<h2>An <span>overview of the licensing terms</span></h2>
<div style="float: right; margin-right: 50px; text-align: center">
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
<input name="item_name_1" type="hidden" value="OfficeExcel License" />
<input name="item_description_1" type="hidden" value="License for OfficeExcel: HTML5 Javascript charts library" />
<input name="item_quantity_1" type="hidden" value="1" />
<input name="item_price_1" type="hidden" value="79.0" />
<input name="item_currency_1" type="hidden" value="GBP" />
<input name="_charset_" type="hidden" value="utf-8" />
<input alt="" width="116" height="61" src="../images/buy.png" type="image" />
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="FDVK4T4GKQ6M8">
<input type="image" src="../images/paypal.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<p>
A simple and straight-forward overview of the licensing is that for <a href="#license.commercial">commercial</a> use there
is a single licensing fee of <b>&pound;79</b> (GBP) (which is approximately $120 USD)
whilst for <a href="#license.free">non-commercial use</a> (eg personal, government, charity, educational etc) it's free
to use assuming that you link to <a href="http://www.OfficeExcel.net" target="_blank">www.OfficeExcel.net</a> on your website.
</p>
<a name="license.commercial"></a>
&nbsp;<br /><br />
<h2>Commercial <span>usage</span></h2>
<p>
Commercial usage covers commercial entities for their websites
(either internal or external) or in software that they produce. If your organisation generates
profit then a commercial license is most appropriate. There are some legal terms and FAQs below that
should help to answer any questions that you may have, but if they don't then you can
email your question to: <a href="mailto:support@OfficeExcel.net"><b>support@OfficeExcel.net</b></a>
</p>
<p>
After completion of either Google Checkout or Paypal payment you are granted an OfficeExcel commercial license. You will
be sent the license details via email.
</p>
<p>
Example uses are:
<ul>
<li>Internal websites (eg intranets)</li>
<li>Private websites</li>
<li>Public facing websites</li>
<li>Online applications</li>
<li>Offline applications</li>
</ul>
You may alter the OfficeExcel code to suit your particular needs. Also, if you're covered by the non-commercial license, however
you don't wish to link to the OfficeExcel website then buying a commercial license means that you dont have to.
</p>
<a name="license.commercial.faqs"></a>
&nbsp;<br /><br />
<h4>Commercial license FAQs</h4>
<ul>
<li><a href="#do.i.need.to.buy.a.license">Do I need to buy a commercial license?</a></li>
<li><a href="#how.many.licenses.do.i.need">How many licenses do I need?</a></li>
<li><a href="#how.much.is.a.license">How much is a license?</a></li>
<li><a href="#what.if.i.need.something.thats.not.part.of.OfficeExcel">What if I need something that's not part of OfficeExcel?</a></li>
<li><a href="#what.does.the.license.cover">What does the license cover?</a></li>
<li><a href="#what.if.im.a.web.designer">What if I'm a web designer?</a></li>
<li><a href="#open.source.projects">Can I include OfficeExcel in an Open Source project?</a></li>
<li><a href="#bulk.discount">Is there a discount for buying multiple licenses?</a></li>
<li><a href="#authoring.tools">What if I make an authoring tool?</a></li>
<li><a href="#do.i.need.to.provide.a.backlink">Do I need to provide a backlink?</a></li>
<li><a href="#can.you.send.me.an.invoice">Can you send me an invoice?</a></li>
</ul>
<p>
<a name="do.i.need.to.buy.a.license"></a>
&nbsp;<br /><br /><br />
<b>Do I need to buy a commercial license?</b><br />
For commercial/business use, then yes - you need a license to use OfficeExcel.
<br /><br />
<a name="how.many.licenses.do.i.need"></a>
&nbsp;<br /><br /><br />
<b>How many licenses do I need?</b><br />
Regardless of how much you use OfficeExcel in your organisation or in the software you make, you are only required to
buy one OfficeExcel license.
<br /><br />
<a name="how.much.is.a.license"></a>
&nbsp;<br /><br /><br />
<b>How much is a license?</b><br />
An OfficeExcel license costs <b>&pound;79</b> (UK pounds). That's a little over $120 (US dollars) at
the time of writing.
<br /><br />
<a name="what.if.i.need.something.thats.not.part.of.OfficeExcel"></a>
&nbsp;<br /><br /><br />
<b>What if I need something that's not part of OfficeExcel?</b><br />
If there's a feature that you need that's not part of OfficeExcel then you can usually be accommodated assuming that
you're a license holder. Please <a href="#contact">contact support</a> first to discuss your needs. If it's not too specific
to you then it can be added to the main OfficeExcel software. If it is then it can be added to your specific copy of OfficeExcel. You can
contact support with <a href="mailto:support@OfficeExcel.net">support@OfficeExcel.net</a>
<br /><br />
<a name="what.does.the.license.cover"></a>
&nbsp;<br /><br /><br />
<b>What does the license cover?</b><br />
The OfficeExcel license covers OfficeExcel as a whole. Excepting ExCanvas, all code that you find in the OfficeExcel archive is
covered by the OfficeExcel license.
<br /><br />
<a name="what.if.im.a.web.designer"></a>
&nbsp;<br /><br /><br />
<b>What if I'm a web designer?</b><br />
In this situation each client would need a separate license for themselves. They can then use OfficeExcel as much as they wish.
If you prefer to buy in bulk - discounts are available.
<br /><br />
<a name="open.source.projects"></a>
&nbsp;<br /><br /><br />
<b>Can I include OfficeExcel in an Open Source project?</b><br />
You're not prohibited from using OfficeExcel in Open source projects, however you need to be aware of two things:
<ol>
<li>
The license you choose for your project may be incompatible with commercial software. The GPL is a prime
example of this. Read your license carefully to find out whether you can use commercial software with it.
</li>
<li>
If you don't want any commercial users of your software to be liable for an OfficeExcel license you can buy
an OfficeExcel license to cover your software specifically.
<!-- Any commercial users of your software will be liable for a commercial OfficeExcel license. -->
</li>
</ol>
<a name="bulk.discount"></a>
&nbsp;<br /><br /><br />
<b>Is there a discount for buying licenses in bulk?</b><br />
Yes there's a discount available if you wish to buy 5, 10 or 15 licenses (you could be a web designer for example
wishing to license your clients). Please <a href="#contact">contact support</a> if this interests you.
<br /><br />
<a name="authoring.tools"></a>
&nbsp;<br /><br /><br />
<b>What if I make an authoring tool?</b><br />
If you make an authoring tool then you can include OfficeExcel with your software but each and every commercial Customer
who makes use of it would be liable to buy their own full-price license.
<br /><br />
<a name="do.i.need.to.provide.a.backlink"></a>
&nbsp;<br /><br /><br />
<b>Do I need to provide a backlink?</b><br />
Commercial license holders do not need to provide a backlink to the OfficeExcel website.
<br /><br />
<a name="can.you.send.me.an.invoice"></a>
&nbsp;<br /><br /><br />
<b>Can you send me an invoice?</b><br />
Of course, simply go here: <a href="http://www.OfficeExcel.net/invoice.html">http://www.OfficeExcel.net/invoice.html</a>, enter your email
address and you'll be sent an invoice that you can use for tax purposes.
</p>
<a name="license.free"></a>
&nbsp;<br /><br />
<h2>Non-commercial <span>free usage</span></h2>
<p>
OfficeExcel can be used free-of-charge by non-commercial entities who wish to use it either on an internal or external website
or in software that they make assuming that you link back to the OfficeExcel website. Examples of non-commercial entities
include:
<ul>
<li>Individuals</li>
<li>Charities</li>
<li>Government bodies</li>
<li>Educational institutes</li>
</ul>
Sample HTML for a link is:
</p>
<pre class="code">
&lt;a href="http://www.OfficeExcel.net" target="_blank"&gt;
Charts made with OfficeExcel: HTML5 Javascript charts library
&lt;/a&gt;
</pre>
<p>
If you would prefer not to link to the OfficeExcel website, then you can buy an OfficeExcel commercial license and you won't need to.
You may alter the OfficeExcel code to suit your particular needs.
</p>
<div style="float: left; padding-top: 8px">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3JDYAEAW8LBFW">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal <20> The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<p>
If you're covered by the free license but want to make a donation to help keep OfficeExcel going then they're all gratefully
received. You can use PayPal button on the left to send it. Thanks!
</p>
<hr />
<a name="license.legal"></a>
&nbsp;<br /><br />
<h2>Legal <span>terms</span></h2>
<h4>Coverage of this license</h4>
<p>
This license applies to any software originating from the www.OfficeExcel.net website.
Such software is herein referred to as the Software. The license covers
modification and distribution of the Software, use of third-party application
programs based on the Software, and development of software which uses the
Software. Note that ExCanvas is covered by the Apache license.
</p>
<h4>Granted rights</h4>
<ol>
<li>
You are granted the non-exclusive rights set forth in this document
provided you agree to and comply with any and all conditions in
this document. Whole or partial use of the Software,
signifies acceptance of this license.
</li>
<li>
You may develop application programs, reusable components and other
software items that use the original or modified versions of the
Software. You may distribute these programs or components as long as the Software is correctly attributed by linking to
the OfficeExcel website (<a href="http://www.OfficeExcel.net">www.OfficeExcel.net</a>). If you have
purchased an OfficeExcel license you do not need to attribute OfficeExcel on your website or in the software you make.
</li>
<li>
For commercial use you are required to buy a license from the copyright
holder. A commercial license permits you to use OfficeExcel commercially.
This license is
<20>79 (UK pounds). Commercial use incorporates applications, websites
(regardless of whether they sell products or services or simply promote
them), intranets and use in offline materials.
</li>
<li>
Non-commercial use (eg personal, charity, government and educational)
is permitted with a link back to the OfficeExcel website. Example code as
follows:
<pre class="code">
&lt;a href="http://www.OfficeExcel.net" target="_blank"&gt;
Charts made with OfficeExcel: HTML5 Javascript charts library
&lt;/a>&gt;
</pre>
Alternatively, if you don't wish to link to the OfficeExcel website, you can
buy an OfficeExcel license and you won't need to.
</li>
</ol>
<h4>Copyright notice</h4>
<p>
The ownership of the Licensed material is not transferred to you in this agreement.
</p>
<h4>Limitations of liability</h4>
<p>
In no event shall the initial developers or copyright holders be
liable for any damages whatsoever, including - but not restricted to
- lost revenue or profits or other direct, indirect, special,
incidental or consequential damages, even if they have been advised
of the possibility of such damages, except to the extent invariable
law, if any, provides otherwise.
</p>
<h4>No warranty</h4>
<p>
The Software and this license document are provided AS IS with NO
WARRANTY OF ANY KIND, INCLUDING THE WARRANTY OF DESIGN,
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
</p>
<h4>Choice of law</h4>
<p>
This license is governed by the Laws of England. Disputes shall be
settled by Chelmsford town court.
</p>
<a name="contact"></a>
<h2>Contact <span>support</span></h2>
<p>
Any questions or queries about this license or its extent should
be directed to <a href="mailto:support@OfficeExcel.net"><b>support@OfficeExcel.net</b></a>
</p>
</body>
</html>

1090
OfficeWeb/sdk/Common/Charts/docs/line.html
View file

File diff suppressed because it is too large Load diff

120
OfficeWeb/sdk/Common/Charts/docs/line_filled.html
View file

@ -1,120 +0,0 @@
<!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>The Line chart setting chart.filled.accumulative</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs accumulative" />
<meta name="description" content="Documentation about the Line chart setting chart.filled.accumulative" />
<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.line.js" ></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
line = new OfficeExcel.Line('cvs', [4,3,6,7,8,4,9,5,1,3,4,3], [4,5,1,6,2,3,4,5,8,1,9,7]);
line.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
line.Set('chart.linewidth', 5);
line.Set('chart.fillstyle', ['rgba(255,0,0,0.3)', 'rgba(0,0,255,0.3)']);
line.Set('chart.colors', ['red', 'blue']);
line.Set('chart.filled', true);
line.Set('chart.filled.accumulative', true);
line.Set('chart.title', 'A filled line with chart.filled.accumulative=true');
line.Set('chart.gutter.right', 15);
line.Set('chart.gutter.bottom', 15);
line.Set('chart.background.grid.autofit', true);
line.Draw();
line2 = new OfficeExcel.Line('cvs2', [4,3,6,7,8,4,9,5,1,3,4,3], [4,5,1,6,2,3,4,5,8,1,9,7]);
line2.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
line2.Set('chart.linewidth', 5);
line2.Set('chart.fillstyle', ['rgba(255,0,0,0.3)', 'rgba(0,0,255,0.3)']);
line2.Set('chart.colors', ['red', 'blue']);
line2.Set('chart.filled', true);
line2.Set('chart.filled.accumulative', false);
line2.Set('chart.title', 'A filled line with chart.filled.accumulative=false');
line2.Set('chart.gutter.right', 15);
line2.Set('chart.gutter.bottom', 15);
line2.Set('chart.background.grid.autofit', true);
line2.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>
>
The Line chart setting: chart.filled.accumulative
</div>
<h1>The <span>Line chart setting: chart.filled.accumulative</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>
This page shows how the setting <i>chart.filled.accumulative</i> affects your charts. The chart on the left has
it enabled (the default), so the lines in effect sit on top of each other. The chart on the right has the setting
set to false so the points are drawn "as-is", ie not accumulatively. The first chart could be more useful if you wish
to see accumulated values, whereas the chart on the right might be better if you want to see individual values.
</p>
<p>
Keep in mind that if you choose to use a non-accumulative chart the colors may be better as semi-transparent ones,
otherwise parts or all of some lines may get hidden by others.
</p>
<div style="text-align: center">
<canvas id="cvs" width="450" height="200">[No canvas support]</canvas>
<canvas id="cvs2" width="450" height="200">[No canvas support]</canvas>
<p>
<a href="line.html">&laquo; Back to the Line chart documentation</a>
</p>
</div>
</html>

454
OfficeWeb/sdk/Common/Charts/docs/meter.html
View file

@ -1,454 +0,0 @@
<!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>Documentation about the Meter chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs meter chart" />
<meta name="description" content="Documentation about the Meter chart including information on all the options available to you" />
<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.jpg"/>
<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>
<?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>
>
Meter charts
</div>
<h1>Meter <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Meter chart. The arguments are the canvas ID, the minimum, the maximum and the value.</span>
var meter = new OfficeExcel.Meter('myCanvas', 50, 100, 60);
<span class="javascript-comment">// Configure the Meter chart to appear as you want.</span>
meter.Set('chart.contextmenu', [
['Show palette', OfficeExcel.Showpalette],
['Clear annotations', function () {OfficeExcel.Clear(meter.canvas); meter.Draw();}],
null,
['Cancel', function () {}]
]);
meter.Set('chart.annotatable', true);
meter.Set('chart.label.position', 'inside');
meter.Set('chart.title', 'A sample measurement');
meter.Set('chart.title.vpos', 0.5);
meter.Set('chart.units.post', 'k');
meter.Set('chart.red.start', 0);
meter.Set('chart.red.end', 3);
meter.Set('chart.yellow.start', 3);
meter.Set('chart.yellow.end', 6);
meter.Set('chart.green.start', 6);
meter.Set('chart.green.end', 10);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
meter.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/meter.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Meter apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myMeter.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
The color of the bits separating the segements. By setting this to white you can get a separation effect.<br />
<i>Default: null</i><br /><br />
<a name="chart.border.color"></a>
<b>chart.border.color</b><br />
The color of the outline (including tickmarks).<br />
<i>Default: black</i><br /><br />
<a name="chart.green.start"></a>
<b>chart.green.start</b><br />
The value that the green area should begin at. <br /><i>Default: 35% of the maximum value</i><br /><br />
<a name="chart.green.end"></a>
<b>chart.green.end</b><br />
The value that the green area should end at. <br /><i>Default: The maximum value</i><br /><br />
<a name="chart.green.color"></a>
<b>chart.green.color</b><br />
The color of the green area, (can be any color).. <br /><i>Default: #207A20</i><br /><br />
<a name="chart.yellow.start"></a>
<b>chart.yellow.start</b><br />
The value that the yellow area should begin at. <br /><i>Default: 10% of the maximum value</i><br /><br />
<a name="chart.yellow.end"></a>
<b>chart.yellow.end</b><br />
The value that the yellow area should end at. <br /><i>Default: 35% of the maximum value</i><br /><br />
<a name="chart.green.color"></a>
<b>chart.green.color</b><br />
The color of the yellow area, (can be any color).. <br /><i>Default: #D0AC41</i><br /><br />
<a name="chart.red.start"></a>
<b>chart.red.start</b><br />
The value that the red area should begin at. <br /><i>Default: The minimum value</i><br /><br />
<a name="chart.red.end"></a>
<b>chart.red.end</b><br />
The value that the red area should end at. <br /><i>Default: 10% of the maximum value</i><br /><br />
<a name="chart.red.color"></a>
<b>chart.red.color</b><br />
The color of the red area, (can be any color).. <br /><i>Default: #9E1E1E</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br />
<i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br />
<i>Default: Verdana</i><br /><br />
<a name="chart.value.text"></a>
<b>chart.value.text</b><br />
This option controls whether the value of the Meter is shown in text.<br />
<i>Default: false</i><br /><br />
<a name="chart.value.text.decimals"></a>
<b>chart.value.text.decimals</b><br />
The amount of decimals shown in the text label.<br />
<i>Default: 0</i><br /><br />
<a name="chart.value.text.units.pre"></a>
<b>chart.value.text.units.pre</b><br />
The units (before the value) shown in the text label.<br />
<i>Default: None (an empty string)</i><br /><br />
<a name="chart.value.text.units.post"></a>
<b>chart.value.text.units.post</b><br />
The units (after the value) shown in the text label.<br />
<i>Default: None (an empty string)</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
Whether the labels are shown or not.<br />
<i>Default: true</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br /><i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the labels are measured in. This string is displayed BEFORE the actual number, allowing you to
specify values such as "$50".<br />
<i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the labels are measured in. This string is displayed AFTER the actual number, allowing you to specify
values such as "50ms".<br />
<i>Default: none</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the values.<br />
<i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively).<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only color allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
If true a shadow will be applied to the meter.<br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.linewidth"></a>
<b>chart.linewidth</b><br />
The width of the outline of the Meter. <br /><i>Default: 2</i><br /><br />
<a name="chart.linewidth.segments"></a>
<b>chart.linewidth.segments</b><br />
The linewidth of the lines separating the segments.<br />
<i>Default: 1</i><br /><br />
<a name="chart.tickmarks.small.num"></a>
<b>chart.tickmarks.small.num</b><br />
This controls the number of small tickmarks.<br />
<i>Default: 100</i><br /><br />
<a name="chart.tickmarks.big.num"></a>
<b>chart.tickmarks.big.num</b><br />
This controls the number of large tickmarks.<br />
<i>Default: 10</i><br /><br />
<a name="chart.tickmarks.small.color"></a>
<b>chart.tickmarks.small.color</b><br />
This sets the color of the small tickmarks.<br />
<i>Default: #bbb</i><br /><br />
<a name="chart.tickmarks.big.color"></a>
<b>chart.tickmarks.big.color</b><br />
This sets the color of the large tickmarks.<br />
<i>Default: black</i><br /><br />
<a name="chart.border"></a>
<b>chart.border</b><br />
Whether the outline is drawn.<br />
<i>Default: true</i><br /><br />
<a name="chart.segment.radius.start"></a>
<b>chart.segment.radius.start</b><br />
Instead of the segments going from the center point outwards, you can use this to specify a start point of the
coloured segments.<br />
<i>Default: null</i><br /><br />
<a name="chart.needle.radius"></a>
<b>chart.needle.radius</b><br />
This can be used to stipulate the radius of the pointer.<br />
<i>Default: null</i><br /><br />
<a name="chart.needle.linewidth"></a>
<b>chart.needle.linewidth</b><br />
This can be used to specify the linewidth used when drawing the needle.<br />
<i>Default: null</i><br /><br />
<a name="chart.needle.tail"></a>
<b>chart.needle.tail</b><br />
If true the needle will have a small tail.<br />
<i>Default: false</i><br /><br />
</div>
<br /><br />
</body>
</html>

852
OfficeWeb/sdk/Common/Charts/docs/misc.html
View file

@ -1,852 +0,0 @@
<!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>Miscellaneous documentation</title>
<meta name="keywords" content="OfficeExcel html5 canvas misc docs" />
<meta name="description" content="Miscellaneous documentation" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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.line.js" ></script>
<script src="../libraries/OfficeExcel.scatter.js" ></script>
<!--[if lt IE 9]><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>
>
Miscellaneous documentation
</div>
<h1>Miscellaneous <span>documentation</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>
<ul>
<li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li>
<li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
<li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
<li><a href="#canvas.coordinates">The canvas coordinate system</a></li>
<li><a href="#older.browsers">OfficeExcel and older browsers</a></li>
<li><a href="#msie">OfficeExcel and Microsoft Internet Explorer</a></li>
<li><a href="#debugging">Debugging tips</a></li>
<li><a href="#inspecting">Inspecting an OfficeExcel chart</a></li>
<li><a href="#context.menus">Double click context menus</a></li>
<li><a href="#event.handlers">Adding your own event handlers</a></li>
<li><a href="#crlf">Carriage returns and newlines in labels</a></li>
<li><a href="#character.set">Character set issues</a></li>
<li><a href="#OfficeExcel.identify">How to identify an OfficeExcel object</a></li>
<li><a href="#static.y.axis">Static Y axis</a></li>
<li><a href="#reducing.white.space">Reducing white space</a></li>
<li><a href="#in.graph">In-graph labels</a></li>
<li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
<li><a href="#dom2.events">DOM2 Event handlers</a></li>
<li><a href="#data.types">Data types</a></li>
<li><a href="#create.your.own">Creating your own chart type</a></li>
<li><a href="#world.map">World map</a></li>
<li><a href="#text">Adding text to your charts</a></li>
<li><a href="#crosshairs">Crosshairs</a></li>
<li><a href="#log.scale">Logarithmic scale</a></li>
<li><a href="#known.issues">Known issues</a></li>
</ul>
<a name="fallback.content"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Canvas fallback content and visually impaired users</h4>
<p>
When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are
concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should
consider
doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way
towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart.
</p>
<a name="limits"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Upper and lower limits for horizontal bars</h4>
<p>
If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where
the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
bottom, you can simply specify an arbitrary length (eg -999999). Eg:
</p>
<pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
<a name="canvas.width.height"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Setting the canvas width and height</h4>
<p>
To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
will be scaled, and not enlarged, to fit the new width/height. Eg:
</p>
<pre class="code">&lt;canvas id="myCanvas" width="200" height="100"&gt;[No canvas support]&lt;canvas&gt;</pre>
<p>
<b>Note:</b>
When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can
see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example.
</p>
<a name="canvas.coordinates"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>The canvas coordinate system</h4>
<p>
The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right
and the Y value as you go down), much like the CSS coordinates for the entire page. The
gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart
sits in the middle.
</p>
<a name="older.browsers"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>OfficeExcel and older browsers</h4>
<p>
Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text.
</p>
<a name="msie"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>OfficeExcel and Microsoft Internet Explorer</h4>
<p>
You can now use OfficeExcel with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of &lt;canvas&gt; support to MSIE).
Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native &lt;canvas&gt;
support.
</p>
<a name="debugging"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Debugging tips</h4>
<p>
If you're having a hard time debugging your chart, try these:
</p>
<ul>
<li>Ensure you have only one chart on the page</li>
<li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
<li>
Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the
Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a
video about using the Chrome developer tools
<a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful
tools that make development much easier.
</li>
<li>Reduce the page to the bare minimum.</li>
<li>Start with a very basic chart and build it up slowly.</li>
</ul>
<a name="inspecting"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Inspecting an OfficeExcel chart</h4>
<p>
To help when debugging your OfficeExcel charts and canvas elements, you can use you browsers built in debugging tools.
An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
the <i>__object__</i> property.
</p>
<a name="context.menus"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Double click context menus</h4>
<p>
Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
not the right, in order to make it more reliable.
</p>
<a name="event.handlers"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Adding your own event handlers</h4>
<p>
Because each OfficeExcel object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
do this:
</p>
<pre class="code">
&lt;script&gt;
var myBar = new OfficeExcel.Bar('cvs', [7,4,2,6,3,4,8]);
myBar.Draw();
myBar.canvas.onclick = function ()
{
}
&lt;/script&gt;
</pre>
<p>
But what if, for example, you're using an OfficeExcel feature which
uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add
your new event handler without replacing any existing one (ie the one installed by OfficeExcel). For example:
</p>
<pre class="code">
&lt;script&gt;
var myBar = new OfficeExcel.Bar('cvs', [7,4,2,6,3,4,8]);
myBar.Draw();
function myFunc ()
{
}
myBar.canvas.addEventListener('click', myFunc, false)
&lt;/script&gt;
</pre>
<a name="crlf"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Carriage returns and newlines in labels</h4>
<p>
You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
Like so:
</p>
<pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>
<a name="character.set"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Character set issues</h4>
<p>
If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
name suggests, sends a HTTP header):
</p>
<pre class="code">&lt;?php
header("Content-Type: text/html; charset=ISO-8859-1");
?&gt;</pre>
<p>
If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
eg <i>AddDefaultCharset</i>.
</p>
<a name="OfficeExcel.identify"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>How to identify an OfficeExcel object</h4>
<p>
Because identity can sometimes be a tricky affair, there are a few OfficeExcel properties that you can use to check whether an object
is an OfficeExcel object:
</p>
<ul>
<li><i>obj.isOfficeExcel</i> - This is a boolean that you can use to clearly identify an OfficeExcel object.</li>
<li><i>obj.type</i> - This identifies the type of an OfficeExcel object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li>
</ul>
<!------------------------------------------------------------------------------------------------------------->
<a name="static.y.axis"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Static Y axis</h4>
<!--
The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page
in the <HEAD>
-->
<div style="position: relative; float: right; margin-right: 10px">
<!-- The width here is set further down the page in script -->
<canvas id="axes" width="0" height="175" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
<div style="width: 600px; overflow: auto">
<canvas id="cvs" width="1000" height="200"></canvas>
</div>
</div>
<script>
ShowGraphOne = function ()
{
/**
* This is the script that draws the chart
*/
line = new OfficeExcel.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
line.Set('chart.gutter.top', 25);
line.Set('chart.gutter.bottom', 30);
line.Set('chart.gutter.left', 60);
line.Set('chart.hmargin', 5);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.shadow.color', 'red');
line.Set('chart.tooltips', [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
]);
line.Set('chart.labels', [
'Jan `09','\r\nFeb 09', 'Mar 09','\r\nApr 09','May 09','\r\nJun 09','Jul 09','\r\nAug 09','Sep 09','\r\nOct 09','Nov 09', '\r\nDec 09',
'Jan 10', '\r\nFeb 10', 'Mar 10','\r\nApr 10','May 10','\r\nJun 10','Jul 10','\r\nAug 10','Sep 10','\r\nOct 10','Nov 10', '\r\nDec 10'
]);
line.Draw();
/**
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
*/
ca = document.getElementById("axes")
co = ca.getContext('2d');
/**
* This sets the smaller canvas to cover the whole of the charts left gutter
*/
ca.width = line.Get('chart.gutter.left') + 1;
OfficeExcel.Clear(ca, 'white');
/**
* This draws the static axis
*/
co.beginPath();
co.moveTo(AA(this, line.Get('chart.gutter.left')), line.Get('chart.gutter.top'));
co.lineTo(AA(this, line.Get('chart.gutter.left')), line.canvas.height - line.Get('chart.gutter.bottom'));
// Draw the tickmarks on the axis
var numTicks = 10;
for (var i=0; i<=numTicks; ++i) {
co.moveTo(line.Get('chart.gutter.left'), AA(this, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)));
co.lineTo(line.Get('chart.gutter.left') - 3, AA(this, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)));
}
co.stroke();
/**
* This draws the labels for the static axis
*/
co.beginPath();
var color = 'black';
var size = 10;
for (var i=0; i<5; ++i) {
co.fillStyle = color;
co.textAlign = 'right';
co.textBaseline = 'middle';
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
OfficeExcel.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5)));
}
// Draw zero
OfficeExcel.Text(co,
'Verdana',
size,
line.Get('chart.gutter.left') - 4,
165,
'0');
co.fill();
}
</script>
A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the OfficeExcel libraries itself, it can be
achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below.
It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't
move when the main canvas scrolls left and right.
<p />
<b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated,
scrolling in conjunction with tooltips in this case and this browser doesn't work.
<pre class="code">
&lt;div style="position: relative; float: right; margin-right: 10px; margin-top: 10px"&gt;
&lt;!-- The width here is set further down the page in script --&gt;
&lt;canvas id="axes" width="0" height="175" style="position: absolute; top: 0; left: 0; z-index: 100"&gt;&lt;/canvas&gt;
&lt;div style="width: 600px; overflow: auto"&gt;
&lt;canvas id="cvs" width="1000" height="200"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
window.onload = function ()
{
/**
* This is the script that draws the chart
*/
line = new OfficeExcel.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
line.Set('chart.noaxes', true); // We draw the Y axis ourselves
line.Set('chart.gutter.top', 25);
line.Set('chart.gutter.bottom', 35);
line.Set('chart.gutter.left', 50);
line.Set('chart.hmargin', 5);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.shadow.color', 'red');
line.Set('chart.tooltips', [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
]);
line.Set('chart.labels', [
'Jan 09','\r\nFeb 09', 'Mar 09','\r\nApr 09','May 09','\r\nJun 09','Jul 09','\r\nAug 09','Sep 09','\r\nOct 09','Nov 09', '\r\nDec 09',
'Jan 10', '\r\nFeb 10', 'Mar 10','\r\nApr 10','May 10','\r\nJun 10','Jul 10','\r\nAug 10','Sep 10','\r\nOct 10','Nov 10', '\r\nDec 10'
]);
line.Draw();
/**
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
*/
ca = document.getElementById("axes")
co = ca.getContext('2d');
/**
* This sets the smaller canvas to cover the whole of the charts left gutter
*/
ca.width = line.Get('chart.gutter.left') + 1;
OfficeExcel.Clear(ca, 'white');
/**
* This draws the static axis
*/
co.beginPath();
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
// Draw the tickmarks on the axis
var numTicks = 10;
for (var i=0; i<=numTicks; ++i) {
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
}
co.stroke();
/**
* This draws the labels for the static axis
*/
co.beginPath();
var color = 'black';
var size = 10;
for (var i=0; i<5; ++i) {
co.fillStyle = color;
co.textAlign = 'right';
co.textBaseline = 'middle';
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
OfficeExcel.Text(co,
'Verdana',
size,
line.Get('chart.gutter.left') - 4,
line.Get('chart.gutter.top') + (h * (i/5)),
line.max - (line.max * (i/5)));
}
co.fill();
}
&lt;/script&gt;
</pre>
<!------------------------------------------------------------------------------------------------------------->
<br clear="all" />
<br clear="all" />
<!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. -->
<a name="reducing.white.space"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Reducing white space</h4>
<canvas id="myc" width="600" height="250" style="float: right; border: dashed 1px gray; margin-right: 10px"></canvas>
<script>
ShowGraphTwo = function ()
{
var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
var line1 = new OfficeExcel.Line('myc', arg1 , arg2);
line1.Set('chart.colors', ['red', 'silver']);
line1.Set('chart.background.barcolor1', 'white');
line1.Set('chart.background.barcolor2', 'white');
line1.Set('chart.labels', ['Jan 2000',
'Feb 2001',
'Mar 2002',
'Apr 2003',
'May 2004',
'Jun 2005',
'Jul 2006',
'Aug 2007',
'Sep 2008',
'Oct 2009'])
line1.Set('chart.filled', true);
line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
line1.Set('chart.gutter.top', 5);
line1.Set('chart.gutter.bottom', 55);
line1.Set('chart.gutter.left', 55);
line1.Set('chart.gutter.right', 35);
line1.Set('chart.background.grid', true);
line1.Set('chart.ymax', 365)
line1.Set('chart.yaxispos', 'right');
line1.Set('chart.title.xaxis', 'Month');
line1.Set('chart.title.yaxis', 'Temperature');
line1.Set('chart.title.xaxis.pos', -0.3);
line1.Set('chart.title.yaxis.pos', 0.5);
line1.Set('chart.text.angle', 30);
line1.Set('chart.tooltips', [
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
]);
line1.Draw();
}
</script>
<p>
New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate
and adjust the coordinates to get more space and is far more straight-forward. The new properties are:
<ul>
<li>chart.gutter.left</li>
<li>chart.gutter.right</li>
<li>chart.gutter.top</li>
<li>chart.gutter.bottom</li>
</ul>
You can read more about this change <a href="gutters.html"><b>here</b></a>.
</p>
<br clear="all" />
<a name="in.graph"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>In-graph labels</h4>
<p>
As well as an array of strings, like this:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
<p>
The string can also be an array, consisting of color and placement information, like this:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
<p>
You can read more information about this <a href="ingraph.html">here</a>.
</p>
<a name="shorthand.ingraph.labels"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Shorthand for in-graph labels</h4>
<p>
Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
you can instead specify an integer that specifies how many elements to skip. Like this:
</p>
<pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
<br clear="all" />
<br clear="all" />
<a name="dom2.events"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>DOM2 Event handlers</h4>
<p>
All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be
drawn, albeit without tooltips.
</p>
<br clear="all" />
<a name="data.types"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Data types</h4>
<p>
If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
</p>
<a name="create.your.own"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Creating your own chart type</h4>
<p>
If you wish to create your own chart type, there is a skeleton file
<a href="../libraries/OfficeExcel.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
This file contains the bare bones of an OfficeExcel object, such as the .Get() and .Set() methods, as well as examples
of common properties.
</p>
<a name="world.map"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>World map</h4>
<p>
There is no function in OfficeExcel to do mapping, either of the World or a smaller region. If this is what you want then you
may be interested in this HTML5 canvas based mapping system:
<a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a>
</p>
<a name="text"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Adding text to your charts</h4>
<p>
You can add arbitrary text to your charts by using the OfficeExcel API. For example you could use this code after the call to .Draw():
</p>
<pre class="code">
function DrawSubTitle (obj)
{
var context = obj.context;
context.beginPath();
context.fillStyle = 'gray';
OfficeExcel.Text(context,
'Verdana',
7,
obj.canvas.width / 2,
obj.Get('chart.gutter.top') - 6,
'The subtitle',
'center',
'center');
context.fill();
}
DrawSubTitle(myLine);
</pre>
<a name="crosshairs"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Crosshairs</h4>
<div style="width: 600px; float: right">
<canvas id="scatter_crosshairs" width="600" height="250">[No canvas support]</canvas>
<input type="text" style="margin-left: 25px; width: 550px" id="crosshairs.out" />
</div>
<script>
function ShowGraphThree ()
{
var data = [[84,68],[45,65],[185,54],[222,62],[354,45],[153,21]];
var scatter = new OfficeExcel.Scatter('scatter_crosshairs', data);
scatter.Set('chart.xmax', 365);
scatter.Set('chart.labels', ['Q1','Q2','Q3','Q4']);
/**
* Configure the crosshairs
*/
if (!OfficeExcel.isOld()) {
scatter.Set('chart.crosshairs', true);
scatter.Set('chart.crosshairs.coords', true);
scatter.Set('chart.crosshairs.coords.labels.x', 'Day');
scatter.Set('chart.crosshairs.coords.labels.y', 'Amount');
scatter.Set('chart.crosshairs.coords.fixed', true);
scatter.Set('chart.crosshairs.color', 'gray');
scatter.Set('chart.crosshairs.linewidth', 1);
}
scatter.Draw();
OfficeExcel.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
}
window.onload = function ()
{
ShowGraphOne();
ShowGraphTwo();
ShowGraphThree();
ShowGraphFour();
}
/**
* Now add the custom event listener that updates the text box with the coordinates
*/
function myFunc (obj)
{
var x = obj.canvas.__crosshairs_x__;
var y = obj.canvas.__crosshairs_y__;
document.getElementById("crosshairs.out").value = x + ',' + y;
}
</script>
<p>
Some charts type have the ability to use crosshairs. The supported charts are:
</p>
<ul>
<li>Bar charts</li>
<li>Line charts</li>
<li>Scatter charts</li>
<li>Waterfall charts</li>
</ul>
<p>
There are various options that control the crosshairs, though because some apply to the readout, they are only applicable to
the Scatter chart. The crosshairs can be customised by stipulating the linewidth, the color and whether only the horizontal,
vertical or both lines are shown.
</p>
<h4>Crosshairs and the Scatter chart</h4>
<p>
Because the X axis is scaled, the Scatter chart has the extra ability of having a coordinates readout when
the crosshairs are in use. This is shown in the example above. The appropriate properties are:
</p>
<ul>
<li>obj.canvas.__crosshairs_x__</li>
<li>obj.canvas.__crosshairs_y__</li>
<li>obj.canvas.__crosshairs_labels__ (this is the coordinates readout)</li>
</ul>
<p>
In the above example the coordinates are put in the text input by using the custom event <i>oncrosshairs</i>. This is as
follows:
</p>
<pre class="code">
function myFunc (obj)
{
var x = obj.canvas.__crosshairs_x__;
var y = obj.canvas.__crosshairs_y__;
document.getElementById("crosshairs.out").value = x + ',' + y;
}
OfficeExcel.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
</pre>
<a name="log.scale"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Logarithmic scale</h4>
<canvas id="log_scale_example" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
function ShowGraphFour ()
{
var g4 = new OfficeExcel.Line('log_scale_example', [0.1,2.1,2.3,2.5,3.85,4.6,4.4]);
g4.Set('chart.gutter.left', 60);
g4.Set('chart.ylabels.specific', ['100,000','10,000','1000','1000','10']);
g4.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
g4.Draw();
}
</script>
<p>
It's possible to get a logarithmic scale in OfficeExcel by using <i>chart.scale.specific</i>. The actual scale that is used
when drawing the chart is 0-5 (for example), and the scale that is displayed is 10/100/1000/10,000/100,000. This
example is shown.
</p>
<br clear="all" />
<a name="known.issues"></a>
<br />&nbsp;<br />&nbsp;<br />
<h4>Known issues</h4>
<p>
There's a few known issues documented <a href="issues.html">here</a>
</p>
<p />
</body>
</html>

229
OfficeWeb/sdk/Common/Charts/docs/msie.html
View file

@ -1,229 +0,0 @@
<!DOCTYPE html >
<html>
<head>
<!--
/**
* 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>Documentation about Microsoft Internet Explorer support</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs msie" />
<meta name="description" content="Documentation about Microsoft Internet Explorer (MSIE) support" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<script src="../libraries/OfficeExcel.modaldialog.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<style>
div#msie9 {
background-color: #dfd;
padding: 5px;
border: 2px dashed green;
}
</style>
<?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>
>
MSIE support
</div>
<h1>Microsoft <span>Internet Explorer (MSIE) support</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 />
<div id="msie9">
<b>Microsoft Internet Explorer 9</b>
<p>
Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also
benefits from hardware acceleration, and quick rendering times.
</p>
</div>
<br />
<div style="border: 3px dashed #cc0; background-color: #ffd; padding: 5px">
<b>Microsoft Internet Explorer 7 and 8</b>
<p>
Microsoft Internet Explorer 7 and 8 are supported using ExCanvas. This is an extra Javascript file that
is sent to the user if it's required. Nothing is required to be configured on the server.
</p>
</div>
<br />
<canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var data1 = [4,3,6,8,4,2,1,4,9,8,7,8];
var data2 = [1,2,4,2,1,3,5,6,6,5,3,5];
// No "var" as the variable has to be global
line = new OfficeExcel.Line('myLine', data1, data2);
line.Set('chart.title', 'Sales for Acme Inc. (context menu)');
line.Set('chart.title.vpos', 0.5);
line.Set('chart.colors', ['red', 'black']);
line.Set('chart.linewidth', 5);
// Odd, but this seems to fix an strange MSIE bug where the text is truncated
line.Set('chart.units.post', '% .');
line.Set('chart.yaxispos', 'right');
line.Set('chart.key', ['2007', '2008']);
line.Set('chart.key.background', 'white');
line.Set('chart.noaxes', true);
line.Set('chart.gutter.left', 5);
line.Set('chart.gutter.right', 35);
line.Set('chart.hmargin', 10);
line.Set('chart.background.barcolor1', 'white');
line.Set('chart.background.barcolor2', 'white');
line.Set('chart.shadow', true);
line.Set('chart.background.grid.autofit', true);
line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}], ['Cancel', function () {}]]);
line.Draw();
}
</script>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#getting">Getting hold of ExCanvas</a></li>
<li><a href="#caveats">Caveats</a></li>
<li><a href="#frame">Google Chrome Frame</a></li>
<li><a href="#dynamic.canvas">Using a dynamically created canvas</a></li>
</ul>
<a name="introduction"></a>
<h4>Introduction</h4>
<p>
As of December 2009 OfficeExcel now works partially with Internet Explorer without Google Chrome Frame.
Charts are rendered as VML. You are still recommended to use
<a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a> to get the best results.
The interactive features are unlikely to work correctly.
</p>
<p>
Thanks go to everyone involved with the <a href="http://code.google.com/p/explorercanvas/" target="_blank" rel="nofollow">ExCanvas project</a> for providing the ExCanvas library.
</p>
<a name="getting"></a>
<h4>Getting hold of ExCanvas</h4>
<p>
Google ExCanvas is distributed with OfficeExcel in the "excanvas" directory. There is a minified gzip compressed version, along
with the original.
</p>
<a name="caveats"></a>
<h4>Caveats</h4>
<ul>
<li>The interactive features of OfficeExcel are unlikely to work correctly with MSIE.</li>
<li>Shadows are now available (on some chart types), albeit without blurring.</li>
<li>You must reference the Javascript libraries in the documents &lt;head&gt;.</li>
<li>You must use the window.onload event to create your chart.</li>
<li>In the window.onload function, you must use the <i>var</i> keyword when declaring the variable.</li>
<li>If your page is large, there may be a slight pause before the window.onload event fires and thus creates the chart.</li>
<li>Changing the font that text is shown in is not available.</li>
</ul>
<a name="frame"></a>
<h4>Google Chrome Frame</h4>
<p>
Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully
supports OfficeExcel. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you
can fully influence the users PC however, a better option might be to simply use one of the browsers with native
support.
</p>
<br />
<a name="dynamic.canvas"></a>
<h4>Using a dynamically created canvas</h4>
<p>
If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by
ExCanvas:
</p>
<pre class="code">
var canvas = document.createElement('CANVAS');
canvas.id = 'cvs';
canvas.width = 600;
canvas.height = 250;
canvas.style.border = '1px dashed black';
document.body.appendChild(canvas);
<span style="color: green">G_vmlCanvasManager.initElement(canvas);</span>
</pre>
<br />
<br />
<br />
<!-- This is the ModdalDialog -->
<div id="myDialog" style="display: none">
<div style="text-align: center; font-family: Arial">
<h4>Please wait...</h4>
<span style="font-size: 8pt">(Nothing is going to happen, this is simply an example <a href="" onclick="ModalDialog.Close(); return false">Close</a>)</span>
</div>
</div>
</body>
</html>

435
OfficeWeb/sdk/Common/Charts/docs/odo.html
View file

@ -1,435 +0,0 @@
<!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>Documentation about Odometer charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs odometer charts" />
<meta name="description" content="Documentation about Odometer charts including information on all the options available to you" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
>
Odometer charts
</div>
<h1>Odometer <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Odometer. The arguments are: the canvas ID, the minimum, the maximum and the value.</span>
var odo = new OfficeExcel.Odometer('myOdo', 0, 100, 18);
<span class="javascript-comment">// Configure the Odometer to appear as you want.</span>
odo.Set('chart.green.max', 75);
odo.Set('chart.red.min', 90);
odo.Set('chart.label.area', 50);
odo.Set('chart.needle.thickness', 2);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
odo.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/odo.html">here</a>.
</p>
<!--
<div class="warning">
<p>Note</p>
As of 20th March 2010, how you specify the start and end values has changed. The chart.green.start, chart.green.end, chart.yellow.start,
chart.yellow.end, chart.red.start and chart.red.end have all been replaced by chart.green.max and chart.red.min. Now the
green area always starts at zero and goes to chart.green.max, and the red area starts (by default - you can customise this by using
chart.red.min) at 90% of the maximum value and goes to the maximum value. The yellow area is between the two.
</div>
-->
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Odometer apears. You can set these properties using the <b>Set()</b> method.
</p>
<ul>
<li><a href="#chart configuration">Chart configuration</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#needle">Needle</a></li>
<li><a href="#title">Title</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li><li><a href="#scale">Scale</a></li>
</ul>
<a name="chart configuration"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3>
<a name="chart.value.text"></a>
<b>chart.value.text</b><br />
Controls whether the value is indicated as a text label in the center of the dial.<br /><i>Default: false</i><br /><br />
<a name="chart.value.units.pre"></a>
<b>chart.value.units.pre</b><br />
The pre units used on the textual value.<br /><i>Default: nothing (An empty string)</i><br /><br />
<a name="chart.value.units.post"></a>
<b>chart.value.units.post</b><br />
The post units used on the textual value.<br /><i>Default: nothing (An empty string)</i><br /><br />
<a name="chart.border"></a>
<b>chart.border</b><br />
This controls the gray border of the Odometer.<br /><i>Default: false</i><br /><br />
<a name="chart.tickmarks"></a>
<b>chart.tickmarks</b><br />
This controls whether tickmarks are shown. If you're animating the Odometer you'll need to turn this off.<br />
<i>Default: true</i><br /><br />
<a name="chart.tickmarks.highlighted"></a>
<b>chart.tickmarks.highlighted</b><br />
This controls whether the tickmarks are highlighted in red/yellow/green.<br />
<i>Default: false</i><br /><br />
<a name="chart.zerostart"></a>
<b>chart.zerostart</b><br />
If you want the top value on your chart to be zero instead of the maximum value, set this to true.<br /><i>Default: false</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.border.color1"></a>
<b>chart.border.color1</b><br />
This is the first color used in the gradient of the outer border of the chart (if enabled).<br />
<i>Default: #BEBCB0</i><br /><br />
<a name="chart.border.color2"></a>
<b>chart.border.color2</b><br />
This is the second/middle color used in the gradient of the outer border of the chart (if enabled).<br />
<i>Default: #F0EFEA</i><br /><br />
<a name="chart.border.color3"></a>
<b>chart.border.color3</b><br />
This is the third color used in the gradient of the outer border of the chart (if enabled).<br />
<i>Default: #BEBCB0</i><br /><br />
<a name="chart.green.max"></a>
<b>chart.green.max</b><br />
This is the point at which the green area ends.<br />
<i>Default: 75% of the maximum value</i><br /><br />
<a name="chart.red.min"></a>
<b>chart.red.min</b><br />
This is the point at which the red area starts. The yellow area is between the green and red areas.<br />
<i>Default: 90% of the maximum value</i><br /><br />
<a name="chart.green.color"></a>
<b>chart.green.color</b><br />
This option has two roles. If <i>chart.green.solid</i> is true, this is the actual color, whereas if
<i>chart.green.solid</i> is false (the default), it's used as one of the gradient colors.<br />
<i>Default: green</i><br /><br />
<a name="chart.yellow.color"></a>
<b>chart.yellow.color</b><br />
This option has two roles. If <i>chart.yellow.solid</i> is true, this is the actual color, whereas if
<i>chart.yellow.solid</i> is false (the default), it's used as one of the gradient colors.<br />
<i>Default: yellow</i><br /><br />
<a name="chart.red.color"></a>
<b>chart.red.color</b><br />
This option has two roles. If <i>chart.red.solid</i> is true, this is the actual color, whereas if
<i>chart.red.solid</i> is false (the default), it's used as one of the gradient colors.<br />
<i>Default: red</i><br /><br />
<a name="chart.green.solid"></a>
<b>chart.green.solid</b><br />
If <i>true</i> then the associated <i>chart.green.color</i> option is used as the actual color, not part of a gradient<br />
<i>Default: false</i><br /><br />
<a name="chart.yellow.solid"></a>
<b>chart.yellow.solid</b><br />
If <i>true</i> then the associated <i>chart.yellow.color</i> option is used as the actual color, not part of a gradient<br />
<i>Default: false</i><br /><br />
<a name="chart.red.solid"></a>
<b>chart.red.solid</b><br />
If <i>true</i> then the associated <i>chart.red.color</i> option is used as the actual color, not part of a gradient<br />
<i>Default: false</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a>
<b>chart.labels</b><br />
Instead of using computed numbers, which uses the maximum value, you can specify the Odometer to use textual labels instead, with this option.<br /> <i>Default: null</i><br /><br />
<a name="chart.label.area"></a>
<b>chart.label.area</b><br />
The width of the area that labels are put in. <br /><i>Default: 35</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points). <br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="needle"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle</h3> <a name="chart.needle.width"></a>
<b>chart.needle.width</b><br />
How thick the needle is. <br /><i>Default: 2</i><br /><br />
<a name="chart.needle.color"></a>
<b>chart.needle.color</b><br />
The color that is applied to the needle. <br /><i>Default: black</i><br /><br />
<a name="chart.needle.head"></a>
<b>chart.needle.head</b><br />
This controls whether the arrow head on the end of the needle is displayed. <br /><i>Default: true</i><br /><br />
<a name="chart.needle.type"></a>
<b>chart.needle.type</b><br />
This determines which type of needle is used. It can be <i>pointer</i> or <i>triangle</i>. <br />
<i>Default: pointer</i><br /><br />
<a name="chart.needle.triangle.border"></a>
<b>chart.needle.triangle.border</b><br />
This controls the colour of the border for the pointer. If you don't want it you could set it to be transparent -
<i>rgba(0,0,0,0)</i>.<br />
<i>Default: #aaa</i><br /><br />
<a name="chart.needle.extra"></a>
<b>chart.needle.extra</b><br />
With this you can specify a number of extra pointers that will be drawn on the Odometer. An example would be a meter that's used to show upload and download data. An example use:<pre class="code">odo.Set('chart.needle.extra', [[16, 'red'], [24, 'blue']]);</pre><br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="title"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Title</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title text. <br /><i>Default: no title set</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow.inner"></a>
<b>chart.shadow.inner</b><br />
Whether a drop shadow is applied to the inner circle of the Odometer<br /><i>Default: false</i><br /><br />
<a name="chart.shadow.outer"></a>
<b>chart.shadow.outer</b><br />
Whether a drop shadow is applied to the whole Odometer.<br /><i>Default: false</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the value is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50" and is only used if chart.value.text is <i>true</i>.<br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the value is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms" and is only used if chart.value.text is <i>true</i>.<br /><i>Default: none</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the labels.<br />
<i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
</div><!-- /DOCS --><br /><br />
</body>
</html>

577
OfficeWeb/sdk/Common/Charts/docs/pie.html
View file

@ -1,577 +0,0 @@
<!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>Documentation about Pie charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs pie charts" />
<meta name="description" content="Documentation about the Pie charts including information on all the options available to you" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
<?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>
>
Pie charts
</div>
<h1>Pie <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data to be shown on the Pie chart</span>
var data = [564,155,499,611,322];
<span class="javascript-comment">// Create the Pie chart. The arguments are the canvas ID and the data to be shown.</span>
var pie = new OfficeExcel.Pie('myPie', data);
<span class="javascript-comment">// Configure the chart to look as you want.</span>
pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
pie.Set('chart.linewidth', 5);
pie.Set('chart.stroke', 'white');
<span class="javascript-comment">// Call the .Draw() chart to draw the Pie chart.</span>
pie.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/pie.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the pie chart looks. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myPie.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#shadows">Shadows</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#zoom">Zoom</a></li>
<!-- <li><a href="#scale">Scale</a></li> -->
<li><a href="#events">Events</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a>
<b>chart.colors</b><br />
Colors to be used for the pie segments. <br /><i>Default: ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,255,0)', 'rgb(0,255,255)', 'red', 'pink', 'black', 'white']</i><br /><br />
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
The color of the seperating lines. By setting this to your background color, and setting the linewidth to approx. 5, it will make the pie chart look "exploded". <br /><i>Default: #999</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points). <br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of labels to be used for the chart. <br /><i>Default: [] (an empty array)</i><br /><br />
<a name="chart.labels.sticks"></a>
<b>chart.labels.sticks</b><br />
Stipulates that sticks for the labels are shown.<br />
<i>Default: false</i><br /><br />
<a name="chart.labels.sticks.color"></a>
<b>chart.labels.sticks.color</b><br />
Sets the color of the label sticks.<br />
<i>Default: #aaa</i><br /><br />
<a name="chart.labels.sticks.length"></a>
<b>chart.labels.sticks.length</b><br />
Sets the length of the label sticks.<br />
<i>Default: 7</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the pie chart. <br /><i>Default: none</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="shadows"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadows</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a simple shadow effect is applied. <br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /> <i>Default: rgba(0,0,0,0.5)</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect. <br /> <i>Default: 3</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow.<br /><i>Default: 3</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array of tooltips, starting from the middle right (ie east) axis, and going clockwise sequentially.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This can be <i>onclick</i> or <i>onmousemove</i> and determines which event is used for tooltips.<br />
<i>Default: onclick</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br />
<i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br />
<i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more
information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.rounded"></a>
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.color.shape"></a>
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<a name="chart.key.linewidth"></a>
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="chart.key.interactive"></a>
<b>chart.key.interactive</b><br />
This option enables the facility to click on the pie chart to highlight (explode only) the relevant segment.<br />
<i>Default: false</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<!--
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
-->
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> <a name="chart.align"></a>
<b>chart.align</b><br />
Whether to left, center or right align the pie chart.<br /><i>Default: center</i><br /><br />
<a name="chart.linewidth"></a>
<b>chart.linewidth</b><br />
By setting this to roughly 5, and setting the strokestyle to the same colour as your background colour,you will get a segment separation effect.<br /><i>Default: 1</i><br /><br />
<a name="chart.variant"></a>
<b>chart.variant</b><br />
This can be either <i>pie</i> (the default) or <i>donut</i>. Setting this to <i>donut</i> is how you get a
donut chart.<br />
<i>Default: pie</i><br /><br />
<a name="chart.highlight.style"></a>
<b>chart.highlight.style</b><br />
Can be either <i>explode</i>, <i>2d</i> or <i>3d</i> and determines which style of segment highlighting is used in
conjunction with tooltips.<br />
<i>Default: 3d</i><br /><br />
<a name="chart.highlight.style.2d.fill"></a>
<b>chart.highlight.style.2d.fill</b><br />
When 2D highlighting for tooltips is used, this controls the color of the highlighting. The former name for this property was
<i>chart.highlight.style.2d.color</i>.<br />
<i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="chart.highlight.style.2d.stroke"></a>
<b>chart.highlight.style.2d.stroke</b><br />
When 2D highlighting for tooltips is used, this controls the stroke color of the highlighting.<br />
<i>Default: rgba(255,255,255,0)</i><br /><br />
<a name="chart.explode"></a>
<b>chart.explode</b><br />
This can either be an array with the same number of elements as segments, or a single number, in which case every
segment will be exploded that amount. If it's an array then only those segments will be exploded - eg <i>[0,5,0,0]</i><br />
<i>Default: [] (an empty array)</i><br /><br />
</div>
<a name="methods"></a>
<p>&nbsp;</p>
<br />&nbsp;<br />
<h2>Methods</h2>
<b>obj.getSegment(event)</b><br /><br />
obj.getSegment() makes it easy to determine which segment of the Pie chart was clicked on. It provides:
<ul>
<li>Originating X coordinate</li>
<li>Originating Y coordinate</li>
<li>The radius of the segment</li>
<li>The starting angle (measured in radians)</li>
<li>The ending angle (measured in radians)</li>
<li>The zero-indexed segment number</li>
</ul>
<pre class="code">
&lt;script&gt;
OfficeExcel.Register(myGraph);
myGraph.canvas.onclick = function (e)
{
OfficeExcel.FixEventObject(e);
OfficeExcel.Redraw();
var canvas = e.target;
var context = canvas.getContext('2d');
var obj = canvas.__object__;
<span style="color: green">var segment = obj.getSegment(e);</span>
if (segment) {
context.fillStyle = 'rgba(255,255,255,0.5)';
context.beginPath();
context.moveTo(segment[0], segment[1]);
context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0);
context.stroke();
context.fill();
e.stopPropagation();
}
}
window.onclick = function (e)
{
OfficeExcel.Redraw();
}
&lt;/script&gt;
</pre>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<b>obj.Explode(index, size)</b><br /><br />
<p>
The Explode() method allows you to programmatically trigger the exploding (ie the highlighting of) a particular segment.
The Explode() method is used like so:
</p>
<pre class="code">
&lt;script&gt;
myObj = new OfficeExcel.Pie('cvs', [8,9,4,6]);
myObj.Draw();
<span style="color: green">myObj.Explode(index, size);</span>
&lt;/script&gt;
</pre>
<p>
The index argument is the zero-index segment to operate on (counting from the north axis). An the size is measured in pixels.
</p>
<b>Important Note</b>
<p>
This method was formerly a common object method, called <i>OfficeExcel.getSegment(e)</i>, but has now (6th March 2011) been
moved to be part of the Pie chart object.
</p>
</body>
</html>

194
OfficeWeb/sdk/Common/Charts/docs/png.html
View file

@ -1,194 +0,0 @@
<!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 to retrieve a PNG of your chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts docs png image" />
<meta name="description" content="Documentation about how to retrieve a PNG representation of your chart" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
window.onload = function ()
{
line = new OfficeExcel.Line('cvs', [4,3,7,4,5,6,7,4,8,9]);
line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']);
line.Set('chart.hmargin', 5);
line.Set('chart.title', 'Retrieving a PNG of your chart (context menu)');
line.Set('chart.title.vpos', 0.5);
line.Set('chart.tickmarks', 'endcircle');
if (!OfficeExcel.isOld()) {
line.Set('chart.contextmenu', [
['Get PNG', OfficeExcel.showPNG],
null,
['Cancel', function () {}]
]);
}
line.Set('chart.linewidth', 2);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.shadow.color', 'red');
OfficeExcel.Clear(line.canvas, 'white'); // This effectively sets the background color to be white
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>
>
Retrieving a PNG of your chart
</div>
<h1>Retrieving <span>a PNG of your 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>
<style>
span#png_link {
position: absolute;
left: 535px;
top: 30px;
border: 1px black solid;
padding: 1px;
background-color: white;
cursor: pointer;
color: blue;
font-size: 10pt;
border: 2px solid gray;
border-radius: 5px;
font-weight: bold;
font-family: Arial;
}
</style>
<div style="position: relative">
<span id="png_link" onclick="OfficeExcel.showPNG(document.getElementById('cvs'), event);">PNG</span>
<canvas id="cvs" width="600" height="250" style="float: left">[No canvas support]</canvas>
</div>
<p>
OfficeExcel provides an easy way to get a PNG image of your chart. This allows you to
easily save the image locally to use in (for example) a document, spreadsheet or presentation.
</p>
<p>
Originally, the function was designed to be used with a context menu, so it is located in the <i>OfficeExcel.common.context.js</i>.
Now though, you do not have to use the function with a context menu, and can instead pass in the canvas as the optional argument. There's an
example of its usage on the first <a href="../examples/radar.html">Radar example</a href>.
</p>
<br clear="all" />
<p>Include the context menu code:</p>
<pre class="code">&lt;script src="../libraries/OfficeExcel.common.context.js" &gt;&lt;/script&gt;</pre>
<p>Add the context menu:</p>
<pre class="code">
myGraph.Set('chart.contextmenu', [
<span style="color: green">['Get PNG', OfficeExcel.showPNG]</span>,
null,
['Cancel', function () {}]
]);</pre>
<h4>Using the function without a context menu</h4>
<p>
If you want to use the function with a piece of text (or an image) as the "link", optionally positioned over the canvas, you can pass
the canvas into the function as an argument, along with the event object.
</p>
<pre class="code">
&lt;!-- This CSS positions the link over the top right of the canvas --&gt;
&lt;style&gt;
span#png_link {
position: absolute;
left: 450px;
top: 30px;
border: 1px black solid;
padding: 1px;
background-color: #eee;
cursor: pointer;
}
&lt;/style&gt;
&lt;div style="position: relative"&gt;
&lt;span id="png_link" <span style="color: green">onclick="OfficeExcel.showPNG(myCanvas, event)"</span>&gt;Get PNG&lt;/span&gt;
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;/div&gt;
</pre>
<h4>Retrieving just the PNG URL</h4>
<p>
If you just want to get the PNG image URL - this can be done with the standard canvas function<i>.toDataUrl()</i>:
</p>
<pre class="code">var myUrl = myCanvas.toDataURL();</pre>
<p>
This gives you a data: URL which represents the canvas. Like <a href="javascript: location.href = line.canvas.toDataURL()">this</a>.
Because the URLs are very long there are some things that you should be aware of:
</p>
<ul>
<li>Google Chrome shows the image, but doesn't show the URL in the address bar</li>
<li>MSIE9 can show the image using the context menu API (top) method, but not the stand-alone image.</li>
</ul>
</body>
</html>

158
OfficeWeb/sdk/Common/Charts/docs/pseudo-standard-events.html
View file

@ -1,158 +0,0 @@
<!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>The pseudo-standard events available in OfficeExcel</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs async asynchronous" />
<meta name="description" content="Documentation about the pseudo-standard events that are available in OfficeExcel" />
<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.effects.js"></script>
<script src="../libraries/OfficeExcel.bar.js"></script>
<!--[if lt IE 9]><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>
>
Pseudo-standard events
</div>
<h1>Pseudo-standard <span>events</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="cvs" width="600" height="300" style="float: right">[No canvas support]</canvas>
<script>
function myClick (e, bar)
{
var obj = bar[0];
var x = bar[1];
var y = bar[2];
var w = bar[3];
var h = bar[4];
var idx = bar[5];
alert('The onclick listener just fired...!');
}
window.onload = function ()
{
var myBar = new OfficeExcel.Bar('cvs', [4,5,8,4,6,8,5]);
myBar.Set('chart.labels', ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']);
myBar.Set('chart.colors', ['blue']);
myBar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
myBar.Set('chart.events.click', myClick);
OfficeExcel.Effects.Bar.Wave2(myBar);
}
</script>
<p>
Normally, if you apply an <i>onclick</i> listener to the canvas it will apply to the <b>whole</b> canvas. OfficeExcel provides a way
to add event listeners to your chart so that the event listeners apply only to the appropriate areas. In the case of the Bar
chart on the right this means the actual bars themselves. You can see the effect here when you click on a bar - you get an
alert. And when you click on a non-bar area - nothing happens.
</p>
<p>
You can use the properties:
<ul>
<li>chart.events.click</li>
<li>chart.events.mousemove</li>
</ul>
To add your listeners to the chart.
The listener is simply a function that is called when the event fires. Only one function can be specified, so you need to
check the index to see if the bar is the one you want.
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
<span style="color: green">/**
* This is the function that is run when the event fires.
*/
function myClick (e, bar)
{
var obj = bar[0];
var x = bar[1];
var y = bar[2];
var w = bar[3];
var h = bar[4];
var idx = bar[5];
alert('The onclick listener just fired...!');
}</span>
var myBar = new OfficeExcel.Bar('cvs', [4,5,8,4,6,8,5]);
myBar.Set('chart.labels', ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']);
myBar.Set('chart.colors', ['blue']);
<span style="color: green">myBar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
myBar.Set('chart.events.click', myClick); // The myClick function is the one above</span>
OfficeExcel.Effects.Bar.Wave2(myBar);
&lt;/script&gt;
</pre>
<h4>Note</h4>
<p>
If you want the mouse pointer to change to the hand when you move the mouse over a bar you need to do
as shown below in the <i>chart.events.mousemove</i> event with the CSS <i>cursor</i> property. When you move the
mouse away from the bar the pointer will be restored to its previous state. Like this:
</p>
<pre class="code">
obj.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
</pre>
</body>
</html>

528
OfficeWeb/sdk/Common/Charts/docs/radar.html
View file

@ -1,528 +0,0 @@
<!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 personal, |
* | charity and educational purposes it is free to use. You can read the full |
* | license here: |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Documentation about Radar charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs async asynchronous" />
<meta name="description" content="Documentation about Radar chart including information on all the options available to you" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
<?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>
>
Radar charts
</div>
<h1>Radar <span>charts documentation</span></h1>
<div style="background-color: #ffb; border: 2px dashed #000; padding: 3px">
This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in OfficeExcel),
however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it
you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too
(to <i>radar</i>).
</div>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data to be represented on the Radar chart.</span>
var data = [3, 3, 41, 37, 16];
<span class="javascript-comment">// Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.</span>
var radar = new OfficeExcel.Radar('myRadar', data);
<span class="javascript-comment">// If you want to show multiple data sets, then you give them like this:
// var radar = new OfficeExcel.Radar('myRadar', [3,5,6,8], [4,5,2,6]);</span>
<span class="javascript-comment">// Configure the Radar chart to look as you wish.</span>
radar.Set('chart.background.circles', true);
radar.Set('chart.color', 'rgba(255,0,0,0.5)');
radar.Set('chart.circle', 20);
radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
radar.Set('chart.key', ['Market share', 'A made up figure']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
radar.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/radar.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the chart apears. You can set these properties by using the Set() method. Eg:
</p>
<p>
<b>myRadar.Set('color', 'rgba(255,0,0,0.5)');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#title">Title</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#misc">Miscellaneous</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
The colors of the radar chart(s).<br />
<i>Default: red</i><br /><br />
<a name="chart.colors.alpha"></a>
<b>chart.colors.alpha</b><br />
If set (a number between 0 nd 1), this will be used as the alpha value of the colors of the chart.<br />
<i>Default: null</i><br /><br />
<a name="title"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Title</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title, if any, of the chart.<br />
<i>Default: Not set</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a>
<b>chart.labels</b><br />
The labels to use for the chart.<br /><i>Default: An empty array</i><br /><br />
<a name="chart.labels.axes"></a>
<b>chart.labels.axes</b><br />
This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br />
<a name="chart.labels.offsetx"></a>
<b>chart.labels.offsetx</b><br />
The X pixel offset for the labels.<br /><i>Default: 10</i><br /><br />
<a name="chart.labels.offsety"></a>
<b>chart.labels.offsety</b><br />
The Y pixel offset for the labels.<br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points).<br /><i>Default: 10</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.ymax"></a>
<b>chart.ymax</b><br />
The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br />
<a name="chart.scale.round"></a>
<b>chart.scale.round</b><br />
Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
<i>Default: null</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
This stipulates how many decimal places there are.
<br /><i>Default: 0</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.radius"></a>
<b>chart.radius</b><br />
This allows you to override the default calculated radius and set your own.
<br /><i>Default: null (it's calculated from the canvas width/height)</i><br /><br />
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the color of the highlight stroke.
<br /><i>Default: gray</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: white</i><br /><br />
<a name="chart.background.circles"></a>
<b>chart.background.circles</b><br />
Whether to draw the grey background circles.<br />
<i>Default: true</i><br /><br />
<a name="chart.linewidth"></a>
<b>chart.linewidth</b><br />
The width of the outline.<br />
<i>Default: 1</i><br /><br />
<a name="chart.circle"></a>
<b>chart.circle</b><br />
What value to draw a circle at. Defaults to zero (off). You could use this to represent a threshold of some sort.<br />
<i>Default: 0</i><br /><br />
<a name="chart.circle.fill"></a>
<b>chart.circle.fill</b><br />
What color to fill the circle with.<br />
<i>Default: red</i><br /><br />
<a name="chart.circle.stroke"></a>
<b>chart.circle.stroke</b><br />
What color to stroke (ie The outline) the circle with.<br />
<i>Default: black</i><br /><br />
<a name="chart.accumulative"></a>
<b>chart.accumulative</b><br />
If set to true this will produce a "stacked" Radar chart. Obviously you must have two or more data sets, and also
the data sets must have the same number of data points.<br />
<i>Default: false</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br />
<i>Default: black</i><br /><br />
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
A numerically indexed array of tooltips that are shown when a hotspot is hovered over. These can contain HTML.<br />
<i>Default: An empty array</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The visual effect used when showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br />
<i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br />
<i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
</div><!-- /DOCS --><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getpoint"></a>
<b>obj.getPoint(event)</b><br /><br />
<p>
This function returns the details of any focused point on the chart. It returns:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The index of the applicable dataset (if you only yse one dataset this will always be 0)</li>
<li>The index of the point within the dataset</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
</body>
</html>

148
OfficeWeb/sdk/Common/Charts/docs/release-notes-january-2012.html
View file

@ -1,148 +0,0 @@
<!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>The January 2012 release notes</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="The release notes for the November 2011 release" />
<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">
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<!-- 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>
<?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="release-notes.html">Release notes</a>
>
January 2012
</div>
<h1>January <span>2012 release notes</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 January 2012 release of OfficeExcel is now available and has these changes:
</p>
<ul>
<li>
Relevant charts libraries now have two new properties:
<ul>
<li><i>chart.events.click</i></li>
<li><i>chart.events.mousemove</i></li>
</ul>
These new properties make it much easier to add your own event listening functions. You can read more about these
new properties <a href="pseudo-standard-events.html"><b>here</b></a>.
</li>
<li>The Radar chart origin is now the "north" axis instead of the "east" axis.</li>
<li>The Radar chart now supports a stacked variant when all datasets have the same number of data points.</li>
<li>
Implemented the Wave2 animation, which uses the requestAnimationFrame() function. In some browsers the
difference is quite subtle.
</li>
<li>
In some charts, there is now a getValue() method which can be used in event listener functions
to get the appropriate value (if any) when the chart is clicked for example. This affects the Bar,
HBar, HProgress, Line, Scatter, Thermometer and VProgress charts.
</li>
<li>
Added a getBar() method to the Thermometer which can be used inside standard event listener functions
(not the OfficeExcel ones) to determine if the bar area was clicked (or mouseover'ed etc).
</li>
<li>Added Rose chart Explode/Implode animation effects.</li>
<li>Added Radar chart chart.radius property.</li>
<li>
Radar chart labels have been altered so that their placement is now not linked to the number of points on the chart.
They also now go around the edge of the chart.
</li>
<li>A Grow effect has been added for the Gantt chart.</li>
<li>The Gantt chart now has a <i>chart.tooltips.event</i> property.</li>
<li>Added the Gantt chart property <i>chart.labels.align</i></li>
<li>The Gantt chart background grid autofit option now defaults to <i>true</i> (ie enabled).</li>
<li>
Added new background image properties:
<ul>
<li><i>chart.background.image.stretch</i></li>
<li><i>chart.background.image.x</i></li>
<li><i>chart.background.image.y</i></li>
<li><i>chart.background.image.align</i></li>
</ul>
These are relevant to the Bar, Line and Scatter charts.
</li>
<li>Added new HOWTO guides for certain common tasks.</li>
<li>Added a new Conceal effect - the opposite of the Reveal effect.</li>
<li>
Added new properties to the Gauge chart:
<ul>
<li><i>chart.centerpin.radius</i></li>
<li><i>chart.tickmarks.small</i></li>
<li><i>chart.tickmarks.big</i></li>
<li><i>chart.title.top</i></li>
<li><i>chart.title.top.font</i></li>
<li><i>chart.title.top.size</i></li>
<li><i>chart.title.top.color</i></li>
<li><i>chart.title.top.bold</i></li>
<li><i>chart.title.bottom</i></li>
<li><i>chart.title.bottom.font</i></li>
<li><i>chart.title.bottom.size</i></li>
<li><i>chart.title.bottom.color</i></li>
<li><i>chart.title.bottom.bold</i></li>
</ul>
</li>
<li>
The two scale properties chart.scale.point and chart.scale.thousand have been synchronised across the majority of
chart libraries.
</li>
</ul>
<p>
Download OfficeExcel here: <a href="http://www.OfficeExcel.net/downloads/OfficeExcel_2012-01-14-stable.zip"><b>OfficeExcel_2012-01-14-stable.zip</b></a>
</p>
</body>
</html>

133
OfficeWeb/sdk/Common/Charts/docs/release-notes-november-2011.html
View file

@ -1,133 +0,0 @@
<!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>The November 2011 release notes</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="The release notes for the November 2011 release" />
<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>
<?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="release-notes.html">Release notes</a>
>
November 2011
</div>
<h1>November <span>2011 release notes</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="text-align: center; margin-bottom: 5px; position: relative; top: -15px">
<div class="warning" style="display: inline; display: inline-block">
<b>Important:</b>
The stable OfficeExcel has been updated (30th November 2011) because of a bug with the Pie chart. The bug affects you if you use
tooltips and the
effect is set to <i>explode</i>. You can either update the <i>OfficeExcel.pie.js</i> file to the one in the current archive,
or simply change the effect (to <i>3d</i> or <i>2d</i>). If you downloaded OfficeExcel after this date you won't be affected by this.
</div>
</div>
<p>
The November 2011 release of OfficeExcel is now available and has these changes:
</p>
<ul>
<li>Added new animation effects: Bar chart Wave, Pie chart Wave, HProgress bar Grow, VProgress bar Grow</li>
<li>The Fuel chart Grow effect has been rewritten - it now "Grows" from the last position instead of from zero all the time</li>
<li>
The way the Donut chart is drawn has been altered so that the center can be transparent and shadows are drawn correctly.
There's an example here: <a href="http://www.OfficeExcel.net/examples/donut.html">http://www.OfficeExcel.net/examples/donut.html</a>
</li>
<li>
Added four new properties to the Gauge chart for controlling color: chart.border.inner, chart.border.outer,
chart.centerpin.color and chart.needle.color.
</li>
<li>IE7 is now supported with ExCanvas.</li>
<li>
IMPORTANT: The Pie chart .getSegment(e) method now returns angles measured in radians, not in degrees.
Roughly, 1 radian is equal to 57.29 degrees (or 180/Math.PI ).
</li>
<li>
IMPORTANT: The Rose chart .getSegment(e) method now returns angles measured in radians, not in degrees.
Roughly, 1 radian is equal to 57.29 degrees (or 180/Math.PI ).
</li>
<li>There's now an example of the Pie chart RoundRobin and Implode effect on the front page of the website</li>
<li>
The key has been separated out into it's own file. This saves roughly 30k if you don't use it. If you do use it
you will need to include this file in your page</li>
<li>
The chart libraries have a new technique that avoids you getting blurry lines that appear to be thicker than a
single pixel. This affects roughly 12 of the libraries.
</li>
<li>Added the chart.zoom.thumbnail.fixed option.</li>
<li>The Rose chart adjusting has been removed.</li>
<li>Added an example of financial data represented using the Scatter chart: <a href="http://www.OfficeExcel.net/docs/financial.html">http://www.OfficeExcel.net/docs/financial.html</a></li>
<li>Added an example of getting data from an XML file on the server: <a href="http://www.OfficeExcel.net/docs/xml-data.html">http://www.OfficeExcel.net/docs/xml-data.html</a></li>
<li>
The slide in and slideout have each had the argument used to stipulate the direction renamed:
<ul>
<li>OfficeExcel.Effects.jQuery.Slide.In(obj, {'from': 'right'});</li>
<li>OfficeExcel.Effects.jQuery.Slide.Out(obj, {'to': left'});</li>
</ul>
</li>
<li>Added more punctuation characters to the LED chart.</li>
<li>
The Scatter chart option chart.boxplot.width is now a SCALE value, not a PIXEL value. Therefore, if your chart.xmax
value is 28 (for four weeks) 1 week would be represented by a value of 7, whereas before that would simply be 7
pixels.
</li>
</ul>
<p>
Download OfficeExcel here: <a href="http://www.OfficeExcel.net/downloads/OfficeExcel_2011-11-26-stable.zip"><b>OfficeExcel_2011-10-26-stable.zip</b></a>
</p>
</body>
</html>

113
OfficeWeb/sdk/Common/Charts/docs/release-notes-october-2011.html
View file

@ -1,113 +0,0 @@
<!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>The October 2011 release notes</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="The release notes for the October 2011 release" />
<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>
<?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="release-notes.html">Release notes</a>
>
October 2011
</div>
<h1>October <span>2011 release notes</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 October 2011 release of OfficeExcel is now available and has new animation effects and other improvements including:
</p>
<ul>
<li>You can now have multiple events per "person" with the Gantt chart.</li>
<li>Added the Gauge chart, which is another variation of a meter.</li>
<li>Added the Line chart Trace animation</li>
<li>Added more testimonials - if you want to submit one there is a link on the OfficeExcel front page: <a href="http://www.OfficeExcel.net">http://www.OfficeExcel.net</a>.</li>
<li>Added easing to the HBar Grow effect. The effect is quite subtle.</li>
<li>Added the Pie chart RoundRobin effect.</li>
<li>Added Scatter chart boxplot tooltips.</li>
<li>
Added the Pie chart Implode effect. Combined with the Roundrobin effect looks nice:
<pre class="code">
myPie = new OfficeExcel.Pie('cvs', [4,3,5,6]);
myPie.Set('chart.colors', ['red','green','blue','pink']);
OfficeExcel.Effects.Pie.Implode(myPie);
OfficeExcel.Effects.Pie.RoundRobin(myPie);
</pre>
</li>
<li>
The Rose chart Grow effect now slowly increases the start angle of the segments as well as the radius.
</li>
<li>Changed the Odo Grow effect so it grows from the last reading (if any).</li>
<li>Added the Gauge chart Grow effect. Like the Odo Grow effect it animates from the last reading (if any) instead of zero all the time.</li>
<li>Added the Line chart FoldToCenter. Combined with the UnfoldFromCenter effect could easily make a chart switching effect.</li>
<li>Added an .Explode() method to the Pie chart for programmatically exploding segments. There's an example of its use on the Pie chart example page: <a href="http://www.OfficeExcel.net/examples/pie.html">http://www.OfficeExcel.net/examples/pie.html</a></li>
<li>Added Grow effect to the Radar chart.</li>
<li>Added Grow effect to the Waterfall chart.</li>
<li>Added Pie chart <i>chart.key.interactive</i></li>
<li>Tweaked the Meter chart Grow animation - test your charts when upgrading if you use the Grow animation.</li>
<li>Multiple filled line charts now work with the Trace animation.</li>
</ul>
<ul>
<li>Note: The Pie chart <i>chart.segments</i> array is being removed (November or December) - use the myObj.angles array instead</li>
<li>Note: The default positioning for titles has changed - you may need to adjust your positioning.</li>
</ul>
<p>
Download OfficeExcel here: <a href="http://www.OfficeExcel.net/downloads/OfficeExcel_2011-10-27-stable.zip"><b>OfficeExcel_2011-10-27-stable.zip</b></a>
</p>
</body>
</html>

89
OfficeWeb/sdk/Common/Charts/docs/release-notes.html
View file

@ -1,89 +0,0 @@
<!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>OfficeExcel release notes</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="The OfficeExcel release notes index" />
<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>
<?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>
>
OfficeExcel release notes
</div>
<h1>OfficeExcel <span>release notes</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>
Listed below are the current and previous release notes.
</p>
<p>
<b>2012</b>
</p>
<ul>
<li><a href="release-notes-january-2012.html">January 2012</a></li>
</ul>
<p>
<b>2011</b>
</p>
<ul>
<li><a href="release-notes-november-2011.html">November 2011</a></li>
<li><a href="release-notes-october-2011.html">October 2011</a></li>
</ul>
<p>
Past release notes are not available.
</p>
</body>
</html>

2897
OfficeWeb/sdk/Common/Charts/docs/released.txt
View file

File diff suppressed because it is too large Load diff

139
OfficeWeb/sdk/Common/Charts/docs/resizing.html
View file

@ -1,139 +0,0 @@
<!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>Resizing your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="A description of the resizing feature that's a part of OfficeExcel" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.context.js" ></script>
<script src="../libraries/OfficeExcel.common.resizing.js" ></script>
<script src="../libraries/OfficeExcel.common.tooltips.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 ()
{
/**
* Draw the line chart
*/
var line = new OfficeExcel.Line('myLine', [4,6,3,7,8,4,9,5,6,4,8,5] );
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.hmargin', 5);
line.Set('chart.title', 'A resizable line chart (tooltips)');
line.Set('chart.colors', ['red']);
OfficeExcel.isOld() ? null : line.Set('chart.resizable', true);
line.Set('chart.hmargin', 5);
line.Set('chart.shadow', true);
line.Set('chart.shadow.blur', 5);
line.Set('chart.shadow.offsetx', 1);
line.Set('chart.shadow.offsety', 1);
line.Set('chart.background.grid.autofit', true);
line.Set('chart.background.grid.autofit.numhlines', 10);
line.Set('chart.linewidth', 3);
//line.Set('chart.tooltips', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
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>
>
Resizing your charts
</div>
<h1>Resizing <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>
<canvas id="myLine" width="400" height="200" style="float: left">[No canvas support]</canvas>
<p>&nbsp;</p>
<p>
OfficeExcel has the facility to allow you to resize your charts. This is new as of 10th April 2010. Because of the
numerous events it has to install code on, it is unlikely to work with other dynamic features. The context
menu does though, and now that tooltips use DOM2 events, so do they. It can be useful if you are,
for example, doing a presentation and need to enlarge the chart.
</p>
<p>
All you need to do to enable it is set <i>chart.resizable</i> to true. There are certain caveats that you should be aware of though:
</p>
<br clear="all" />
<ul>
<li>
Charts can only be enlarged down and to the right, so you will get better results if your chart is not placed at the
right of the page.
</li>
<li>
The minimum you can resize your charts to is 50% of the original chart width/height.
</li>
<li>
<b>Note:</b> Resizing can change the layout of your page (reflows). As such you will need to be careful when laying out your
page, and you may need to experiment with things like CSS float:, width, height etc so that the effect is either not apparent
or is minimal.
</li>
<li>
If your canvas is nested within a table, resizing can result in very minor (1-2px) positioning changes. These
can be mitigated by turning off table borders, setting the cellspacing to 0 and also setting the cellpadding to 0.
</li>
</ul>
<br /><br /><br />
</body>
</html>

634
OfficeWeb/sdk/Common/Charts/docs/rose.html
View file

@ -1,634 +0,0 @@
<!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 personal, |
* | charity and educational purposes it is free to use. You can read the full |
* | license here: |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Documentation about the Rose chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas docs bar charts" />
<meta name="description" content="Documentation about Rose charts including information on all the options available to you" />
<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.jpg"/>
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
<?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>
>
Rose charts
</div>
<h1>Rose <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#stacked">Stacked Rose charts</a></li>
<li><a href="#non-equi-angular">Non-equi-angular Rose charts</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data to be shown on the Rose chart.</span>
var data = [41,37,16,3,3];
<span class="javascript-comment">// To show a stacked Rose chart you specify the data like this. non-equi-angular
// Rose charts are very similar to this but with only two elements to
// each array - the magnitude of the segment and the size of the angle.
// var rose = new OfficeExcel.Rose('myRose', [[4,5], [6,8], [4,3]]);</span>
<span class="javascript-comment">// Create the rose chart.</span>
var rose = new OfficeExcel.Rose('myRose', data);
<span class="javascript-comment">// Configure the chart to look as you want.</span>
rose.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
rose.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/rose.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Rose chart appears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myRose.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#axis properties">Axis properties</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.margin"></a>
<b>chart.margin</b><br />
This is the margin that is either side of each segment. This allows you to have a gap between each segment. It is the size
of the gap in <b>degrees</b>. It doesn't apply to non-equi-angular Rose charts - only regular and stacked charts.
<br />
<i>Default: 0</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of colors to be used by the chart.<br />
<i>Default: ['red', 'rgb(0,255,255)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua']</i><br /><br />
<a name="chart.colors.alpha"></a>
<b>chart.colors.alpha</b><br />
Instead of using <i>rgba()</i>, you can use color definitions such as <i>red</i> along with this setting to add
transparency.<br />
<i>Default: null</i></i><br /><br />
<a name="chart.colors.sequential"></a>
<b>chart.colors.sequential</b><br />
Because of the new (as of July 2011) support for grouped Rose charts, the way colors are used has changed. So to have them
used in a sequential fashion as before the change, you will need to set this option to true.
<i>Default: false</i></i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points).<br /> <i>Default: 10</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
The labels, if any, for the chart.<br /><i>Default: none</i><br /><br />
<a name="chart.labels.axes"></a>
<b>chart.labels.axes</b><br />
This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br />
<a name="chart.labels.position"></a>
<b>chart.labels.position</b><br />
This can be either <i>center</i> or <i>edge</i> and determines the position of the labels.<br /><i>Default: center</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart. <br /><i>Default: none</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="axis properties"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3> <a name="chart.ymax"></a>
<b>chart.ymax</b><br />
This can be set to control the maximum value of the scale. It's so called to maintain a degree of API compatibility across chart libraries.<br /><i>Default: null</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.round"></a>
<b>chart.scale.round</b><br />
Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br />
<i>Default: null</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
This stipulates how many decimal places there are.
<br /><i>Default: 0</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array of tooltips. You can use HTML if you so wish.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br />
<i>Default: onclick</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The tooltip effect used. Can be either <i>fade</i> or <i>expand</i>.<br />
<i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br />
<i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more
information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br />
<i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br />
<i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="chart.adjustable"></a>
<b>chart.adjustable</b><br />
Defaulting to false, this determines whether your rose chart will be adjustable (click the edge of a segment and drag to adjust it). <br /><i>Default: false</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>
<a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are:
<i>thumbnail</i> and <i>canvas</i>.<br />
<i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="chart.variant"></a>
<b>chart.variant</b><br />
This option can be either <i>stacked</i> (the default) or <i>non-equi-angular</i>. Just because his option is set to
<i>stacked</i> does not automatically mean your chart is stacked. If you don't suppy the appropriate data you chart
may well appear as a regular Rose chart. Examples of appropriate data:
<p>
A regular Rose chart
</p>
<pre class="code">
myRose = new OfficeExcel.Rose('myCanvas', [8,5,4,8,6,7,2,3,5,8]);
</pre>
<p>
A stacked Rose chart
</p>
<pre class="code">
myRose = new OfficeExcel.Rose('myCanvas', [[2,6],[2,4],[1,5],[4,3],[7,5],[8,3],[4,5],[3,4],[2,6],[4,5]]);
</pre>
<p>
A non-equi-angular Rose chart
</p>
<pre class="code">
myRose = new OfficeExcel.Rose('myCanvas', [[45,23],[45,23],[5,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]);
myRose.Set('chart.variant', 'non-equi-angular');
</pre>
<p>
It is important to note that with a non-equi-angular each "value" is actually an array consisting of two values,
as shown. The first value represents the magnitude of the segment (ie how far the segment extends outwards),
and the second value represents the size of the segment. The second value is relative to all the other second
values - it is not the absolute angle used. The angle is calculated for you.
</p>
<i>Default: stacked</i><br /><br />
<a name="chart.exploded"></a>
<b>chart.exploded</b><br />
This stipulates the exploded value for a segment. It can either be a number which is applied to all segments,
or an array of seperate values (eg <i>[15,0,20,25]</i>). The values are the distance from the center that the segment is.<br />
<i>Default: 0</i><br /><br />
</div>
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<b>obj.getSegment(event)</b><br /><br />
obj.getSegment() makes it easy to determine which segment of the Rose chart was clicked on. It provides:
<ul>
<li>The start angle (measured in radians)</li>
<li>The end angle (measured in radians)</li>
<li>Start radius of the segment</li>
<li>End radius of the segment</li>
<li>The origins X coordinate</li>
<li>The origins Y coordinate</li>
<li>The numerical index of the segment</li>
</ul>
<pre class="code">
&lt;script&gt;
OfficeExcel.Register(myGraph);
myGraph.canvas.onclick = function (e)
{
OfficeExcel.FixEventObject(e);
OfficeExcel.Redraw();
var canvas = e.target;
var context = canvas.getContext('2d');
var obj = canvas.__object__;
<span style="color: green">var segment = obj.getSegment(e);</span>
if (segment) {
context.fillStyle = 'rgba(255,255,255,0.5)';
context.beginPath();
context.moveTo(segment[0], segment[1]);
context.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0);
context.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true);
context.stroke();
context.fill();
e.stopPropagation();
}
}
window.onclick = function (e)
{
OfficeExcel.Redraw();
}
&lt;/script&gt;
</pre>
<b>Important Note</b>
<p>
This method was formerly a common object method, called <i>OfficeExcel.getSegment(e)</i>, but has now (6th March 2011) been
moved to be part of the Rose chart object.
</p>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="stacked"></a>
<p>&nbsp;</p>
<h2>Stacked Rose charts</h2>
<p>
Rose charts can now be stacked, much like stacked Bar charts. For an example see the <a href="../examples/rose.html">Rose
chart example page</a>. The data should be supplied in the same format as a stacked Bar chart:
</p>
<pre class="code">
myRose = new OfficeExcel.Rose('myCanvas', [[4,6,2],[8,4,7],[4,3,6],[1,5,6]]);
</pre>
<a name="non-equi-angular"></a>
<p>&nbsp;</p>
<h2>Non-equi-angular Rose charts</h2>
<p>
Rose charts can be displayed in a <i>non-equi-angular</i> mode. For an example see the
<a href="../examples/rose.html">Rose chart example page</a>. Instead of a plain array of values (as with a regular
Rose chart), each data point should itself be a two element array consisting of the magnitude value and also a relative
circular size. This second value is not the actual size of the angle - this is calculated. For example:
</p>
<pre class="code">
&lt;script&gt;
myRose = new OfficeExcel.Rose('myCanvas', [[47,6],[48,2],[40,4],[43,5],[45,6]]);
myRose.Set('chart.variant', 'non-equi-angular');
myRose.Draw();
&lt;/script&gt;
</pre>
</body>
</html>

423
OfficeWeb/sdk/Common/Charts/docs/rscatter.html
View file

@ -1,423 +0,0 @@
<!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>Documentation about Radial scatter charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas javascript charts docs radial scatter chart" />
<meta name="description" content="Documentation about Radial scatter charts including information on all the options available to you" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
<?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>
>
Radial scatter charts
</div>
<h1>Radial <span>scatter charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data that is used for the chart. The first argument is the
// angle and the second argument is the magnitude shown.</span>
var data = [ [15,53,'red'], [45,63,null, 'The tooltip'], [48,45,'green'], [52,38], [51,61] ];
<span class="javascript-comment">// Create the chart with the data from above. The arguments are: the canvas ID and the
// points to show. You can specify multiple data arrays for multiple data sets.</span>
var rscatter= new OfficeExcel.Rscatter('myCanvas', data);
<span class="javascript-comment">// Configure the chart to look as requested.</span>
rscatter.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','N']);
rscatter.Set('chart.gutter.left', 35);
rscatter.Set('chart.gutter.right', 35);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
rscatter.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/rscatter.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the chart appears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myRscatter.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
The labels, if any, for the chart.<br /><i>Default: none</i><br /><br />
<a name="chart.labels.axes"></a>
<b>chart.labels.axes</b><br />
This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br />
<a name="chart.labels.position"></a>
<b>chart.labels.position</b><br />
This can be either <i>center</i> or <i>edge</i> and determines the position of the labels.<br /><i>Default: center</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br /><i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: false</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
This stipulates how many decimal places there are.
<br /><i>Default: 0</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /><i>Default: onclick</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
</div><!-- /DOCS --><br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getpoint"></a>
<b>obj.getPoint(event)</b><br /><br />
<p>
This method returns the details of any applicable/focused point on the chart. It returns:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The index (starting at zero) of the point in the dataset</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
</body>
</html>

1069
OfficeWeb/sdk/Common/Charts/docs/scatter.html
View file

File diff suppressed because it is too large Load diff

133
OfficeWeb/sdk/Common/Charts/docs/setconfig.html
View file

@ -1,133 +0,0 @@
<!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>Information about the SetConfig() function</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs setconfig" />
<meta name="description" content="Information about the SetConfig() function" />
<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.jpg"/>
<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.bar.js" ></script>
<!--[if lt IE 9]><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>
>
The OfficeExcel.SetConfig() function
</div>
<h1>The <span>OfficeExcel.SetConfig() function</span></h1>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<div style="text-align: center; float: right; font-family: Verdana">
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>
<script>
window.onload = function ()
{
var grad = document.getElementById("cvs").getContext('2d').createLinearGradient(0, 0, 0, 250);
grad.addColorStop(0, 'red');
grad.addColorStop(1, 'white');
var config = {
'chart.colors': [grad],
'chart.labels': ['John','Fred','June','Charles','Lou', 'Olga'],
'chart.title.yaxis': 'Amount',
'chart.title.yaxis.pos': 0.2,
'chart.title.xaxis': 'Person',
'chart.gutter.left': 45,
'chart.gutter.bottom': 35,
'chart.gutter.right': 5,
'chart.background.grid.autofit': true,
'chart.strokestyle': 'rgba(0,0,0,0)',
'chart.title': 'A chart showing OfficeExcel.SetConfig()'
}
var bar = new OfficeExcel.Bar('cvs', [48,56,52,49,43,51]);
OfficeExcel.SetConfig(bar, config);
bar.Draw();
}
</script>
<p>
Instead of using a number of .Set() calls, you may find that using the <i>OfficeExcel.SetConfig()</i> method more to your tastes. The
method is an alternative to setting the configuration of your chart. It doesn't offer any speed benefits, but it can facilitate reuse better, so that the
appearance of your websites charts is the same. There's an example of its use below:
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
/**
* This configuration could be stored in a central configuration file, making its reuse easier. You could also have
* several different configurations that you pick and choose from depending on the requirements. Values in
* subsequent calls to .SetConfig() will overwrite previous ones.
*/
var config = {
'chart.colors': ['red', 'green'],
'chart.labels': ['John','Fred','June','Charles','Lou', 'Olga'],
'chart.title.yaxis': 'Amount',
'chart.title.yaxis.pos': -0.2,
'chart.title.xaxis': 'Person',
'chart.background.grid.autofit': true,
'chart.title': 'A chart showing OfficeExcel.SetConfig()'
}
var bar = new OfficeExcel.Bar('cvs', [48,56,52,49,43,51]);
OfficeExcel.SetConfig(bar, config);
bar.Draw();
}
&lt;/script&gt;
</pre>
</body>
</html>

409
OfficeWeb/sdk/Common/Charts/docs/thermometer.html
View file

@ -1,409 +0,0 @@
<!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>Documentation about the Thermometer chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs thermometer chart" />
<meta name="description" content="Documentation about the Thermometer charts including information on all the options available to you" />
<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>
<?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>
>
Thermometer charts
</div>
<h1>Thermometer <span>charts documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the Thermometer chart. The arguments are: the canvas ID, the minimum,
// the maximum and the indicated value.</span>
var thermometer = new OfficeExcel.Thermometer('myCanvas', 0,100,14);
<span class="javascript-comment">// Configure the thermometer chart to look as you want.</span>
thermometer.Set('chart.gutter.left', 45);
thermometer.Set('chart.gutter.right', 45);
thermometer.Set('chart.colors', ['rgba(255,0,0,1)']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
thermometer.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/thermometer.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myBar.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#labels">Labels and text</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#interactive">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
</ul>
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 15</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 15</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 15</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 15</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of the colors of the actual bars. <br />
<i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title.side"></a>
<b>chart.title.side</b><br />
This is the text that is used as the side title on the left hand side of the thermometer.<br />
<i>Default: '' (An empty string)</i><br /><br />
<a name="chart.title.side.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.side.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.side.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.<br />
<i>Default: 0.5</i><br /><br />
<a name="labels"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3>
<a name="chart.value.label"></a>
<b>chart.value.label</b><br />
This controls whether the Thermometers value is shown in text.<br />
<i>Default: true</i><br /><br />
<a name="chart.ylabels.count"></a>
<b>chart.ylabels.count</b><br />
A value that controls how many Y labels there are. Keep in mind that if you use this it may result in decimals,
and to see the full number you may need to use <i>chart.scale.decimals</i>.<br />
<i>Default: 10</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3>
<a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a drop shadow is applied. <br /><i>Default: true</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /><i>Default: gray</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow. <br /><i>Default: 0</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow. <br /><i>Default: 0</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect. <br /><i>Default: 15</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.visible"></a>
<b>chart.scale.visible</b><br />
Defaulting to false, this controls whether the scale is visible.<br />
<i>Default: false</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
This allows you to control the amount of decimals that the labels have.<br />
<i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="interactive"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>
<a name="chart.adjustable"></a>
<b>chart.adjustable</b><br />
Defaulting to false, this determines whether your bar chart will be adjustable.<br />
<i>Default: false</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event
handlers this has to install code on, This feature is unlikely to work with other dynamic features (the
context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br />
<i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br />
<i>Default: black</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>
<a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br />
<i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br />
<i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br />
<i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br />
<i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br />
<i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br />
<i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br />
<i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br />
<i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
</div>
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This methods returns details on the focused bar (there's only one). It returns an array consisting of:
</p>
<ul>[obj, left, top, width, height]
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width</li>
<li>The height</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="getValue"></a>
<b>obj.getValue(mixed)</b>
<p>
This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use.
Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element
array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse
or coordinates are in the gutter areas. An example:
</p>
<pre class="code">
myChart.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
</pre>
</body>
</html>

515
OfficeWeb/sdk/Common/Charts/docs/tooltips.html
View file

@ -1,515 +0,0 @@
<!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>Documentation about using tooltips in your charts</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs tooltips" />
<meta name="description" content="Documentation about using tooltips in your charts" />
<meta name="googlebot" content="NOODP">
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../favicon.png">
<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.jpg"/>
<!-- 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.line.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]-->
<style>
.bar_chart_tooltips_css {
background-color: white ! important;
border: 2px solid black ! important;
padding: 3px;
padding-top: 5px ! important;
font-size: 14pt ! important;
text-align: center;
-webkit-box-shadow: 0 0 15px gray ! important;
-moz-box-shadow: 0 0 15px gray ! important;
box-shadow: 0 0 15px gray ! important;
}
</style>
<?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>
>
Using tooltips in your charts
</div>
<h1>Using <span>tooltips in 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; text-align: right">
<canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br />
Tooltip effect:
<select id="effect" onchange="OfficeExcel.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();">
<option>none</option>
<option selected>fade</option>
<option>expand</option>
<option>contract</option>
<option>snap</option>
</select>
</div>
<script>
/**
* This is the function which handles the display of all the tooltips (for the line chart) - it is passed the
* zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you
* could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this
* point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet.
*/
function myTooltipFunc (idx)
{
var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev'];
return tooltips[idx];
}
window.onload = function ()
{
// Has to be a global variable
line = new OfficeExcel.Line('cvs', [64,34,26,35,51,24]);
/**
* These lines show you some of the alternative methods of specifying tooltips:
*
* o An array of strings - one per tooltip
* o An array of functions - one per tooltip
* o A single function that handles all of the tooltips
* o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip)
*
* Functions are passed a single argument - the zero-indexed number of the tooltip
*/
//line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
OfficeExcel.isOld() ? null : line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]);
//line.Set('chart.tooltips', myTooltipFunc);
line.Set('chart.tooltips.effect', 'fade');
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 2);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.colors', ['green']);
line.Set('chart.tickmarks', 'circle');
line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
line.Draw();
/* -------------------------------------------------------------------------------------------------------- */
/**
* Create and display the bar chart
*
* A GLOBAL VARIABLE ON PURPOSE
*/
bar = new OfficeExcel.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]);
var grad = bar.context.createLinearGradient(0,25,0,225);
grad.addColorStop(0, 'blue');
grad.addColorStop(1, 'white');
bar.Set('chart.hmargin', 15);
bar.Set('chart.colors', [grad]);
bar.Set('chart.linewidth', 2);
bar.Set('chart.tickmarks', 'endsquare');
bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']);
bar.Set('chart.background.grid.autofit', true);
bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
OfficeExcel.isOld() ? null : bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY
bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
bar.Set('chart.tooltips.effect', 'fade');
bar.Draw();
/**
* This installs the OfficeExcel ontooltip event handler. The CreateTooltipGraph() function is defined below
*/
OfficeExcel.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph);
}
/*
* Used by the bar chart to get the tooltip text.
*
* @param idx int The zero indexed number of the tooltip
*/
function getTooltip(idx)
{
return '<b>' + bar.Get('chart.labels')[idx] + 's stats</b><br /><canvas id="__tooltip_canvas__" width="400" height="150" style="background-color: white; margin: 5px">[No canvas support</canvas>';
}
/**
* This is the function that is called (by the ontooltip event) to create the tooltip charts
*
* @param obj object The chart object
*/
function CreateTooltipGraph(obj)
{
// These are the statistics that are shown in the tooltips. This data could quite easily
// come from your server.
var stats = [
[5,8,7,6,9,5,4,6,3,5,4,4],
[4,6,7,8,6,5,4,4,2,5,8,4],
[3,2,1,3,4,5,1,5,6,7,4,1],
[3,5,1,2,4,8,9,6,7,4,5,1],
[9,6,7,8,7,9,4,5,6,3,5,8],
[4,8,5,6,4,3,5,4,6,5,7,8],
[4,3,4,9,8,7,8,6,4,3,5,1],
[1,2,3,1,2,4,5,1,6,5,3,1],
[2,3,5,4,3,5,1,3,5,2,6,4]
];
var idx = OfficeExcel.Registry.Get('chart.tooltip').__index__;
var data = stats[idx];
// This data could be dynamic
var g = new OfficeExcel.Line('__tooltip_canvas__', data);
g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
g.Set('chart.gutter.top', 5);
g.Set('chart.hmargin', 5);
g.Set('chart.tickmarks', 'endcircle');
g.Set('chart.background.grid.autofit', true);
g.Draw();
}
</script>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#hold">What can they hold?</a></li>
<li><a href="#how">How can I specify them?</a></li>
<li><a href="#what">What can I specify?</a></li>
<li><a href="#charts">Can I show charts in tooltips?</a></li>
<li><a href="#customise">Can I customise the appearance of tooltips?</a></li>
<li><a href="#effects">What tooltip effects are available?</a></li>
<li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li>
<li><a href="#override">Can I override the tooltip function?</a></li>
</ul>
<a name="introduction"></a>
<h4>Introduction</h4>
<p>
Tooltips are a very effective and straight forward way to extend your charts and add more information to them, without overloading
the user.
</p>
<a name="hold"></a>
<h4>What can they hold?</h4>
<p>
At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#charts">below</a>
for information on showing charts in tooltips.
</p>
<a name="how"></a>
<h4>How can I specify them?</h4>
<p>
You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example:
</p>
<ol>
<li>
Include the OfficeExcel libraries.
<pre class="code">
&lt;script src="OfficeExcel.common.core.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.tooltips.js"&gt;&lt;/script&gt;
&lt;script src="OfficeExcel.line.js"&gt;&lt;/script&gt;
</pre>
</li>
<li>
Define your chart and set the tooltips property.
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
var line = new OfficeExcel.Line('cvs', [64,34,26,35,51,24]);
<span style="color: green">line.Set('chart.tooltips', ['&lt;b&gt;Winner!&lt;/b&gt;&lt;br /&gt;John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span>
line.Set('chart.tooltips.effect', 'expand');
line.Set('chart.hmargin', 10);
line.Set('chart.linewidth', 2);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.color', 'green');
line.Set('chart.shadow.blur', 25);
line.Set('chart.colors', ['green']);
line.Set('chart.tickmarks', 'circle');
line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
line.Draw();
}
&lt;/script&gt;
</pre>
</li>
</ol>
<a name="what"></a>
<h4>What can I specify?</h4>
<p>
The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about
to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify
one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish.
These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip
text. So to summarise:
</p>
<ul>
<li>
An array of strings. The string is used as the tooltip. Eg:
<pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre>
</li>
<li>
An array of function objects. Each function is called and should return the text to be used. Eg:
<pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre>
</li>
<li>
A single function object. This is probably the most useful. This function is called whenever a tooltip
is about to be displayed, and passed the numerical, zero-indexed tooltip index of the point on the chart.
The function should return the text to be used as the tooltip. Note that the function you specify is called
<i>before</i>
the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance
of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg:
<pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre>
</li>
<li>
An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose
.innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide
the DIV by setting its <i>display</i> CSS value to <i>none</i>. For example:
<pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre>
</li>
</ul>
<a name="charts"></a>
<h4>Can I show charts in tooltips?</h4>
<canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas>
<p>
You can, and with the custom event support that OfficeExcel has, it's reasonably easy. Simply attach your function that
creates the chart to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page
so that the code that creates the chart can run. The sequence is:
</p>
<ol>
<li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the &lt;canvas&gt; tag).</li>
<li style="margin-top: 0">Use the <i>ontooltip</i> OfficeExcel event so that a function is called when a tooltip is shown.</li>
<li style="margin-top: 0">This function should subsequently create the chart.</li>
</ol>
<p>
The tooltip DIV is to be found in the OfficeExcel registry - <i>OfficeExcel.Registry.Get('chart.tooltip')</i>. And if you want it the
numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property:
<i>OfficeExcel.Registry.Get('chart.tooltip').__index__</i>
</p>
<pre class="code">
&lt;script src="OfficeExcel.common.core.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.common.tooltips.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.bar.js" &gt;&lt;/script&gt;
&lt;script src="OfficeExcel.line.js" &gt;&lt;/script&gt;
&lt;style&gt;
.OfficeExcel_tooltip {
background-color: white ! important;
}
&lt;/style&gt;
&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;script&gt;
window.onload = function ()
{
labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];
bar = new OfficeExcel.Bar("cvs", [4.5,28,13,26,35,36]);
bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats&lt;br/&gt;&lt;canvas id="__tooltip_canvas__" width="400" height="150"&gt;[No canvas support]&lt;/canvas&gt;';});
bar.Set('chart.hmargin', 10);
bar.Set('chart.tickmarks', 'endcircle');
bar.Set('chart.colors', ['blue']);
bar.Set('chart.ymax', 100);
bar.Set('chart.labels', labels);
bar.Draw();
<span style="color: green">OfficeExcel.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span>
}
<span style="color: green">
/**
* This is the function that is called by the ontooltip event to create the tooltip charts
*
* @param obj object The chart object
*/
function CreateTooltipGraph(obj)
{
// This data could be dynamic
var line = new OfficeExcel.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.hmargin', 5);
line.Set('chart.tickmarks', 'endcircle');
line.Set('chart.background.grid.autofit', true);
line.Draw();
}
</span>
&lt;/script&gt;
</pre>
<p>
If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart.
There's also a basic stripped-down example <a href="basic_tooltips.html">here</a>.
</p>
<br clear="all" />
<a name="customise"></a>
<h4>Can I customise the appearance of tooltips?</h4>
<p>
Yes. You can either use the default CSS class <i>OfficeExcel_tooltip</i>, or you can specify a specific CSS class that a
charts tooltips should use with the property <i>chart.tooltips.css.class</i>. The two charts on this page have
different looking tooltips by using this method - the line chart uses the default look, whilst the bar chart
overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example:
</p>
<pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre>
<pre class="code">
&lt;style&gt;
.bar_chart_tooltips_css {
background-color: white ! important;
border: 2px solid black ! important;
padding: 3px;
}
&lt;/style&gt;
</pre>
<p>
You can read more about OfficeExcel CSS classes <a href="css.html">here</a>.
</p>
<a name="effects"></a>
<h4>What tooltip effects are available?</h4>
<p>
These effects are available to you:
</p>
<ul>
<li>fade</li>
<li>expand</li>
<li>contract</li>
<li>snap</li>
<li>none</li>
</ul>
<p>
All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect
which expands outward from the center of the tooltip, <i>contract</i> is like the <i>expand</i> effect but in reverse, <i>snap</i> is an effect which can be used in a limited set of circumstances
and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used
by all chart types is <i>fade</i>. Note: If you're showing canvases in your tooltips then the <i>expand</i>, <i>contract</i> and <i>snap</i>
effects will not work - you must use <i>fade</i> or <i>none</i>.
</p>
<p>
<b>Note:</b> The snap effect is only available to chart types where the tooltip is triggered using the onmousemove event.
Currently this means the <i>Line chart</i>, <i>Rscatter chart</i>, <i>Scatter chart</i> and Radar chart. It can also
be negatively effected when using multiple charts on one page.
</p>
<a name="firefox"></a>
<h4>Tooltips, the clipboard and Firefox</h4>
<p>
If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the <a href="issues.html">issues page</a>.
</p>
<a name="override"></a>
<h4>Can I override the tooltip function?</h4>
<p>
You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard
to showing the tooltip. Highlighting the chart is still done for you - the override function is only concerned with showing
the tooltip. The override function is passed these arguments:
</p>
<ul>
<li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li>
<li>text - The tooltip text (id:xxx strings are NOT expanded)</li>
<li>x - The X coordinate in relation to the entire page</li>
<li>y - The Y coordinate in relation to the entire page</li>
<li>index - The numerical index of the tooltip in the original tooltip array</li>
</ul>
<p>
<b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the
<i>OfficeExcel.getTooltipText('id:xxx')</i> function.
</p>
<pre class="code">
&lt;script&gt;
function tooltip_override (canvas, text, x, y, idx)
{
alert('In tooltip override function...');
}
myObj.Set('chart.tooltips.override', tooltip_override);
&lt;/script&gt;
</pre>
<div id="foo">Foo</div>
</body>
</html>

544
OfficeWeb/sdk/Common/Charts/docs/vprogress.html
View file

@ -1,544 +0,0 @@
<!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 personal, |
* | charity and educational purposes it is free to use. You can read the full |
* | license here: |
* | http://www.OfficeExcel.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>Documentation about Vertical progress Bars</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs waterfall charts" />
<meta name="description" content="Documentation about the VProgress charts including information on all the options available to you" />
<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.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/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>
<?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>
>
Vertical Progress bar
</div>
<h1>Vertical <span>progress bar documentation</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>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// Create the object. The arguments are: The canvas ID, the indicated value and the maximum value.</span>
var myProgress = new OfficeExcel.VProgress('myProgress', 78, 100);
<span class="javascript-comment">// Configure the chart to look as you want.</span>
myProgress.Set('chart.colors', ['red']);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
myProgress.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/vprogress.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myProgress.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#chart configuration">Chart configuration</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#key">Key</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul>
<a name="chart configuration"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3>
<a name="chart.labels.count"></a>
<b>chart.labels.count</b><br />
This controls how many labels there are.
<br /><i>Default: 10</i><br /><br />
<a name="chart.tickmarks"></a>
<b>chart.tickmarks</b><br />
Whether the tickmarks are drawn. <br />
<i>Default: true</i><br /><br />
<a name="chart.tickmarks.color"></a>
<b>chart.tickmarks.color</b><br />
The color used for tickmarks.<br />
<i>Default: black</i><br /><br />
<a name="chart.tickmarks.inner"></a>
<b>chart.tickmarks.inner</b><br />
This controls whether the bar has inner tickmarks<br />
<i>Default: false</i><br /><br />
<a name="chart.tickmarks.zerostart"></a>
<b>chart.tickmarks.zerostart</b><br />
If true, labels and tickmarks will start at and show zero.<br />
<i>Default: false</i><br /><br />
<a name="chart.min"></a>
<b>chart.min</b><br />
The minimum value. Setting a minimum value allows to show a more detailed progress bar.<BR />
<i>Default: 0</i><br /><br />
<a name="chart.numticks"></a>
<b>chart.numticks</b><br />
How many tick marks there are. <br /><i>Default: 10</i><br /><br />
<a name="chart.numticks.inner"></a>
<b>chart.numticks.inner</b><br />
How many inner tick marks there are. <br /><i>Default: 50</i><br /><br />
<a name="chart.arrows"></a>
<b>chart.arrows</b><br />
This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.<br><i>Default: false</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3>
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.color"></a>
<b>chart.color</b><br />
The color of the bar. This can be a solid color, or a gradient that you create. <br /><i>Default: #0c0</i><br /><br />
<a name="chart.background.color"></a>
<b>chart.background.color</b><br />
The background color. <br /><i>Default: #eee</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).<br /><i>Default: false</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow.<br /><i>Default: rgba(0,0,0,0.5)</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The blurring effect that is applied to the shadow.<br /><i>Default: 3</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size of the text (in points). <br /><i>Default: 10</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
Labels that are applied to the chart. <br /><i>Default: An empty array</i><br /><br />
<a name="chart.labels.position"></a>
<b>chart.labels.position</b><br />
Can be <i>left</i> or <i>right</i> and controls which side the labels are positioned on.<br />
<i>Default: right</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the Y scale is measured in (these are preppend to the number). <br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the Y scale is measured in (these are appended to the number). <br /><i>Default: none</i><br /><br />
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
This stipulates how many decimal places there are.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br />
<i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the progress bar. <br />
<i>Default: An empty string</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0
and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br />
<i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br />
<i>Default: black</i><br /><br />
<a name="chart.title.side"></a>
<b>chart.title.side</b><br />
Using this property you can specify a title for the chart that is displayed in the left hand gutter (vertically).<br />
<i>Default: An empty string</i><br /><br />
<a name="chart.title.side.font"></a>
<b>chart.title.side.font</b><br />
The font used to draw the side title.<br />
<i>Default: </i><br /><br />
<a name="chart.title.side.size"></a>
<b>chart.title.side.size</b><br />
The font size of the side title.<br />
<i>Default: 12</i><br /><br />
<a name="chart.title.side.color"></a>
<b>chart.title.side.color</b><br />
The color used for the side title.<br />
<i>Default: </i><br /><br />
<a name="chart.title.side.bold"></a>
<b>chart.title.side.bold</b><br />
Whether the side title is bold or not.<br />
<i>Default: </i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
An array, albeit one element only. This is shown when the progress bar is clicked on. Tooltips can contain HTML.<br /><i>Default: An empty array</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing the tooltip. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br />
<i>Default: null</i><br /><br />
<a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="chart.adjustable"></a>
<b>chart.adjustable</b><br />
Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it). <br /><i>Default: false</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="key"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3>
<a name="chart.key"></a>
<b>chart.key</b><br />
An array of key information. <br />
<i>Default: [] (An empty array)</i><br /><br />
<a name="chart.key.background"></a>
<b>chart.key.background</b><br />
The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br>
<i>Default: white</i><br /><br />
<a name="chart.key.halign"></a>
<b>chart.key.halign</b><br />
Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be
aligned <i>left</i> or <i>right</i>.<br />
<i>Default: right</i><br /><br />
<a name="chart.key.position"></a>
<b>chart.key.position</b><br />
Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br />
<i>Default: graph</i><br /><br />
<b>chart.key.position.x</b><br />
This allows you to specify a specific X coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.y</b><br />
This allows you to specify a specific Y coordinate for the key.<br />
<i>Default: null</i><br /><br />
<b>chart.key.position.gutter.boxed</b><br />
If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br />
<i>Default: true</i><br /><br />
<a name="chart.key.shadow"></a>
<b>chart.key.shadow</b><br />
Whether a small drop shadow is applied to the key.<br />
<i>Default: false</i><br /><br />
<a name="chart.key.shadow.color"></a>
<b>chart.key.shadow.color</b><br />
The color of the shadow.<br />
<i>Default: #666</i><br /><br />
<a name="chart.key.shadow.blur"></a>
<b>chart.key.shadow.blur</b><br />
The extent of the blurring effect used on the shadow.<br />
<i>Default: 3</i><br /><br />
<a name="chart.key.shadow.offsetx"></a>
<b>chart.key.shadow.offsetx</b><br />
The X offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<a name="chart.key.shadow.offsety"></a>
<b>chart.key.shadow.offsety</b><br />
The Y offset of the shadow.<br />
<i>Default: 2</i><br /><br />
<b>chart.key.rounded</b><br />
This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br />
<i>Default: true</i><br /><br />
<b>chart.key.color.shape</b><br />
This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br />
<i>Default: square</i><br /><br />
<b>chart.key.linewidth</b><br />
The line width of the surrounding border on the key.<br />
<i>Default: 1</i><br /><br />
<a name="misc"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
</div>
<br /><br />
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This method returns details of any focused bar. It returns:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the section</li>
<li>The height of the segment</li>
<li>The index of the segment (starting at zero). This is here because you can have multiple bars on the progress bar.</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
<a name="getValue"></a>
<b>obj.getValue(mixed)</b>
<p>
This method can be used to get the value at a particular point or at the mouse coordinates, based on the scale that is in use.
Not simply the coordinates of the mouse. The argument can either be an event object (for use in event listener functions) OR a two element
array consisting of the X and Y coordinates (ie when you're not necessarily in an event listener). It returns null if the mouse
or coordinates are in the gutter areas. An example:
</p>
<pre class="code">
myChart.canvas.onclick = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
// ...
}
</pre>
</body>
</html>

614
OfficeWeb/sdk/Common/Charts/docs/waterfall.html
View file

@ -1,614 +0,0 @@
<!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>Documentation about the Waterfall chart</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs waterfall charts" />
<meta name="description" content="Documentation about the Waterfall chart including information on all the options available to you" />
<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>
<?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>
>
Waterfall charts
</div>
<h1>Waterfall <span>charts documentation</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></p>
<ul>
<li><a href="#example">Example</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#methods">Methods</a></li>
</ul>
<a name="example"></a>
<p>&nbsp;</p>
<h2>Example</h2>
<pre class="code">
&lt;script&gt;
window.onload = function ()
{
<span class="javascript-comment">// The data to be shown on the Waterfall chart.</span>
var data = [90, -16, -18, -34];
<span class="javascript-comment">// Create the Waterfall chart. The arguments are: the canvas ID and the data</span>
var waterfall = new OfficeExcel.Waterfall('cvs', data);
<span class="javascript-comment">// Now call the .Draw() method to draw the chart.</span>
waterfall.Draw();
}
&lt;/script&gt;
</pre>
<p>
The example file is <a href="../examples/waterfall.html">here</a>.
</p>
<a name="properties"></a>
<p>&nbsp;</p>
<h2>Properties</h2>
<p>
You can use these properties to control how the Waterfall chart apears. You can set them by using the Set() method. Eg:
</p>
<p>
<b>myBar.Set('name', 'value');</b>
</p>
<ul>
<li><a href="#background">Background</a></li>
<li><a href="#axis">Axis properties</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#labels and text">Labels and text</a></li>
<li><a href="#titles">Titles</a></li>
<li><a href="#shadow">Shadow</a></li>
<li><a href="#scale">Scale</a></li>
<li><a href="#interactive features">Interactive features</a></li>
<li><a href="#zoom">Zoom</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
</ul>
<a name="background"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a>
<b>chart.background.barcolor1</b><br />
The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.barcolor2"></a>
<b>chart.background.barcolor2</b><br />
The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br />
<a name="chart.background.grid"></a>
<b>chart.background.grid</b><br />
Whether to show the background grid or not. <br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.color"></a>
<b>chart.background.grid.color</b><br />
The color of the background grid. <br /><i>Default: #ddd</i><br /><br />
<a name="chart.background.grid.hsize"></a>
<b>chart.background.grid.hsize</b><br />
The horizontal background grid size. <br /><i>Default: 40</i><br /><br />
<a name="chart.background.grid.vsize"></a>
<b>chart.background.grid.vsize</b><br />
The vertical background grid size. <br /><i>Default: 18</i><br /><br />
<a name="chart.background.grid.width"></a>
<b>chart.background.grid.width</b><br />
The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 1</i><br /><br />
<a name="chart.background.grid.border"></a>
<b>chart.background.grid.border</b><br />
Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.hlines"></a>
<b>chart.background.grid.hlines</b><br />
Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.vlines"></a>
<b>chart.background.grid.vlines</b><br />
Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br />
<a name="chart.background.grid.autofit"></a>
<b>chart.background.grid.autofit</b><br />
Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br />
<a name="chart.background.grid.autofit.numhlines"></a>
<b>chart.background.grid.autofit.numhlines</b><br />
When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br />
<a name="chart.background.grid.autofit.numvlines"></a>
<b>chart.background.grid.autofit.numvlines</b><br />
When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br />
<a name="chart.background.grid.autofit.align"></a>
<b>chart.background.grid.autofit.align</b><br />
If you want to have your grid lines line up with the labels (both X and Y axis), you can set this to true and OfficeExcel will
attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br />
<i>Default: false</i><br /><br />
<a name="chart.background.hbars"></a>
<b>chart.background.hbars</b><br />
An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: <i>myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br />
<a name="chart.background.image"></a>
<b>chart.background.image</b><br />
If you want to specify a background image to use on your chart, specify it with this property.<br />
<i>Default: null</i><br /><br />
<a name="axis"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3>
<a name="chart.noaxes"></a>
<b>chart.noaxes</b><br />
Whether the axes are drawn<br />
<i>Default: false (the axes ARE drawn)</i><br /><br />
<a name="chart.noxaxis"></a>
<b>chart.noxaxis</b><br />
Whether the X axis is drawn<br />
<i>Default: false (the X axis IS drawn)</i><br /><br />
<a name="chart.noyaxis"></a>
<b>chart.noyaxis</b><br />
Whether the Y axis is drawn<br />
<i>Default: false (the Y axis IS drawn)</i><br /><br />
<a name="chart.xaxispos"></a>
<b>chart.xaxispos</b><br />
This determines where the X axis is positioned. If you wish to show negative values then you should set this
to <i>center</i>.<br />
<i>Default: bottom</i><br /><br />
<a name="colors"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3>
<a name="chart.strokestyle"></a>
<b>chart.strokestyle</b><br />
The color of the outline of the bars. <br /><i>Default: #666</i><br /><br />
<a name="chart.colors"></a>
<b>chart.colors</b><br />
An array of the colors of the actual bars. <br />
<i>Default: An array - ['green', 'red', 'blue']</i><br /><br />
<a name="margins"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> <a name="chart.hmargin"></a>
<b>chart.hmargin</b><br />
The horizontal margin (in pixels) of the chart. <br /><i>Default: 5</i><br /><br />
<a name="chart.gutter.left"></a>
<b>chart.gutter.left</b><br />
The left gutter of the chart, (the gutter is where the labels and title are)).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.right"></a>
<b>chart.gutter.right</b><br />
The right gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.top"></a>
<b>chart.gutter.top</b><br />
The top gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="chart.gutter.bottom"></a>
<b>chart.gutter.bottom</b><br />
The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
<i>Default: 25</i><br /><br />
<a name="labels and text"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a>
<b>chart.text.color</b><br />
The color of the labels. <br /><i>Default: black</i><br /><br />
<a name="chart.text.size"></a>
<b>chart.text.size</b><br />
The size (in points) of the labels. <br /><i>Default: 10</i><br /><br />
<a name="chart.text.angle"></a>
<b>chart.text.angle</b><br />
The angle of the horizontal text labels (at the bottom of the chart). This can be one of three values - 0, 45 or 90.<br /><i>Default: 0 (Horizontal)</i><br /><br />
<a name="chart.text.font"></a>
<b>chart.text.font</b><br />
The font used to render the text.<br /><i>Default: Verdana</i><br /><br />
<a name="chart.labels"></a>
<b>chart.labels</b><br />
An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br />
<b>chart.ylabels</b><br />
Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /><i>Default: true</i><br /><br />
<a name="chart.numyticks"></a>
<b>chart.numyticks</b><br />
The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match. <br /><i>Default: 10</i><br /><br />
<a name="titles"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3>
<a name="chart.title"></a>
<b>chart.title</b><br />
The title of the chart, if any. <br />
<i>Default: null</i><br /><br />
<a name="chart.title.font"></a>
<b>chart.title.font</b><br />
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br />
<i>Default: null</i><br /><br />
<a name="chart.title.size"></a>
<b>chart.title.size</b><br />
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.bold"></a>
<b>chart.title.bold</b><br />
Whather the title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.background"></a>
<b>chart.title.background</b><br />
The background color (if any) for the title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.color"></a>
<b>chart.title.color</b><br />
The color of the title.<br /> <i>Default: black</i><br /><br />
<a name="chart.title.hpos"></a>
<b>chart.title.hpos</b><br />
This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br />
<a name="chart.title.vpos"></a>
<b>chart.title.vpos</b><br />
This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br />
<a name="chart.title.xaxis"></a>
<b>chart.title.xaxis</b><br />
This allows to specify a title for the X axis.<br />
<i>Default: none</i><br /><br />
<a name="chart.title.xaxis.size"></a>
<b>chart.title.xaxis.size</b><br />
This allows you to specify a size for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.font"></a>
<b>chart.title.xaxis.font</b><br />
This allows to specify a font for the X axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.xaxis.bold"></a>
<b>chart.title.xaxis.bold</b><br />
This controls whether the X axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.yaxis"></a>
<b>chart.title.yaxis</b><br />
This allows to specify a title for the Y axis.<br />
<i>Default: none</i><br /><br />
<a name="chart.title.yaxis.size"></a>
<b>chart.title.yaxis.size</b><br />
This allows you to specify a size for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.font"></a>
<b>chart.title.yaxis.font</b><br />
This allows to specify a font for the Y axis title.<br />
<i>Default: null</i><br /><br />
<a name="chart.title.yaxis.bold"></a>
<b>chart.title.yaxis.bold</b><br />
This controls whether the Y axis title is bold or not.<br />
<i>Default: true</i><br /><br />
<a name="chart.title.xaxis.pos"></a>
<b>chart.title.xaxis.pos</b><br />
This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br />
<a name="chart.title.yaxis.pos"></a>
<b>chart.title.yaxis.pos</b><br />
This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br />
<a name="chart.title.yaxis.align"></a>
<b>chart.title.yaxis.align</b><br />
Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br />
<i>Default: left</i><br /><br />
<a name="shadow"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a>
<b>chart.shadow</b><br />
Whether a drop shadow is applied. <br /><i>Default: false</i><br /><br />
<a name="chart.shadow.color"></a>
<b>chart.shadow.color</b><br />
The color of the shadow. <br /><i>Default: #666</i><br /><br />
<a name="chart.shadow.offsetx"></a>
<b>chart.shadow.offsetx</b><br />
The X offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.offsety"></a>
<b>chart.shadow.offsety</b><br />
The Y offset of the shadow. <br /><i>Default: 3</i><br /><br />
<a name="chart.shadow.blur"></a>
<b>chart.shadow.blur</b><br />
The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br />
<a name="scale"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3>
<a name="chart.scale.decimals"></a>
<b>chart.scale.decimals</b><br />
The number of decimal places to display for the Y scale.
<br /><i>Default: 0</i><br /><br />
<a name="chart.scale.point"></a>
<b>chart.scale.point</b><br />
The character used as the decimal point.<br /><i>Default: .</i><br /><br />
<a name="chart.scale.thousand"></a>
<b>chart.scale.thousand</b><br />
The character used as the thousand separator<br />
<i>Default: ,</i><br /><br />
<a name="chart.scale.formatter"></a>
<b>chart.scale.formatter</b><br />
To allow thoroughly custom formats of numbers in the scale, you can use this option to
specify a function that is used by OfficeExcel to format numbers. This function should
handle ALL of the formatting. Eg:<br /><br />
<pre class="code">
function myFormatter(obj, num)
{
return num + 'F'; // An example of formatting
}
myGraph.Set('chart.scale.formatter', myFormatter);
</pre>
<br /><i>Default: null</i><br /><br />
<a name="chart.units.pre"></a>
<b>chart.units.pre</b><br />
The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br />
<a name="chart.units.post"></a>
<b>chart.units.post</b><br />
The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br />
<a name="chart.ymax"></a>
<b>chart.ymax</b><br />
The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br />
<a name="interactive features"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a>
<b>chart.contextmenu</b><br />
An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br />
<a name="chart.tooltips"></a>
<b>chart.tooltips</b><br />
A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: null</i><br /><br />
<a name="chart.tooltips.effect"></a>
<b>chart.tooltips.effect</b><br />
The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br />
<a name="chart.tooltips.event"></a>
<b>chart.tooltips.event</b><br />
This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /><i>Default: onclick</i><br /><br />
<a name="chart.tooltips.css.class"></a>
<b>chart.tooltips.css.class</b><br />
This is the name of the CSS class the chart uses.<br /><i>Default: OfficeExcel_tooltip</i><br /><br />
<a name="chart.tooltips.override"></a>
<b>chart.tooltips.override</b><br />
If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br />
<a name="chart.crosshairs"></a>
<b>chart.crosshairs</b><br />
If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br />
<a name="chart.crosshairs.linewidth"></a>
<b>chart.crosshairs.linewidth</b><br />
This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br />
<a name="chart.crosshairs.color"></a>
<b>chart.crosshairs.color</b><br />
The color of the crosshairs.<br /><i>Default: #333</i><br /><br />
<a name="chart.crosshairs.hlines"></a>
<b>chart.crosshairs.hlines</b><br />
This determines whether the horizontal crosshair is shown.<br />
<i>Default: true</i><br /><br />
<a name="chart.crosshairs.vlines"></a>
<b>chart.crosshairs.vlines</b><br />
This determines whether the vertical crosshair is shown.<br />
<i>Default: true</i><br /><br />
<a name="chart.annotatable"></a>
<b>chart.annotatable</b><br />
Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br />
<a name="chart.annotate.color"></a>
<b>chart.annotate.color</b><br />
If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br />
<a name="chart.resizable"></a>
<b>chart.resizable</b><br />
Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br />
<i>Default: false</i><br /><br />
<a name="chart.resize.handle.background"></a>
<b>chart.resize.handle.background</b><br />
With this you can specify the background color for the resize handle. If you're adjusting the position of the
handle then you may need this to make the handle stand out more.<br />
<i>Default: null</i><br /><br />
<a name="zoom"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>
<a name="chart.zoom.mode"></a>
<b>chart.zoom.mode</b><br />
Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
<a name="chart.zoom.factor"></a>
<b>chart.zoom.factor</b><br />
This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
<a name="chart.zoom.fade.in"></a>
<b>chart.zoom.fade.in</b><br />
Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.fade.out"></a>
<b>chart.zoom.fade.out</b><br />
Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.hdir"></a>
<b>chart.zoom.hdir</b><br />
The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
<a name="chart.zoom.vdir"></a>
<b>chart.zoom.vdir</b><br />
The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
<a name="chart.zoom.delay"></a>
<b>chart.zoom.delay</b><br />
The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
<a name="chart.zoom.frames"></a>
<b>chart.zoom.frames</b><br />
The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
<a name="chart.zoom.shadow"></a>
<b>chart.zoom.shadow</b><br />
Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
<a name="chart.zoom.thumbnail.width"></a>
<b>chart.zoom.thumbnail.width</b><br />
When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.height"></a>
<b>chart.zoom.thumbnail.height</b><br />
When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
<a name="chart.zoom.thumbnail.fixed"></a>
<b>chart.zoom.thumbnail.fixed</b><br />
When the zoom is in thumbnail mode, you can use this property to fix the zoom in the top left corner instead
of it following the cursor around.<br />
<i>Default: false</i><br /><br />
<a name="chart.zoom.background"></a>
<b>chart.zoom.background</b><br />
Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
<a name="events"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Events</h3>
<a name="chart.events.click"></a>
<b>chart.events.click</b><br />
If you want to add your own <i>onclick</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="chart.events.mousemove"></a>
<b>chart.events.mousemove</b><br />
If you want to add your own <i>onmousemove</i> function you can do so by assigning it to this property. See
<a href="pseudo-standard-events.html">here</a> for details.
<br /><i>Default: null</i><br /><br />
<a name="miscellaneous"></a>
<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3>
<a name="chart.highlight.stroke"></a>
<b>chart.highlight.stroke</b><br />
If you use tooltips, this controls the colour of the highlight stroke.
<br /><i>Default: black</i><br /><br />
<a name="chart.highlight.fill"></a>
<b>chart.highlight.fill</b><br />
If you use tooltips, this controls the colour of the highlight fill.
<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br />
<a name="chart.axis.color"></a>
<b>chart.axis.color</b><br />
The color of the axis.<br /><i>Default: black</i><br /><br />
</div>
<a name="methods"></a>
<p>&nbsp;</p>
<h2>Methods</h2>
<a name="getbar"></a>
<b>obj.getBar(event)</b><br /><br />
<p>
This method returns details of the focused bar (if any). It provides:
</p>
<ul>
<li>The chart object</li>
<li>The X coordinate</li>
<li>The Y coordinate</li>
<li>The width of the bar</li>
<li>The height of the bar</li>
<li>The index of the pertinent bar (starting from zero).</li>
</ul>
<a name="getShape"></a>
<b>obj.getShape(event)</b>
<p>
This method is an alternate name for the above method but has a generic name that is the same acoss the various libraries.
</p>
</body>
</html>

190
OfficeWeb/sdk/Common/Charts/docs/what-is-html5-canvas.html
View file

@ -1,190 +0,0 @@
<!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 short description of what HTML5 canvas is</title>
<meta name="keywords" content="OfficeExcel html5 canvas charts what " />
<meta name="description" content="A short description of the HTML5 canvas tag" />
<meta name="googlebot" content="NOODP">
<meta property="og:title" content="OfficeExcel: What is HTML5 canvas?" />
<meta property="og:description" content="A brief description and a few examples of HTML5 canvas " />
<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.tooltips.js" ></script>
<script src="../libraries/OfficeExcel.bar.js" ></script>
<!--[if lt IE 9]><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>
>
What is HTML5 canvas?
</div>
<h1>What <span>is HTML5 canvas?</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>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#history">History</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#compare">Canvas compared to SVG</a></li>
<li><a href="#support">Browser support for HTML5 canvas</a></li>
</ul>
<a name="introduction"></a>
<h2>Introduction</h2>
<p>
HTML5 canvas is a new HTML tag (<i>&lt;canvas&gt;</i>) which is part of the forthcoming HTML5 standard. It allows bitmap
drawing which is controlled using Javascript, and is what the OfficeExcel libraries use to draw the charts. You could
liken it to a piece of paper which is part of your HTML page, on to which you can draw. Because you use Javascript to
draw on the canvas it becomes part of your page and allows interaction very easily.
</p>
<p>
Canvas uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something
you will probably have to redraw the entire canvas. The lack of a DOM means that canvas is fast to draw on and very
responsive - important when you're providing iteractive charts to your users.
</p>
<a name="history"></a>
<h2>History</h2>
<p>
HTML5 canvas was originally introduced by Apple for use in WebKit (which is used in their Safari browser and Google Chrome).
It is now part of the HTML5 specification and supported by all modern web browsers.
</p>
<a name="example"></a>
<h2>Example</h2>
<canvas id="cvs" width="350" height="250" style="border: 1px dashed gray; float: right">[No canvas support]</canvas>
<script>
window.onload = function ()
{
canvas = document.getElementById("cvs");
context = canvas.getContext('2d');
// Draw the red triangle
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'red';
context.moveTo(100, 25);
context.lineTo(150, 100);
context.lineTo(50, 100);
context.lineTo(100, 25);
context.stroke();
context.fill();
// Draw the blue square
context.beginPath();
context.fillStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(100, 75, 100,100);
context.fillRect(100, 75, 100,100);
context.stroke();
context.fill();
// Draw the yellow circle
context.beginPath();
context.globalAlpha = 0.5;
context.fillStyle = 'yellow';
context.arc(200,175,50,0,2 * Math.PI, 0);
context.stroke();
context.fill();
}
</script>
<p>
The example to the right is a very simple case of drawing a few primitives on the canvas. The dotted border is
provided by CSS to illustrate the drawing area.
</p>
<p>
The &lt;canvas&gt; tag itself is defined with just a width/height/id attribute. The one here also has a style attribute
to make it more evident in the page. The HTML used is shown below:
</p>
<br clear="all" />
<pre class="code">
&lt;canvas id="cvs" width="375" height="250"&gt;[No canvas support]&lt;canvas&gt;
</pre>
The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. This provides
for fallback content if the users browser doesn't support canvas.
<a name="compare"></a>
<h2>HTML5 Canvas compared to SVG</h2>
<p>
HTML5 canvas can be compared (a bit) to SVG - which is a vector based alternative for drawing in HTML pages. SVG is
at a more abstract level than canvas and maintains a record of everything drawn, using a DOM. This is then converted
to a bitmap when shown. In the above example, if the blue squares coordinates are changed (eg in an animation),
then the whole canvas needs to be cleared and redrawn for each frame of that animation.
</p>
<p>
As a result of not having to maintain a DOM though, &lt;canvas&gt; is fast to draw on and display to the browser.
</p>
<a name="support"></a>
<h2>Browser support for HTML5 canvas</h2>
<p>
Modern browsers supporting HTML5 support canvas, including IE9+. Earlier versions of MSIE have some support through
compatibility layers provided by Google and Mozilla. One such library - ExCanvas - is provided in the OfficeExcel archive
allowing IE7 and 8 to display the graphs, albeit without many of the dynamic features. You can read more on this
<a href="msie.html">here</a>.
</p>
<p align="right">
<b>
<a href="index.html">Full documentation &raquo;</a>
</b>
</p>
</body>
</html>

269
OfficeWeb/sdk/Common/Charts/docs/xml-data.html
View file

@ -1,269 +0,0 @@
<!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 using XML data</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs xml example" />
<meta name="description" content="An example of using XML data as a source of your chart data" />
<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.jpg"/>
<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>
<meta name="keywords" content="OfficeExcel chart html5 javascript canvas" />
<meta name="description" content="OfficeExcel: HTML5 Javascript charts library - Getting data from an XML file" />
<script src="../libraries/OfficeExcel.common.core.js" ></script>
<script src="../libraries/OfficeExcel.common.key.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<?php PrintAnalyticsCode() ?>
<script>
/**
* Makes an AJAX call. It calls the given callback (a function) when ready.
* It's the same AjaxCall() function as that in the AJAX documentation.
*
* @param string url The URL to retrieve
* @param function callback A function object that is called when the response is ready, there's an example below
* called "myCallback".
*/
function AjaxCall (url, callback)
{
// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
// MSIE
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = callback;
httpRequest.open('GET', url, true);
httpRequest.send();
}
/**
* This sample callback function is called when the data is ready (readyState=4). It is where
* the XML response is parsed, the data pulled out and finally the chart is created.
*/
function myXMLProcessor ()
{
// Check the XMLHttpRequest object readystate
if (this.readyState == 4 && this.status == 200) {
/**
* Create an xmlDoc parse. MSIE has a slightly different syntax to other browsers
*/
if (window.DOMParser) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.responseText,"text/xml");
} else {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(this.responseText);
}
/**
* Initialise the arrays that we will populate with data
*/
var john = [];
var fred = [];
var lucy = [];
var days = xmlDoc.getElementsByTagName("stats");
for (var i=0; i<days[0].childNodes.length; ++i) {
var node = days[0].childNodes[i]
if (node.nodeName == 'day') {
var john_tag = node.getElementsByTagName('john');
var fred_tag = node.getElementsByTagName('fred');
var lucy_tag = node.getElementsByTagName('lucy');
john.push(Number(john_tag[0].childNodes[0].nodeValue));
fred.push(Number(fred_tag[0].childNodes[0].nodeValue));
lucy.push(Number(lucy_tag[0].childNodes[0].nodeValue));
}
}
/**
* Now we have the information, create and show the chart
*/
var myLine = new OfficeExcel.Line('cvs', john, fred, lucy);
myLine.Set('chart.title', 'A chart of Johns, Freds and Lucys weekly statistics');
myLine.Set('chart.linewidth', 2);
myLine.Set('chart.hmargin', 5);
myLine.Set('chart.tickmarks', 'endcircle');
myLine.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
myLine.Set('chart.key', ['John', 'Fred', 'Lucy']);
myLine.Draw();
}
}
/**
* The window.onload function initiates fetching the data from the server. It makes use of the
* AjaxCall() which is detailed in the documentation here: http://www.OfficeExcel.net/docs/index.html#ajax
*/
window.onload = function ()
{
var url = 'http://' + location.host + '/sample.xml';
AjaxCall(url, myXMLProcessor);
}
</script>
</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>
>
Getting data from an XML file
</div>
<script>
if (OfficeExcel.isOld()) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the OfficeExcel Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
}
</script>
<h1>Fetching <span>data from an XML file (AJAX)</span></h1>
<div class="warning">
<b>Warning:</b>
Because of the XMLHttpRequest security restrictions this example does not work offline. You can view the online version
<a href="http://www.OfficeExcel.net/docs/xml-data.html" target="_blank">here</a>.
</div>
<canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<p>
This is an example of fetching data from an XML file that is located on the server. The page uses the XMLHttpRequest (Javascript)
object to fetch the XML file (<a href="http://www.OfficeExcel.net/sample.xml">sample.xml</a>) then parses it in Javascript and creates the chart. The function that parses the XML response
and then uses the data to create the chart is shown below and called <i>myXMLProcessor()</i> (it's the XMLHttpRequest callback function).
</p>
<p>
This example has been tested in modern browsers and also MSIE 7/8 (via MSIE9 compatibility modes).
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
// This is the same AJAX function that is defined in the documentation here:
// <a href="http://www.OfficeExcel.net/docs/#ajax">http://www.OfficeExcel.net/docs/#ajax</a>
AjaxCall('/sample.xml', myXMLProcessor);
/**
* This sample callback function is called when the data is ready (readyState=4). It is where
* the XML response is parsed, the data pulled out and finally the chart is created.
*/
function myXMLProcessor ()
{
// Check the readystate to see if the XMLHttpRequest object is ready
if (this.readyState == 4 && this.status == 200) {
/**
* This gets an xmlDoc object, accounting for differences in MSIE and
* other browsers
*/
if (window.DOMParser) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.responseText,"text/xml");
} else {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(this.responseText);
}
/**
* Initialise the arrays that we will populate with data
*/
var john = [];
var fred = [];
var lucy = [];
/**
* Now the main loop that goes through the XML extracting the data
*/
var days = xmlDoc.getElementsByTagName("stats");
for (var i=0; i&lt;days[0].childNodes.length; ++i) {
var node = days[0].childNodes[i]
if (node.nodeName == 'day') {
var john_tag = node.getElementsByTagName('john');
var fred_tag = node.getElementsByTagName('fred');
var lucy_tag = node.getElementsByTagName('lucy');
john.push(Number(john_tag[0].childNodes[0].nodeValue));
fred.push(Number(fred_tag[0].childNodes[0].nodeValue));
lucy.push(Number(lucy_tag[0].childNodes[0].nodeValue));
}
}
/**
* Now we have the information, use it to create and show the chart
*/
var myLine = new OfficeExcel.Line('cvs', john, fred, lucy);
myLine.Set('chart.title', 'A chart of Johns, Freds and Lucys weekly statistics');
myLine.Set('chart.linewidth', 2);
myLine.Set('chart.hmargin', 5);
myLine.Set('chart.tickmarks', 'endcircle');
myLine.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
myLine.Set('chart.key', ['John', 'Fred', 'Lucy']);
myLine.Draw();
}
}
&lt;/script&gt;
</pre>
</body>
</html>

314
OfficeWeb/sdk/Common/Charts/docs/zoom.html
View file

@ -1,314 +0,0 @@
<!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>The zoom feature of OfficeExcel</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs zoom" />
<meta name="description" content="Documentation about using the OfficeExcel zoom effect with your charts" />
<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.jpg"/>
<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>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<style>
.OfficeExcel_zoom_window {
border: 2px solid #ccc ! important;
box-shadow: 0 0 15px #aaa ! important;;
-moz-box-shadow: 0 0 15px #aaa ! important;
-webkit-box-shadow: 0 0 15px #aaa ! important;
}
</style>
<?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>
>
Zooming your charts
</div>
<h1>Zooming <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>
<ul>
<li><a href="#canvas">Canvas mode</a></li>
<li><a href="#thumbnail">Thumbnail mode</a></li>
<li><a href="#area">Area mode</a></li>
</ul>
<a name="canvas"></a>
<h2>Canvas mode</h2>
<table border="0" width="100%">
<tr>
<td>
<p>
As of November 2009 OfficeExcel has had the ability to provide a zoom facility. It's designed to be used in
conjunction with a context menu as in the example to the right.
</p>
<p>
You can control the zoom using these properties:
</p>
<ul>
<li>chart.zoom.mode<i>Default: canvas</i></li>
<li>chart.zoom.factor<i>Default: 1.5</i></li>
<li>chart.zoom.fade.in <i>Default: true</i></li>
<li>chart.zoom.fade.out <i>Default: true</i></li>
<li>chart.zoom.hdir <i>Default: right</i></li>
<li>chart.zoom.vdir <i>Default: down</i></li>
<li>chart.zoom.delay <i>Default: 50</i></li>
<li>chart.zoom.frames <i>Default: 10</i></li>
<li>chart.zoom.shadow <i>Default: true</i></li>
<li>chart.zoom.mode <i>Default: canvas</i></li>
<li>chart.zoom.thumbnail.width <i>Default: 75</i></li>
<li>chart.zoom.thumbnail.height <i>Default: 75</i></li>
<li>chart.zoom.background <i>Default: true</i></li>
</ul>
</td>
<td style="text-align: center">
<canvas width="600" height="250" id="myc">[No canvas support]</canvas>
</td>
</tr>
<tr>
<td colspan="2">
The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>.
The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i>
is the delay in between frames (in milliseconds) and <i>chart.zoom.frames</i> is the number of frames in the zoom. <i>chart.zoom.shadow</i>
is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default)
and <i>thumbnail</i>.
</td>
</tr>
</table>
<script>
window.onload = function ()
{
var graph = new OfficeExcel.Bar('myc', [[4,6],[6, 8],[8,6],[7,5],[9,4],[4,7],[3,5],[8,6],[7,6],[4,7],[5,4],[5,6],[6,4]]);
graph.Set('chart.colors', ['#f66', '#66f']);
graph.Set('chart.strokecolor', 'rgba(0,0,0,0)');
graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
if (!OfficeExcel.isOld()) {
graph.Set('chart.contextmenu', [
['Clear annotations', function () {OfficeExcel.Clear(graph.canvas); graph.Draw();}],
['Zoom in', OfficeExcel.Zoom]
]);
graph.Set('chart.annotatable', true);
graph.Set('chart.zoom.hdir', 'left');
graph.Set('chart.zoom.factor', 1.5);
graph.Set('chart.zoom.vdir', 'center');
graph.Set('chart.zoom.frames', 50); // Number of frames
graph.Set('chart.zoom.delay', 5); // Delay between each frame
graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)'); // Show a shadow on the zoomed chart
graph.Set('chart.zoom.background', true);
}
graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
graph.Set('chart.shadow', true);
graph.Set('chart.shadow.color', '#999');
graph.Draw();
var myLine = new OfficeExcel.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myLine.Set('chart.hmargin', 10);
myLine.Set('chart.linewidth', 3);
myLine.Set('chart.title', 'A sample line chart');
myLine.Set('chart.colors', ['red', 'black']);
myLine.Set('chart.shadow', true);
if (!OfficeExcel.isOld()) {
myLine.Set('chart.contextmenu', [['Zoom entire chart', OfficeExcel.Zoom]]);
myLine.Set('chart.zoom.delay', 15);
myLine.Set('chart.zoom.factor', 1.5);
myLine.Set('chart.zoom.mode', 'thumbnail');
myLine.Set('chart.zoom.vdir', 'center');
myLine.Set('chart.zoom.thumbnail.width', 100);
myLine.Set('chart.zoom.thumbnail.height', 100);
}
myLine.Draw();
myLine2 = new OfficeExcel.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
myLine2.Set('chart.background.grid.width', 0.5);
myLine2.Set('chart.shadow.offsetx', 1);
myLine2.Set('chart.shadow.offsety', 1);
myLine2.Set('chart.shadow.blur', 2);
myLine2.Set('chart.shadow', true);
if (!OfficeExcel.isOld()) {
myLine2.Set('chart.zoom.mode', 'area');
}
myLine2.Set('chart.hmargin', 10);
myLine2.Set('chart.linewidth', 2);
myLine2.Set('chart.title', 'A chart with zoom in area mode');
myLine2.Set('chart.tickmarks', 'endcircle');
myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myLine2.Draw();
}
</script>
<br clear="all" />
<pre class="code">
&lt;script&gt;
var graph = new OfficeExcel.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
graph.Set('chart.contextmenu', [
['Clear annotations', function () {OfficeExcel.Clear(graph.canvas); graph.Draw();}],
['Zoom in', OfficeExcel.Zoom]
]);
graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
graph.Set('chart.shadow', true);
graph.Set('chart.annotatable', true);
graph.Draw();
&lt;/script&gt;
</pre>
<a name="thumbnail"></a>
<h2>Thumbnail mode</h2>
<canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
<p>
The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas.
The chart to the left shows an example of this.
</p>
<p>
It uses some of the same properties as the regular zoom, eg <i>chart.fade.in</i>, <i>chart.fade.out</i>, <i>chart.zoom.shadow</i>
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
var myLine = new OfficeExcel.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myLine.Set('chart.hmargin', 10);
myLine.Set('chart.linewidth', 3);
myLine.Set('chart.title', 'A sample line chart');
myLine.Set('chart.zoom.mode', 'thumbnail');
myLine.Set('chart.zoom.vdir', 'center');
myLine.Set('chart.zoom.thumbnail.width', 100);
myLine.Set('chart.zoom.thumbnail.height', 100);
myLine.Set('chart.colors', ['red', 'black']);
myLine.Set('chart.shadow', true);
myLine.Set('chart.contextmenu', [['Zoom entire chart', OfficeExcel.Zoom]]);
&lt;/script&gt;
</pre>
<p>
<b>Making the zoom circular</b><br /><br />
<img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" />
It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> CSS property. Currently support for
this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main OfficeExcel software. The CSS ncessary to achieve this is
thus:
</p>
<pre class="code" style="width: 700px" />
&lt;style&gt;
.OfficeExcel_zoom_window {
border-radius: 50px ! important;
}
&lt;/style&gt;
</pre>
This a chart demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
<br clear="all" />
<a name="area"></a>
<h2>Area mode</h2>
<canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>
<p>
Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around
the specific area that you want to zoom.
</p>
<p>
Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
</p>
<p>
Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around
within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the
whole canvas.
</p>
<br clear="all" />
<pre class="code">
&lt;script&gt;
var myLine = new OfficeExcel.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
myLine.Set('chart.zoom.mode', 'area');
myLine.Set('chart.hmargin', 10);
myLine.Set('chart.linewidth', 1);
myLine.Set('chart.title', 'A chart with zoom in area mode');
myLine.Set('chart.tickmarks', 'endcircle');
myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myLine.Draw();
&lt;script&gt;
</pre>
</body>
</html>

113
OfficeWeb/sdk/Common/Charts/docs/zoom_thumbnail.html
View file

@ -1,113 +0,0 @@
<!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 making the thumbnail zoom circular</title>
<meta name="keywords" content="OfficeExcel html5 canvas chart docs circular zoom" />
<meta name="description" content="Documentation about making the thumbnail zoom circular" />
<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.zoom.js" ></script>
<script src="../libraries/OfficeExcel.line.js" ></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<style>
.OfficeExcel_zoom_window {
box-shadow: 0 0 15px black ! important;
-webkit-box-shadow: 0 0 15px black ! important;
-moz-box-shadow: 0 0 15px black ! important;
border-radius: 50px ! important;
}
</style>
<?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 circular thumbnail demonstration
</div>
<h1>A circular <span>thumbnail demonstration</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="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
<script>
var line = new OfficeExcel.Line('cvs', [5,3,4,6,5,1,3,4,5,5], [4,8,6,7,4,3,5,1,2,3]);
line.Set('chart.colors', ['red', 'black']);
line.Set('chart.hmargin', 5);
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.Set('chart.shadow.color', ['red','black']);
line.Set('chart.labels', ['Hoolio','Gina','Jo','Olga','Kev','John','Lou','Pete','June','Fred']);
line.Set('chart.zoom.mode', 'thumbnail');
line.Set('chart.zoom.thumbnail.width', 100);
line.Set('chart.zoom.thumbnail.height', 100);
line.Draw();
</script>
<p>
This is a demonstration of the zoom in thumbnail mode with some custom CSS (the <i>border-radius</i> property) which facilitates
making the thumbnail circular.
</p>
<p>
Remember that browser support for this is limited - currently (5th September 2011) only Firefox 4+ and IE9+ support it.
</p>
<p>
<a href="zoom.html#thumbnail">&laquo;Back to zoom documentation</a>
</p>
</body>
</html>

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

Some files were not shown because too many files have changed in this diff Show more