Dimple JS Basic with JSON data

This has been forked to check custom data format

HTML

<script src="https://d3js.org/d3.v4.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
<div id="chartContainer"></div>

JavaScript

var svg = dimple.newSvg("#chartContainer", 1000, 600),
data = [
    
    { "vlaue" : 5, "timestamp" : "09:34:20"},
    { "vlaue" : 6, "timestamp" : "09:35:00"}
];


// Draw a standard chart using the aggregated data

var chart = new dimple.chart(svg, data);
chart.setBounds(60, 60, 900, 400);


var x = chart.addCategoryAxis("x", "timestamp");
x.title = "timestamp";
x.addOrderRule("timestamp");
x.showGridlines = true;
 x.floatingBarWidth = 5;
 
var y = chart.addMeasureAxis("y", "vlaue");
y.showGridlines = true;
y.tickFormat = ',.0f';  //do not want any decimal

var s1 = chart.addSeries(null, dimple.plot.bar);
var s2 = chart.addSeries(null, dimple.plot.line);
s2.lineWeight = 5;
s2.lineMarkers = true;

s1.getTooltipText = function (e) {
		return [
			"Timestamp : " + e.cx + "",
			"vlaue : " + e.cy + ""
		];
	};
s2.getTooltipText = function (e) {
		return [
			"Timestamp : " + e.cx + "",
			"vlaue : " + e.cy + ""
		];
	}; 

chart.draw(); 
y.shapes.selectAll("text").attr("transform",
    function (d) {
      return d3.select(this).attr("transform") + "rotate(45, 40, 0)";
    });
x.titleShape.attr("y",
    function (d) {
      return "1000"; //you may want to calculate this dynamically.
    });