|
Ease of implementation was an important factor considered in the development of EJSChart. The process from purchase to user “wow” takes just a matter of minutes and can be completed following the few easy to follow steps detailed below. Designed for all users, no previous JavaScript knowledge is required to implement EJSChart or take advantage of its many features. The steps below will guide you through the installation and testing of the EJSChart library.
| 1. | Create a new directory in the home directory of your webpage and name it EJSChart. |
| 2. | Copy the contents (all files and directories) of the /dist/ folder provided in your EJSChart download package into your newly created EJSChart folder on your web server. |
| 3. | Open the webpage that you wish to place an example chart on. If you do not currently have one or wish to use a test page for this purpose one has been provided for you in the How To directory included with your download. This file is named mydemochart.html and can be edited in your preferred html editor or even notepad. |
| 4. | Copy <script type="text/javascript" src="/EJSChart/EJSChart.js"></script> into the head section of your webpage. *This path can be modified as necessary to correctly point to EJSChart.js. |
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Demo Chart</title>
<meta name="Author" content="Emprise Corporation">
<meta name="Description" content="EJSChart Demo Chart HTML Page">
<script type="text/javascript" src="/EJSChart/EJSChart.js"></script>
</head>
<body>
<p>This is a sample page that is used to copy and paste a demo chart into.</p>
</body>
</html>
|
| 5. | Create a div on your page where you would like the chart to be displayed. The size of the chart can be specified within the div properties if desired. The div is created by pasting <div id="myChart" style="width:450px; height:330px;"></div> where desired in the body of your webpage. The style width and height properties can be adjusted as desired. |
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Demo Chart</title>
<meta name="Author" content="Emprise Corporation">
<meta name="Description" content="EJSChart Demo Chart HTML Page">
<script type="text/javascript" src="/EJSChart/EJSChart.js"> </script>
</head>
<body>
<p>This is a sample page that is used to copy and paste a demo chart into.</p>
<div id="myChart" style="width:450px; height:330px;"></div>
</body>
</html>
|
| 6. | To turn the div into a chart paste the following sample code at the end of your webpage. |
<script type="text/javascript">
var chart = new EJSC.Chart("myChart");
chart.addSeries(new EJSC.AreaSeries(
new EJSC.ArrayDataHandler([[1,1],[2,2],[3,3],[4,2],[5,3]]))
);
</script>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Demo Chart</title>
<meta name="Author" content="Emprise Corporation">
<meta name="Description" content="EJSChart Demo Chart HTML Page">
<script type="text/javascript" src="/EJSChart/EJSChart.js"> </script>
</head>
<body>
<p>This is a sample page that is used to copy and paste a demo chart into.</p>
<div id="myChart" style="width:450px; height:330px;"></div>
<script type="text/javascript">
var chart = new EJSC.Chart("myChart");
chart.addSeries(new EJSC.AreaSeries(
new EJSC.ArrayDataHandler([[1,1],[2,2],[3,3],[4,2],[5,3]]))
);
</script>
</body>
</html>
|
| 7. | Upload your edited webpage to your web server. Visit your webpage and view the demo chart located on the page where the div was placed. |
|