examples/responsive.html

<!DOCTYPE html>
<html>
<head>
<style>
.axis path {
  fill: none;
  stroke: #C0C0C0;
  shape-rendering: crispEdges;
}
.tick line {
  stroke: #C0C0C0;
  shape-rendering: crispEdges;
}
.line-1 {
  fill: none;
  stroke: #7591FF;
}
.line-1 .symbol {
  fill: white;
}
.key-1 {
  fill: #7591FF;
  cursor: pointer;
}
.viz {
  height: 500px;
  margin: 20px;
  cursor: crosshair;
}
.area {
  fill: steelBlue;
}
.y-title, .x-title {
  font-size: 20px;
  font-weight: bold;
}
.legend {
  font-size: 12px;
}
.vizkit-tooltip {
  background-color: whiteSmoke;
  padding: 5px;
  border: 1px solid #E0E0E0;
}
.vizkit-tooltip h1 {
  font-size: 12px;
}
</style>
</head>
<body>

<div class="viz"></div>

<script src="../lib/d3.js"></script>
<script src="../vizkit.js"></script>
<script>
var data = [
  [
    {"key": "foobar", "xValue": '1', "yValue": '1'},
    {"key": "foobar", "xValue": '2', "yValue": '2'},
    {"key": "foobar", "xValue": '3', "yValue": '3'},
    {"key": "foobar", "xValue": '4', "yValue": '4'},
    {"key": "foobar", "xValue": '5', "yValue": '5'}
  ]
];

var DrawViz = vizkit.linechart(data)
                     .yAxis({title: 'foo', scale: 'linear', gridLine: true})
                     .xAxis({title: 'bar', scale: 'linear', gridLine: true})
                     .legend({addMouseoverClasses: false, symbol: {type: 'square'}})
                     .tooltip({content: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>"});


DrawViz(d3.select('.viz'));

window.onresize = function(event) {
  d3.select('.viz svg').remove();
  DrawViz(d3.select('.viz'));
}
</script>
</body>
</html>