Testing a fix for bug seen in d3-ez line chart example found at https://www.slashdb.com/2018/02/15/howto-d3js/
Bugs fixed:
Fixes jamesleesaunders/d3-ez#87
Thanks to Elliot Bricker for writing a d3-ez demonstration article on SlashDB.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>SlashDB CSV Response</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="http://rawgit.com/jamesleesaunders/d3-ez/v3.3.3/build/d3-ez.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/v3.3.3/build/d3-ez.css" /> | |
| </head> | |
| <body> | |
| <div id="chartholder"></div> | |
| <br/> | |
| <div>Value: <span id="message"></span></div> | |
| <script type="text/javascript"> | |
| dateConvert = function(dateYMD) { | |
| parser = d3.timeParse('%Y-%m-%d'); | |
| var dateUnix = new Date(dateYMD) / 1000; | |
| return dateUnix; | |
| }; | |
| // Using SlashDB to filter on Canadinan Invoices and their totals per their order (invoicing) days | |
| d3.csv("https://demo.slashdb.com/db/Chinook/Invoice/BillingCountry/Canada/InvoiceDate,Total,BillingCountry.csv", function(error, csv) { | |
| var colors = d3.ez.palette.categorical(3); | |
| var chart = d3.ez.chart.lineChart() | |
| .colors(colors) | |
| .yAxisLabel("Invoice Total"); | |
| var legend = d3.ez.component.legend().title("Sum of Invoice Line Items"); | |
| var title = d3.ez.component.title().mainText("SlashDB Meets D3").subText("Using CSV-Based Response"); | |
| // Convert csv to d3-ez data format | |
| data = [{ | |
| key: "Total Price", | |
| values: [] | |
| }]; | |
| d3.map(csv).values().forEach(function(d) { | |
| data[0].values.push({ | |
| key: dateConvert(d.InvoiceDate), | |
| value: d.Total | |
| }); | |
| }); | |
| // Create chart object | |
| var myChart = d3.ez.base() | |
| .width(800) | |
| .height(400) | |
| .chart(chart) | |
| .legend(legend) | |
| .title(title) | |
| .on("customValueMouseOver", function(d, i) { | |
| d3.select("#message").text(d.value); | |
| }); | |
| d3.select('#chartholder') | |
| .datum(data) | |
| .call(myChart); | |
| }); | |
| </script> | |
| </body> | |
| </html> |