JSFiddle - React, Tailwind, and code Playground

by andrewarnier

HTML

<script src="http://dimplejs.org/dist/dimple.v1.1.2.min.js"></script>
<div id="chartContainer"></div>

JavaScript

var svg = dimple.newSvg("#chartContainer", 590, 400);
// Filter for a single SKU and Channel
    data = [
    { "Counts" : 4, "timestamp" : "09:33:00"},
    { "Counts" : 10, "timestamp" : "09:33:05"},
    { "Counts" : 2, "timestamp" : "09:33:50"},
    { "Counts" : 1, "timestamp" : "09:34:00"},
    { "Counts" : 5, "timestamp" : "09:34:20"},
    { "Counts" : 6, "timestamp" : "09:35:00"}
];

      // Create and Position a Chart
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 500, 300);
      var x = myChart.addCategoryAxis("x", "timestamp")
      myChart.addMeasureAxis("y", "Counts");

      // Order the x axis by date
      x.addOrderRule("Date");

      // Min price will be green, middle price yellow and max red
      myChart.addColorAxis("Price", ["green", "yellow", "red"]);

      // Add a thick line with markers
      var lines = myChart.addSeries(null, dimple.plot.line);
      lines.lineWeight = 5;
      lines.lineMarkers = true;

      // Draw the chart
      myChart.draw();
      x.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + " rotate(45)";
    });