tdgchart

Getting Started

These steps define the information you need to include in your HTML file to draw a chart using tdgchart.

1. Define the tdgchart.js file in the script tag.

   <script type="text/javascript" src="tdgchart.js"></script>;
   

2. Define the target location in your web page to draw the chart. Example:

   <div class='chart' id='chart1'></div>;
   

3. Create the chart in a script type tag.

   <script type="text/javascript">
   var chart = new tdgchart();
   

4. Draw the chart.

   chart.draw('chart1');
   </script>
   

A single parameter may be supplied with the tdgchart() function to specify properties that define the appearance of a chart. Example:

var props = {
	data: [[1,3,5,3,1],[2,4,6,4,2],[5,3,1,3,5],[6,4,2,4,6]],
	chartType: 'line',
	border: {width: 2, color: 'grey'},
	title: {text: 'tdgchart', font: 'bold 12pt Sans-Serif', color:'rgb(0,101,163)'},
	chartFrame: {border: {width: 1, color: 'cyan'}, fill: {color: 'hsla(140, 100%, 50%, 0.1)'}},
	blaProperties: {orientation: 'vertical',lineConnection: 'curved'},
	dataLabels: {visible: false},
	series: [
		{series: 0, color:'rgb(0,142,126)', marker: {visible: true}},
		{series: 1, color:'rgb(152,181,211)', marker: {visible: true}},
		{series: 2, color:'rgb(0,101,163)', marker: {visible: true}},
		{series: 3, color:'rgb(173,204,189)', marker: {visible: true}}
	]
};
var chart = new tdgchart(props);
chart.draw('chart2');

Notes

• Different chart types may require more than one value to draw each riser or marker (see the chartType property for details). The default properties file (e.g., properties.js) includes an example data set that will draw a bar, line, or area chart.
• If properties are not specified, property settings from a default properties file (e.g., properties.js) will be used. Your tdgchart package may include multiple default properties files for different chart types.
• The backend and allowBackendFallback properties can be used to choose a rendering technology (Java Script or Flash). These properties MUST be passed to the tdgchart() constructor.
• After the tdgchart() constructor, additional properties can be set using dot notation (e.g., chart.title.text = 'A New Chart Title';).
• The chart instance is retrievable from the target DOM node. This allows you to retrieve the generated chart instance out of the HTML DOM node that was created to contain the chart. This makes it possible to access the chart anywhere, even if it was created by an entirely separate process. You can use this chart as any other chart (i.e., change properties, add event handlers, redraw the chart, etc.). After a chart.draw(), getElementById() provides direct access to the chart instance. Example:

  <div id = 'myChartDiv'>
  
  var chart = new tdgchart();
  chart.draw('myChartDiv');
  
  var div = document.getElementById('myChartDiv'); Standard javascript
  var chart = div.chart;

  These three blocks of code (creating the div, creating the chart, pulling the chart out of the div) would typically reside in different parts of an application.

  tdgchart dynamically adds a chart property to the standard div element in the HTML page that was retrieved by getElementById(). This allows you to set tdgchart properties and call tdgchart methods using div.chart. Examples:

  div.chart.title.text = 'New Title Text';
  div.chart.redraw();

  The last line of the code segment (var chart = div.chart) just creates a convenience variable that stores 'chart' directly and allows you to set tdgchart properties and call tdgchart methods using chart. Examples:

  var chart = div.chart;  
  chart.title.text = 'New Title Text';
  chart.redraw();