| Developer track |
|
|
|
Chart & Graph demo
|
|
The chart & graph demonstration program shows how SVG manages and displays data, generating SVG code from data on the fly. The demo integrates related technologies, such as ECMA/JavaScript, HTML, and the Document Object Model (DOM).
There are three separate sections to this application: the bar chart, the pie chart, and the graph. In each section, a user enters two-component data: for a chart, a label and a value; for plotting in a line graph, an x and y (horizontal and vertical) value pair. As the user enters adds data points, SVG elements are generated and added to the SVG document. The bar chart and pie chart share the same data points.
|
|
 |
|
| Although this kind of application can be written in a variety of different ways, SVG provides completely client-side processing to maintain and display the data, reducing the load on server and overall latency. Having the data on the client side often reduces asset management hassles, because there's less data to create and less to manage. (The data could still be linked to a server-side database. See the Adobe Theater demo for a demonstration that uses an active database.) Since the rendering is done with SVG, you get all the benefits of SVG, such as high-resolution panning, zooming, and printing. |
|
| Navigating Between the Applications |
| Although there are three visuals, the Chart & Graph consists of only two, not three, separate applications. You can start the demo from either of two HTML files: chart.html (which embeds chart.svg to display both the bar chart and pie chart) or graph.html (which embeds graph.svg to display only the line graph). |
|
| Clicking on the rounded rectangles along the left side (labelled "Graph", "Pie Chart", and "Bar Chart") navigates among the displays. The navigation buttons use XLink (the XML Linking Language) to connect the two HTML files. These rounded navigation buttons and the background are SVG objects, not bitmaps, and were created using Adobe Illustrator. |
|
 |
|
| SVG and the Document Object Model (DOM) |
| Since SVG adheres to the Document Object Model (DOM) recommendation, the DOM API is available to the developer. The DOM API is based on an object structure that closely resembles the structure of the documents it models. With the DOM API, SVG developers can build documents, navigate their structure, and add, modify, or delete elements and content. |
|
|
The data is entirely on the client side. The data is maintained in a JavaScript array, and the JavaScript generates the SVG. For example, in the source file chart.svg, the declaration of the <svg> element specifies that upon loading, the JavaScript function Initialize() is called:
|
|
|
<svg onload="Initialize(evt)" width="625" height="392.5" viewBox="0 0 625 392.5" xml:space="preserve">
|
|
|
Initialize() retrieves several named SVG elements: slices, piechart, bars,and barchart, as well as a document object (SVGDocument) that represents the HTML page. getElementById() is specified in the DOM interface.
|
|
| function Initialize(LoadEvent) |
{
SVGDocument = LoadEvent.getTarget().getOwnerDocument()
ParentGroup1 = SVGDocument.getElementById("slices")
Grandparent1 = SVGDocument.getElementById("piechart")
ParentGroup2 = SVGDocument.getElementById("bars")
Grandparent2 = SVGDocument.getElementById("barchart")
}
|
|
| Generating SVG Elements for Data Points |
| Elsewhere in the SVG code, these named elements (slices, piechart, bars, barchart) are defined and are initially unpopulated by data points. slices is nested within piechart, so it shares the attributes defined for piechart, including the translation towards the center of the window and the filter effect that defines a blurred, offset, drop shadow. (bars and barchart are similar elements.) The drop shadow is a general technique (it works for text, lines, and filled polygons) and once it's defined, it's easily reusable. |
|
<g id="barchart" transform="translate(190, 270)" style="visibility:hidden">
<path d="M0,0H-5 0V-150 h -5 10 -5 V 0H250 0" style="fill:none;stroke:black;filter:url(#DropShadowFilter)"/>
<g id="bars" style="filter:url(#DropShadowFilter)">
</g>
<g id="labels" transform="translate(12, 12)">
</g>
</g>
<g style="filter:url(#DropShadowFilter)">
<g id="piechart" transform="translate(300, 230) scale(1, .5)" style="">
<g id="slices">
</g>
</g>
</g>
|
|
| As the user enters data, the function AddChartValue() adds one data point at a time. AddChartValue() uses several methods in the DOM API (createElement(), setAttribute(), and appendChild()) to access the SVG document and create new elements for both the pie and bar charts. The new elements also include event handling, for when the mouse is moved over or moved out of a chart segment. |
|
| AddChartValue() ultimately invokes Refresh(), which recalculates the path data and rerenders the pie wedges or bar segments. |
|
| Return to demo |
|
|
