Dimple.js multi line test

by Nimeshka Srimal

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
<div id="chartContainer"></div>

JavaScript

var svg = dimple.newSvg("#chartContainer", 590, 400);
/*
    var data = [
      { "Date":"01/01/2018", "Sunrise":"08:10", "Sunset":"17:20" },
      {  "Date":"02/01/2018", "Sunrise":"08:08", "Sunset":"17:25" },
      {  "Date":"03/01/2018", "Sunrise":"08:06", "Sunset":"17:30" },
      {  "Date":"04/01/2018", "Sunrise":"08:09", "Sunset":"17:35" },
      {  "Date":"05/01/2018", "Sunrise":"08:02", "Sunset":"17:40" },
      {  "Date":"06/01/2018", "Sunrise":"08:07", "Sunset":"17:45" }
    ];    
*/

var data = [{
  "Date": "01/01/2018",
  "Mode": "Sunrise",
  "Time": "08:10"
}, {
  "Date": "02/01/2018",
  "Mode": "Sunrise",
  "Time": "08:01"
}, {
  "Date": "03/01/2018",
  "Mode": "Sunrise",
  "Time": "08:30"
}, {
  "Date": "04/01/2018",
  "Mode": "Sunrise",
  "Time": "08:05"
}, {
  "Date": "05/01/2018",
  "Mode": "Sunrise",
  "Time": "08:10"
}, {
  "Date": "06/01/2018",
  "Mode": "Sunrise",
  "Time": "08:07"
}, {
  "Date": "01/01/2018",
  "Mode": "Sunset",
  "Time": "17:20"
}, {
  "Date": "02/01/2018",
  "Mode": "Sunset",
  "Time": "17:25"
}, {
  "Date": "03/01/2018",
  "Mode": "Sunset",
  "Time": "17:05"
}, {
  "Date": "04/01/2018",
  "Mode": "Sunset",
  "Time": "17:10"
}, {
  "Date": "05/01/2018",
  "Mode": "Sunset",
  "Time": "17:02"
}, {
  "Date": "06/01/2018",
  "Mode": "Sunset",
  "Time": "17:15"
}, ];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 40, 490, 320)

//var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d/%m");
var x = myChart.addTimeAxis("x", "Date", "%d/%m/%Y", "%d/%m/%Y");
var y = myChart.addTimeAxis("y", "Time", "%H:%M", "%H:%M");
//var y1 = myChart.addTimeAxis("y", "Sunset","%H:%M", "%H:%M");
//y.overrideMin = d3.timeFormat("%H:%M:%S").timeParse("00:00:00");

var parseTime = d3.timeParse("%H:%M:%S");
//y.overrideMin = parseTime("00:00:00");
y.overrideMin = parseTime("07:30:00");
//y.overrideMax = parseTime("23:59:59");
y.overrideMax = parseTime("18:00:00");

//var y = myChart.addMeasureAxis("y", "Sunrise");
//var y1 =...