Content - f3d36abe85fd0da7ff58467b0200bad873553125 - b9e46b9/example-hydrograph.html

visit type:

https://github.com/mroberge/HydroCloud

05 April 2024, 19:28:05 UTC

Tip revision: 4d2f3243b15298d0bffb66db430a02982a638ab4 authored by Martin Roberge on 09 April 2018, 02:46:03 UTC
Merge pull request #123 from mroberge/Feedback

Tip revision: 4d2f324

example-hydrograph.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Graph</title>


    <script src="https://mroberge.github.io/HydroCloud/lib/d3/d3.min.js"></script>
    <script src="https://mroberge.github.io/HydroCloud/src/graph-scatterChart.js"></script>
    <style>
        /*These are for styling the graph.*/

        svg {
            font: 10px sans-serif;
        }

        .Title {
            font: 20px serif;
        }

        path {
            fill: none;
            stroke-width: 2px;
        }

        .axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

    </style>
</head>
<body>
<div id="graph_div"></div>
<script>
    var graphDiv = d3.select("#graph_div");
    var myChart = scatterChart();

    //each timeseries is an array of elements.
    //each element is an array with a Date object and a value.
    //each dataset is an array of timeseries.
    var timeseries1 = [   [new Date(2017, 1, 1),5],
                          [new Date(2017, 1, 2),9],
                          [new Date(2017, 1, 3),3],
                          [new Date(2017, 1, 4),5],
                          [new Date(2017, 1, 5),5]    ];

    var timeseries2 = [   [new Date(2017, 1, 1),12],
                          [new Date(2017, 1, 2),23],
                          [new Date(2017, 1, 3),7],
                          [new Date(2017, 1, 4),11],
                          [new Date(2017, 1, 5),15]    ];
    myData = [timeseries1, timeseries2];
    graphDiv.datum(myData).call(myChart);
</script>
</body>
</html>