Coloring line segments

by A B Jones

HTML

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

CSS

.tick line{
  visibility:hidden;
}

JavaScript

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
          { "date" : '2016-01-01', "project" : "Grape", "status" : 1 },
          { "date" : '2016-01-08', "project" : "Grape", "status" : -2 },
          { "date" : '2016-01-07', "project" : "Apple", "status" : 3 },
          { "date" : '2016-01-08', "project" : "Apple", "status" : 1 },
          { "date" : '2016-01-02', "project" : "Banana", "status" : -2 },
          { "date" : '2016-01-15', "project" : "Banana", "status" : 2 },
        ];
var chart = new dimple.chart(svg,data);
chart.setBounds(100, 100, 500, 300);
var x = chart.addCategoryAxis("x", "project");
var y = chart.addTimeAxis("y", "date", "%Y-%m-%d", "%Y-%m-%d");

y.addOrderRule("date");

var lines = chart.addSeries(["project"], dimple.plot.line, [x, y]);

lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;
     
chart.draw();