ElevationChart++: A Google Chart Visualization

ElevationChart++ Source Code


This chart visualization was designed to add some advanced features to the simple elevation chart for Google Maps applications. The chart plots data in column format and displays the exact elevation and distance along the route when the mouse is over the chart. The chart also provides a variables to add behavior when the chart is clicked or when the mouse is over the chart. The standard methods of Google Charts are supported: getSelection(), setSelection(), and draw(). In addition I have added a method, clear() to erase the chart. It should be used if the chart data changes.

I designed this chart with the Google Maps Elevation api in mind. It works well as an elevation chart. It could be used for other purposes however. Currently the chart only supports one x and y variable. The chart assumes that the x variables occur at regular intervals. If your data is irregular a more traditional x,y chart should be used.

The above map and graph shows the basic and more advanced features of ElevationChart++.

Loading Visualization

Loading the visualization is simple:

  1. Create a div to house the chart.
  2. Create a new ecpp.areaLine object with the above div as the only argument.
  3. Draw your chart by calling the draw method and providing the data.

That’s all it takes! Additional features may be enabled during the draw method. See the full documentation below.


Property Type Description
height number Optional Height of the visualization. Defaults to the height of the parent container.
width number Optional Width of the visualization. Defaults to the width of the parent container.
xTitle string Optional Title of X (horizontal) axis.
xUnits string Optional Units of the x axis to be used in the x axis title.
yTitle string Optional Title of Y (vertical) axis.
yUnits string Optional Units of the y axis to be used in the y axis title.
chartColor string Color of chart area. Must be a valid HTML color (i.e. ‘orange’ or #FFA500).
selectionColor string Optional Color of selection. Must be a valid HTML color (i.e. ‘orange’ or #FFA500).
mouseClick function Optional Function to run when the graph is clicked. The default function is null.
mouseOver function Optional Function to run when when the mouse is over the graph. A mouseOut function should be provided with the mouseOver function. The default function selects the column that the mouse is over and displays it’s data below the graph.


Method Return Value Description
draw(data, options) None Draws the chart using the provided data and options.
setSelection(col) Object Sets the selection on the chart. This method accepts an index of the column or the DIV node of the column.
getSelection() Object Returns the selected column DIV. Specific values for the column can be found in the .x and .y properties of the return value.
clear() None Removes the visualization but leaves the variable initialized and the space used by the visualization intact.

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.

Leave a Reply

Your email address will not be published. Required fields are marked *