JSFiddle - React, Tailwind, and code Playground

texas dygraph

by Scott

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://txpub.usgs.gov/DSS/GWIS/0.0/jsapi/gwis-plot-utils.css">
<script src="       https://txpub.usgs.gov/DSS/GWIS/0.0/jsapi/gwis-plot-utils.min.js"></script>
       <h1>Sample: Plotting Multiple Data Series</h1>
        
        <!-- create plot in document div -->
        <h2>Daily Minimum, Mean, and Maximum Streamflow at a Site:</h2>
<!--        <div id="plot1" style="width:95%; height:500px;"></div>-->
        
        <h2>Daily Minimum, Mean, and Maximum Streamflow at a Site:</h2>
        <div id="plot2" style="width:95%; height:500px;"></div>
        
        <h2>Simple Dygraph</h2>
        <div id="graphdiv"></div>

JavaScript

GWIS.plot({
                div_id      : "plot1",  // plot div
                iv_or_dv    : "dv",     // daily values
                period      : "p1000d", // past 1000 days
                date_window : 25,       // startup showing last 25% of requested period
                y_logscale  : true,     // startup using log y-axis
                series : [              // add multiple data lines, in this order:
                    { site:"08158000", pcode:"00060", dv_stat:"00001", label:"Daily Maximum", stroke_width:2, stroke_pattern:[7,3], color: "#900" }, // daily maximum streamflow
                    { site:"08158000", pcode:"00060", dv_stat:"00003", label:"Daily Mean",    stroke_width:4, stroke_pattern:[],    color: "#58c" }, // daily mean    streamflow
                    { site:"08158000", pcode:"00060", dv_stat:"00002", label:"Daily Minimum", stroke_width:2, stroke_pattern:[7,3], color: "#900" }  // daily minimum streamflow
                ],
                title    : "Colorado River at Austin, TX",      // plot title
                ylabel   : "Streamflow, in ft<sup>3</sup>/sec", // y-axis label
                controls : [       // add  these controls below plot, in this order:
                    "full_screen", //   (button)   toggles full screen mode for enlarging plot
                    "full_range",  //   (button)   zooms plot to full timespan
                    "y_logscale",  //   (checkbox) toggles y-scale logscale
                    "y_fixscale"   //   (checkbox) toggles whether the y-scale is fixed to the full y-range
                ]
            });
 
             var plot = GWIS.plot({
				//valueRange : valueRange,
                div_id      : "plot2",  // plot div
                iv_or_dv    : "dv",     // daily values
                period      : "p1000d", // past 1000 days
                date_window : 25,       // startup showing last 25% of requested period
                y_logscale  : true,     // startup using log y-axis
    ...