UNPKG

funnel-graph-js

Version:
145 lines (123 loc) 4.42 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Funnel</title> <link rel="stylesheet" type="text/css" href="../dist/css/main.min.css"> <link rel="stylesheet" type="text/css" href="../dist/css/theme.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/png" href="favicon.png"/> <style> html, body { min-height: 100%; } body { margin: 0; background: #393862; } .funnel { margin: 24px auto; } .flex { display: flex; } .method-buttons { display: flex; justify-content: center; margin-top: 48px; } button { margin-left: 8px; margin-right: 8px; } </style> </head> <body> <div class="flex"> <div class="funnel"> </div> </div> <div class="method-buttons"> <button id="makeVertical">Make Vertical</button> <button id="makeHorizontal">Make Horizontal</button> <button id="toggleDirection">Toggle Direction</button> <button id="gradientMakeVertical">Gradient Make Vertical</button> <button id="gradientMakeHorizontal">Gradient Make Horizontal</button> <button id="gradientToggleDirection">Gradient Toggle Direction</button> <button id="useData1">Use DataSet 1</button> <button id="useData2">Use DataSet 2</button> <button id="useData3">Use DataSet 3</button> </div> <script src="../dist/js/funnel-graph.js"></script> <script> var dataExample1 = { colors: ['#FFB178', '#FF3C8E'], values: [11000, 3000, 240] }; var dataExample2 = { labels: ['Impressions 2', 'Add To Cart 2', 'Buy 2'], colors: ['#FFB178', '#FF3C8E'], values: [12000, 5700, 360] }; var dataExample3 = { labels: ['Impressions', 'Add To Cart', 'Buy'], subLabels: ['Direct', 'Social Media', 'Ads'], colors: [ ['#FFB178', '#FF78B1', '#FF3C8E'], ['#A0BBFF', '#EC77FF'], ['#A0F9FF', '#7795FF'] ], values: [ [3500, 2500, 6500], [3300, 1400, 1000], [600, 200, 130] ], }; var graph = new FunnelGraph({ container: '.funnel', gradientDirection: 'horizontal', data: dataExample3, displayPercent: true, direction: 'horizontal', width: 800, height: 300, subLabelValue: 'raw' }); graph.draw(); // direction methods document.querySelector('#makeVertical').addEventListener('click', function () { graph.setWidth(300); graph.setHeight(400); graph.makeVertical(); }); document.querySelector('#makeHorizontal').addEventListener('click', function () { graph.setWidth(800); graph.setHeight(300); graph.makeHorizontal(); }); document.querySelector('#toggleDirection').addEventListener('click', function () { graph.direction === 'horizontal' ? document.querySelector('#makeVertical').click() : document.querySelector('#makeHorizontal').click(); }); // gradient methods document.querySelector('#gradientMakeVertical').addEventListener('click', function () { graph.gradientMakeVertical(); }); document.querySelector('#gradientMakeHorizontal').addEventListener('click', function () { graph.gradientMakeHorizontal(); }); document.querySelector('#gradientToggleDirection').addEventListener('click', function () { graph.gradientToggleDirection(); }); document.querySelector('#useData1').addEventListener('click', function () { graph.updateData(dataExample1); }); document.querySelector('#useData2').addEventListener('click', function () { graph.updateData(dataExample2); }); document.querySelector('#useData3').addEventListener('click', function () { graph.updateData(dataExample3); }); </script> </body> </html>