<!DOCTYPE html>
<html>
<head>
<style>
.axis path {
fill: none;
stroke: #C0C0C0;
shape-rendering: crispEdges;
}
.tick.major line {
stroke: #C0C0C0;
shape-rendering: crispEdges;
}
.line-1 {
fill: none;
stroke: #7591FF;
}
.line-1 .symbol {
fill: white;
}
.key-1 {
fill: #7591FF;
cursor: pointer;
}
.line-2 {
fill: none;
stroke: #F24E4E;
}
.line-2 .symbol {
fill: white;
}
.key-2 {
fill: #F24E4E;
cursor: pointer;
}
.line-3 {
fill: none;
stroke: #00E00F;
}
.line-3 .symbol {
fill: white;
}
.key-3 {
fill: #00E00F;
cursor: pointer;
}
.line-4 {
fill: none;
stroke: #E0BF00;
}
.line-4 .symbol {
fill: white;
}
.key-4 {
fill: #E0BF00;
cursor: pointer;
}
.line-mo {
-webkit-svg-shadow: 0 0 7px #53BE12;
}
.key-mo {
-webkit-svg-shadow: 0 0 7px #53BE12;
}
.line-nomo {
stroke: whiteSmoke;
}
.key-nomo {
fill: whiteSmoke;
}
.viz {
height: 500px;
margin: 20px;
}
.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": "blue", "xValue": '1', "yValue": '1'},
{"key": "blue", "xValue": '2', "yValue": '2'},
{"key": "blue", "xValue": '3', "yValue": '3'},
{"key": "blue", "xValue": '4', "yValue": '4'},
{"key": "blue", "xValue": '5', "yValue": '5'}
],
[
{"key": "red", "xValue": '1', "yValue": '3'},
{"key": "red", "xValue": '2', "yValue": '4'},
{"key": "red", "xValue": '3', "yValue": '2'},
{"key": "red", "xValue": '4', "yValue": '6'},
{"key": "red", "xValue": '5', "yValue": '5'}
],
[
{"key": "green", "xValue": '1', "yValue": '9'},
{"key": "green", "xValue": '2', "yValue": '6'},
{"key": "green", "xValue": '3', "yValue": '1'},
{"key": "green", "xValue": '4', "yValue": '2'},
{"key": "green", "xValue": '5', "yValue": '2'}
],
[
{"key": "yellow", "xValue": '1', "yValue": '10'},
{"key": "yellow", "xValue": '2', "yValue": '7'},
{"key": "yellow", "xValue": '3', "yValue": '2'},
{"key": "yellow", "xValue": '4', "yValue": '1'},
{"key": "yellow", "xValue": '5', "yValue": '3'}
],
];
var DrawViz = vizkit.linechart(data)
.yAxis({title: 'foo', scale: 'linear'})
.xAxis({title: 'bar', scale: 'linear'})
.legend({addMouseoverClasses: true, symbol: {type: 'circle'}})
.tooltip({content: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>"});
DrawViz(d3.select('.viz'));
</script>
</body>
</html>