html5 - I am trying yo make D3plus accept non-date value for boxplot and reduce space between rows in bootstrap -
i have sql database, , building webform/webservice extract data using asp.net , visualizing using d3plus. moreover, using bootstrap structure webform. trying have 2 rows, , less white space between them. additionally, boxplot doesn't work if using values other year (i.e. string building names. sure need small tweak, can't figure out.
i working on webservice , appreciate community's feedback on webform. thank time! here sample code:
<%@ page language="c#" autoeventwireup="true" codebehind="vetwebform.aspx.cs" inherits="vetapp.vetwebform" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="content/bootstrap.min.css" rel="stylesheet"/> <script src="scripts/d3.js"></script> <script src="scripts/d3plus.js"></script> <style> .row { font-size: 30px; padding-top: 10px; margin-bottom: 0px } </style> </head> <body> <form id="form1" runat="server"> <div class="row"> report from:  <asp:textbox id="textbox3" runat="server" columns="6" style="border:1px solid #ff0000"></asp:textbox>  to  <asp:textbox id="textbox4" runat="server" columns="6" style="border:1px solid #ff0000"></asp:textbox> </div> <div class="row"> <div class="col-lg-6"> <div id="viz"></div> </div> <div class="col-lg-6"> <div id="exports"></div> </div> </div> <script> var data = [ {"building": "mmb", "name":"alpha", "value": 15}, { "building": "mmb", "name": "alpha", "value": 34 }, { "building": "ssb", "name": "alpha2", "value": 17 }, { "building": "ssb", "name": "alpha2", "value": 65 }, { "building": "ssb", "name": "beta", "value": 10 }, { "building": "gcc", "name": "beta", "value": 10 }, { "building": "gcc", "name": "beta2", "value": 40 }, { "building": "mmb", "name": "beta2", "value": 38 }, { "building": "lmd", "name": "gamma", "value": 5 }, { "building": "lmd", "name": "gamma", "value": 10 }, { "building": "mmb", "name": "gamma2", "value": 20 }, { "building": "mmb", "name": "gamma2", "value": 34 }, { "building": "ssb", "name": "delta", "value": 50 }, { "building": "ssb", "name": "delta", "value": 43 }, { "building": "gcc", "name": "delta2", "value": 17 }, { "building": "gcc", "name": "delta2", "value": 35 } ] var visualization = d3plus.viz() .container("#viz") .data(data) .type("box") .id("name") .x("building") .y("value") .time(false) .height(400) .ui([{ "label": "visualization type", "method": "type", "value": ["scatter","box"] }]) .draw() </script> <script> // sample data array var trade_data = [ {"usd": 34590873460, "product": "oil"}, {"usd": 12897429187, "product": "cars"}, {"usd": 8974520985, "product": "airplanes"}, {"usd": 9872342, "product": "apples"}, {"usd": 6897234098, "product": "shoes"}, {"usd": 590834587, "product": "glass"}, {"usd": 987234261, "product": "horses"} ] // instantiate d3plus var visualization = d3plus.viz() .container("#exports") .data(trade_data) .type("tree_map") .id("product") .size("usd") .height(400) .labels({ "align": "left", "valign": "top" }) .draw() </script> </form> </body> </html> here screenshot:
i can speak bootstrap question, code posted d3plus box plot works me in current release (v1.9.7).
