C3 Elevation Profile

Example of how to do an elevation profile in C3. The data is extrapolated from the response to a request to an ArcGIS Server elevation profile service.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<div id="chart"></div>
<a href="http://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer/Profile/execute?InputLineFeatures=%7B%22geometryType%22%3A%22esriGeometryPolyline%22%2C%22features%22%3A%5B%7B%22geometry%22%3A%7B%22paths%22%3A%5B%5B%5B-116.81556701660156%2C36.240258161271235%5D%2C%5B-116.7659568786621%2C36.240950421445%5D%2C%5B-116.74776077270509%2C36.2444116303526%5D%2C%5B-116.73368453979491%2C36.2408119699007%5D%5D%5D%2C%22spatialReference%22%3A%7B%22wkid%22%3A4326%7D%7D%7D%5D%7D&ProfileIDField=OID&DEMResolution=FINEST&MaximumSampleDistance=50000&MaximumSampleDistanceUnits=&env%3AoutSR=&env%3AprocessSR=&returnZ=true&returnM=true&f=json" target="_blank">Data source (ArcGIS server elevation profile service)</a>

JavaScript

// this sets the base for the area fill below the level of the data
// see https://github.com/masayuki0812/c3/issues/829
c3.chart.internal.fn.getAreaBaseValue = function (x) {
  console.log(x);
  if (x == 'Sea Level')
  	return 0;
  return -5; // lowest elevation
};
var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 0, 4481, 6154, 7466],
            ['Elevation', -84, 29, 1052, 1432],
            ['Sea Level', 0, 0, 0, 0]
        ],
        types: {
            'Sea Level': 'area',
            'Elevation': 'area-spline'
        }
    },
    axis: {
        x: {
            tick: {
                values: [0, 4481, 6154, 7466]
            }
        }
    },
    color: {
      pattern: ['#F08C00', '#1f77b4']
    }
});