examples/LineChartExample.html

<!DOCTYPE html>
<html>

  <head>
    <title>d3-ez : Line Chart (Multi Series) Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="../dist/d3-ez.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/d3-ez.css"/>
  </head>

  <body>
    <div id="chartholder"></div>
    <br/>
    <div>Value: <span id="message"></span></div>

    <script type="text/javascript">
      d3.csv("data/exchange_rates.csv").then(function(csv) {
        // Historical Exchange Rates Source: https://www.ofx.com/en-gb/forex-news/historical-exchange-rates/

        // Create chart base
        var colors = ["#CC0000", "#3366CC", "#FF9900", "#FFCC00", "#03CC14", "#FF18C0"];
        var chart = d3.ez.chart.lineChart()
          .width(1000)
          .height(600)
          .colors(colors)
          .title("Historical Exchange Rates")
          .subTitle("Comparison against GBP")
          .showLegend(true)
          .yAxisLabel("Rate")
          .on("customValueMouseOver", function(e, d) {
            d3.select("#message").text(d.value);
          })
          .on("customSeriesClick", function(e, d) {
            console.log(d);
          });

        // Function to convert date to Unix timestamp
        var dateConvert = function(dateYMD) {
          const parser = d3.timeParse('%d-%b-%y');
          const dateISO = parser(dateYMD).toISOString();
          return new Date(dateISO) / 1000;
        }

        // Convert csv to d3-ez data format
        const currencies = ["USD", "EUR", "AUD"];
        const data = currencies.map(currency => ({
          key: currency,
          values: csv.map(d => ({
            date: dateConvert(d.Date),
            value: d[currency]
          }))
        }));

        d3.select('#chartholder')
          .datum(data)
          .call(chart);
      });
    </script>
  </body>

</html>