Skip to content

Add a hydrograph to your website

Martin Roberge edited this page Jun 12, 2017 · 5 revisions

It's easy to add the same interactive stream hydrographs used in HydroCloud in your own website. The graphs all use javascript and the D3 library.

How to use:

  1. Include d3 and this file in the header.
<script src="lib/d3/d3.min.js"></script>
<script src="src/graph-scatterChart.js"></script>
  1. Create a <div> element in your html to place the chart inside. You can set its size here, or programmatically.
<div id="graphDiv"></div>
  1. In a script, select the div and assign a reference to it.
var graphDiv = d3.select("#graph_div");
  1. Create an instance of the scatterChart
var myChart = scatterChart();
  1. Create your dataset. It should be an array of timeseries. Each timeseries should be an array of measurements. Each measurement should be an array with a Date object and the stream discharge.
var time = new Date(2017, 0, 1);
var discharge = 45.1;
var meas = [time, discharge];
var timeseries = [meas, meas, meas, meas];
var dataset = [timeseries, timeseries];
var myData = [[[time, 45], [time.setDate(time.getDate()+1, 32], [time.setDate(time.getDate()+2, 87], [time.setDate(time.getDate()+3, 95]]];
  1. Assign some data to your div using the datum method if you plan to have a static graph.
graphDiv.datum(myData);
  1. Call the graph function on the div. It will return a chart object that you can modify later on.
graphDiv.call(myChart);

Take a look at example-hydrograph.html for a working copy!

You can’t perform that action at this time.