218 lines
9.6 KiB
HTML
218 lines
9.6 KiB
HTML
<!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">
|
|
<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>
|
|
</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> |