<!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>