|
Now that you have created and tested your first demonstration chart on your web server it is time to create your own chart. This demonstration will guide you through creating your first chart and introduce you to some of the many available features and methods of customization available to you in Emprise JavaScript Charts. If you have not yet completed the Implementation Instructions it is recommended that you do so before continuing with this section as they guide you through uploading the necessary files to your web server.
| 1. | Open the webpage that you wish to place your first custom 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 myfirstchart.html and can be edited in your preferred html editor or even notepad. |
| 2. | 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="Emprise JavaScript Charts :: Customization Example">
<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>
|
| 3. | Create a div on your page where you would like the chart to be displayed by pasting <div id="myFirstChart" style=”width:600px; height:400px;"></div> where desired in the body of your webpage. |
<!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="Emprise JavaScript Charts :: Customization Example">
<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="myFirstChart" style="width:600px; height:400px;"></div>
</body>
</html>
|
| 4. | The next step is to create the chart object. This is done at the end of your html file, directly before the closing body tag; </body>. To begin define the text as JavaScript with <script type="text/javascript"> and create a chart object on the next line using var chart = new EJSC.Chart("myFirstChart"); Be sure that the div id as identified within the body of your webpage matches the title you place within the parenthesis when creating your chart. In this example it is ‘myFirstChart’. Failure to create the appropriate div’s for the chart to be placed in will result in errors and prevent your chart from being displayed. |
The properties of your chart including its visual appearance and interactivity are highly customizable by adjusting its properties. Instructions on how to accomplish this can be found on the Customizing Your Chart page of this guide.
In this example code the chart has been customized to remove the legend and set a custom title by adding:
<script type="text/javascript">
var chart = new EJSC.Chart(
"myFirstChart",
{
show_legend: false,
title: "My First Custom Chart"
}
);
<!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="Emprise JavaScript Charts :: Customization Example">
<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="myFirstChart" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var chart = new EJSC.Chart(
"myFirstChart",
{
show_legend: false,
title: "My First Custom Chart"
}
);
</body>
</html>
|
| 5. | Now that the chart has been created the series must be created. The series defines how your data will be displayed in the chart you are creating. The types of series that are available may vary by license; more details on this can be found on the LICENSE.txt file. |
When creating the chart you can also choose which format you will be providing the data in. This is accomplished with the use of different Data Handlers. The formats currently supported by EJSChart are XML file, JavaScript Array, CSV file, and CSV string data. Details on the implementation of each of these data handlers as well as sample code can be found on their respective pages in the Developer Guide help file.
The properties of your series, including its visual appearance and interactivity, are customized by adjusting its properties. Instructions on how to accomplish this can be found on the Customizing Your Chart page.
In this example code a bar chart was created using the Bar Series, the color was set to green, and the bar border width was set to five pixels. The data to be graphed was specified using the EJSC.ArrayDataHandler. To accomplish this the following code was added:
var myChartSeries = new EJSC.BarSeries(
new EJSC.ArrayDataHandler(
[
["Month 1",1],
["Month 2",2],
["Month 3",3],
["Month 4",4],
["Month 5",5]
]
)
);
myChartSeries.color = 'rgb(50,210,50)';
myChartSeries.lineWidth = 5;
<!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="Emprise JavaScript Charts :: Customization Example">
<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="myFirstChart" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var chart = new EJSC.Chart(
"myFirstChart",
{
show_legend: false,
title: "My First Custom Chart"
}
);
var myChartSeries = new EJSC.BarSeries(
new EJSC.ArrayDataHandler(
[
["Month 1",1],
["Month 2",2],
["Month 3",3],
["Month 4",4],
["Month 5",5]
]
)
);
myChartSeries.color = 'rgb(50,210,50)';
myChartSeries.lineWidth = 5;
</body>
</html>
|
| 6. | Once created the series must then be added to the chart using the addSeries method in the chart class. |
<!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="Emprise JavaScript Charts :: Customization Example">
<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="myFirstChart" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var chart = new EJSC.Chart(
"myFirstChart",
{
show_legend: false,
title: "My First Custom Chart"
}
);
var myChartSeries = new EJSC.BarSeries(
new EJSC.ArrayDataHandler(
[
["Month 1",1],
["Month 2",2],
["Month 3",3],
["Month 4",4],
["Month 5",5]
]
)
);
myChartSeries.color = 'rgb(50,210,50)';
myChartSeries.lineWidth = 5;
chart.addSeries(myChartSeries);
</body>
</html>
|
| 7. | Close the JavaScript by inserting </script> at the end. |
<!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="Emprise JavaScript Charts :: Customization Example">
<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="myFirstChart" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var chart = new EJSC.Chart(
"myFirstChart",
{
show_legend: false,
title: "My First Custom Chart"
}
);
var myChartSeries = new EJSC.BarSeries(
new EJSC.ArrayDataHandler(
[
["Month 1",1],
["Month 2",2],
["Month 3",3],
["Month 4",4],
["Month 5",5]
]
)
);
myChartSeries.color = 'rgb(50,210,50)';
myChartSeries.lineWidth = 5;
chart.addSeries(myChartSeries);
</script>
</body>
</html>
|
| 8. | That’s it! Upload the webpage to your web server and you’re done. |
|