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 the visualization is simple:
- Create a div to house the chart.
- Create a new ecpp.areaLine object with the above div as the only argument.
- 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.
|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.|
|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.|
All code and data are processed and rendered in the browser. No data is sent to any server.