Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="chartContainer"></div>
  
  <button id="toggle">Toggle</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.0.js"></script>
  </body>
  
</html>
 
    var svg = dimple.newSvg("body", 800, 600);
     var data = [
       { time: 1465265181000, value:2000 },
       { time: 1465175181000, value:3000 }
     ];
     var data2 = [
       { time: 1465265181000, value:2000 },
       { time: 1465175181000, value:1000 }
     ];
     var chart = new dimple.chart(svg, []);
     chart.addTimeAxis("x", "time");
     chart.addMeasureAxis("y", "value");
     var s1 = chart.addSeries(null, dimple.plot.line);
     s1.data = data;
      s1.index = 1;
     chart.draw();
var toggle = false;
d3.select('#toggle').on('click', function(){
  
  var index;
  
  if(toggle){
    for(var i = 0; i < chart.series.length; i++){
      if(chart.series[i].index == 2){
            index = i;
            break;
      }
    }    
    chart.series[index].shapes.remove();
    chart.series.splice(index, 1);
  }else{
    var s2 = chart.addSeries(null, dimple.plot.bubble);
    //var s2 = chart.addSeries(null, dimple.plot.line);
    s2.data = data2;
    s2.index = 2;
  }
  chart.draw(0, false);
  toggle = !toggle;
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers