VML: Line Graph

Description

I had trouble deciding where to put this on the site. It's a behavior that draws a line graph via VML. Ultimately, I decided it was a better demonstration of VML than behaviors.

Now, like most examples on this site, this example isn't quite finished. In particular, the drawing of the graph's legend is still abit off. Still, the graph doesn't look too bad. Since it's a behavior, the actual graphing code is hidden from the host page and the dataset to draw the graph is passed in as XML parameters to the graphing behaviors element.

Example

6/10/2002 6/11/2002 6/12/2002 6/1/2003 6/2/2003 6/3/2003

Code

Now the actual code to produce the graphs is abit complex so I'm just going to provide a link to the behavior that you can open up in Notepad to view.

Below is just the custom graph element and the configuration that's embedded on this page.


		<g:graph style="width: 400px; height: 300px;">

		<configuration>

			<param name="maxValue" value="30"/>

			<param name="minValue" value="0" />

			<param name="majorTick" value="100"/>

			<labels>

				<label>6/10/2002

				<label>6/11/2002

				<label>6/12/2002

				<label>6/1/2003

				<label>6/2/2003

				<label>6/3/2003

			</labels>

			<sets>

				<set color="gray" name="Series 1">

					<datapoints>

						<datapoint value="250.23"/>

						<datapoint value="120.57"/>

						<datapoint value="456.00"/>

						<datapoint value="900.00"/>

						<datapoint value="250.23"/>

						<datapoint value="250.23"/>

					</datapoints>

				</set>

				<set color="red" name="Series 2">

					<datapoints>

						<datapoint value="356.23"/>

						<datapoint value="250.23"/>

						<datapoint value="625.00"/>

						<datapoint value="120.57"/>

						<datapoint value="456.23"/>

						<datapoint value="900.00"/>

					</datapoints>

				</set>

				<set color="blue" name="Series 3">

					<datapoints>

						<datapoint value="185"/>

						<datapoint value="365"/>

						<datapoint value="845"/>

						<datapoint value="1000"/>

						<datapoint value="685.23"/>

						<datapoint value="265.00"/>

					</datapoints>

				</set>

			</sets>

		</configuration>

	</g:graph>