CODEWITHSUNDEEP
javascriptjqueryhtmld3.jsdimple.js
mtkilic
mtkilic

Reputation: 1243

D3.js select filter update chart dimple.js

I have to dropdown menu selection to filter data from. It works great;however, since dropdown work like click option, it render chart right away.

What I am looking to do is select from both dropdown and then click "Submit" to render the charts.

Here is an example FIDDLE but mine will be multiple instead of single selection.

I try to replace my bootstrap dropdown with plain HTML and with but I had no luck.

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

function getData(data, year, letter) {
    var extData = [];
    for(var i = 0; i < data.length; i++) {
        if (year != null && data[i]["year"] != year)
            continue;
        if (letter != null && data[i]["Letter"] != letter)
            continue;
        extData.push(data[i])
    }
    return extData
}

var myChart = new dimple.chart(svg, getData(data,"2012"));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "year"); 
myChart.addMeasureAxis("y", "Value");
var s = myChart.addSeries(["Letter"], dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();

//Second chart
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
var data2 = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

var myChart2 = new dimple.chart(svg2, data2);
myChart2.setBounds(60, 30, 510, 305)
var x = myChart2.addCategoryAxis("x", "h");
myChart2.addMeasureAxis("y", "Value");
var s = myChart2.addSeries(["Letter"], dimple.plot.bar);
myChart2.addLegend(60, 10, 510, 20, "right");

var year = null;
var letter = null;

function chartsUpdate() {
    myChart.data = getData(data, year, letter);
    myChart.draw(500);
    myChart2.data = getData(data2, year, letter);
    myChart2.draw(500);
}

myChart2.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
    year = this.text;
    chartsUpdate();
});

d3.selectAll('.dropdown-submenu.letter > a').on("click", function(d) {
    letter = this.text;
    chartsUpdate();
});
    <script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Year <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2011</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2012</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2013</a>
       </li>
   </ul>
</div>
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Letter <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >a</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >b</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >c</a>
       </li>
   </ul>
</div>
<div id="chartContainer2"  style="float:left;width:48%;"></div>  
<div id="chartContainer">

Upvotes: 2

Views: 510

Answers (1)

Frank Tan
Frank Tan

Reputation: 4412

You were very close. In the callback you registered for d3.selectAll('.dropdown-submenu.year > a').on("click"), you call chartsUpdate. That means you'll update the chart every time you click a dropdown. I removed those calls and added a submit button, which calls chartsUpdate when clicked.

var svg = dimple.newSvg("#chartContainer", 590, 400);

var data = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

function getData(data, year, letter) {
    var extData = [];
    for(var i = 0; i < data.length; i++) {
        if (year != null && data[i]["year"] != year)
            continue;
        if (letter != null && data[i]["Letter"] != letter)
            continue;
        extData.push(data[i])
    }
    return extData
}

var myChart = new dimple.chart(svg, getData(data,"2012"));
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "year"); 
myChart.addMeasureAxis("y", "Value");
var s = myChart.addSeries(["Letter"], dimple.plot.bubble);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();

//Second chart
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
var data2 = [
    { h: 1, "Letter": "a", "Value": 1, "year": 2011},
    { h: 1, "Letter": "b", "Value": 2, "year": 2011},
    { h: 1, "Letter": "c", "Value": 3, "year": 2012},
    { h: 2, "Letter": "a", "Value": 10, "year": 2012},
    { h: 2, "Letter": "b", "Value": 10, "year": 2013},
    { h: 2, "Letter": "c", "Value": 30, "year": 2013}
];

var myChart2 = new dimple.chart(svg2, data2);
myChart2.setBounds(60, 30, 510, 305)
var x = myChart2.addCategoryAxis("x", "h");
myChart2.addMeasureAxis("y", "Value");
var s = myChart2.addSeries(["Letter"], dimple.plot.bar);
myChart2.addLegend(60, 10, 510, 20, "right");

var year = null;
var letter = null;

function chartsUpdate() {
    myChart.data = getData(data, year, letter);
    myChart.draw(500);
    myChart2.data = getData(data2, year, letter);
    myChart2.draw(500);
}

myChart2.draw();
d3.selectAll('.dropdown-submenu.year > a').on("click", function(d) {
    year = this.text;
    // chartsUpdate();
});

d3.selectAll('.dropdown-submenu.letter > a').on("click", function(d) {
    letter = this.text;
    // chartsUpdate();
});

/* Added */
$('#filter').click(chartsUpdate);
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Year <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2011</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2012</a>
       </li>
       <li class="dropdown-submenu year">
           <a tabindex="-1" href="#" >2013</a>
       </li>
   </ul>
</div>
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Select Letter <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >a</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >b</a>
       </li>
       <li class="dropdown-submenu letter">
           <a tabindex="-1" href="#" >c</a>
       </li>
   </ul>
</div>

<!-- Added -->
<button type="button" id="filter">Filter</button>
<!-- -->

<div id="chartContainer2"  style="float:left;width:48%;"></div>  
<div id="chartContainer">

Upvotes: 2

Related Questions