CODEWITHSUNDEEP
jqueryhtmld3.jsangular-ui-bootstrapdimple.js
mtkilic
mtkilic

Reputation: 1243

Dimple.js Update chart when select dropdown criteria

I am newbie with D3.js and dimple. I have been working on Dimple.js charts for few weeks now. Until now, dimple worked great for me. I am working on creating filtering criteria for my chart. So I used bootstrap to create dropdown menu.

I create example Here what I am trying to achieve, when in "Continent" drop menu, if I select either Europe or Middle East, I want to see only that chart with associated data.

d3.select("#btn").on("click", function(){
myChart.data = [

      {"Point":"Turkey","Population":75.01,"Year":2013,"Percent":1.689,"continent":"Middle East"},
{"Point":"Iran","Population":77.15,"Year":2013,"Percent":0.689,"continent":"Middle East"},
{"Point":"Israel","Population":8.05,"Year":2013,"Percent":2.689,"continent":"Middle East"},
{"Point":"Egypt","Population":87.61,"Year":2013,"Percent":0.689,"continent":"Middle East"},
{"Point":"Jordan","Population":6.46,"Year":2013,"Percent":3.689,"continent":"Middle East"},
{"Point":"Turkey","Population":63.24,"Year":2000,"Percent":0.689,"continent":"Middle East"},
{"Point":"Iran","Population":65.85,"Year":2000,"Percent":3.689,"continent":"Middle East"},
{"Point":"Israel","Population":6.28,"Year":2000,"Percent":0.689,"continent":"Middle East"},
{"Point":"Egypt","Population":68.33,"Year":2000,"Percent":0.689,"continent":"Middle East"},
{"Point":"Jordan","Population":4.79,"Year":2000,"Percent":0.689,"continent":"Middle East"}];

I know if I split my data to two and give each id in d3.select("#btn") and in my HTML. It will work but that's not what I am looking.

I will really appreciate for any help and suggestion.

Upvotes: 0

Views: 762

Answers (1)

Umesh Maharshi
Umesh Maharshi

Reputation: 1591

Reference here

Not clean, can be modified. See the reference for better understanding. 

var svg = dimple.newSvg("#chartContainer", 570, 400);
var data = [
    {"Point":"France","Population":65.92,"Year":2013,"Percent":1.689,"continent":"Europe"},
    {"Point":"Germany","Population":82.13,"Year":2013,"Percent":0.689,"continent":"Europe"},
    {"Point":"Italy","Population":60.23,"Year":2013,"Percent":2.689,"continent":"Europe"},
    {"Point":"Greece","Population":10.96,"Year":2013,"Percent":0.689,"continent":"Europe"},
    {"Point":"Belgium","Population":11.18,"Year":2013,"Percent":3.689,"continent":"Europe"},
    {"Point":"France","Population":60.91,"Year":2000,"Percent":0.689,"continent":"Europe"},
    {"Point":"Germany","Population":82.21,"Year":2000,"Percent":3.689,"continent":"Europe"},
    {"Point":"Italy","Population":56.94,"Year":2000,"Percent":0.689,"continent":"Europe"},
    {"Point":"Greece","Population":10.80,"Year":2000,"Percent":0.689,"continent":"Europe"},
    {"Point":"Belgium","Population":10.25,"Year":2000,"Percent":0.689,"continent":"Europe"},
  
    {"Point":"Turkey","Population":75.01,"Year":2013,"Percent":1.689,"continent":"Middle East"},
    {"Point":"Iran","Population":77.15,"Year":2013,"Percent":0.689,"continent":"Middle East"},
    {"Point":"Israel","Population":8.05,"Year":2013,"Percent":2.689,"continent":"Middle East"},
    {"Point":"Egypt","Population":87.61,"Year":2013,"Percent":0.689,"continent":"Middle East"},
    {"Point":"Jordan","Population":6.46,"Year":2013,"Percent":3.689,"continent":"Middle East"},
    {"Point":"Turkey","Population":63.24,"Year":2000,"Percent":0.689,"continent":"Middle East"},
    {"Point":"Iran","Population":65.85,"Year":2000,"Percent":3.689,"continent":"Middle East"},
    {"Point":"Israel","Population":6.28,"Year":2000,"Percent":0.689,"continent":"Middle East"},
    {"Point":"Egypt","Population":68.33,"Year":2000,"Percent":0.689,"continent":"Middle East"},
    {"Point":"Jordan","Population":4.79,"Year":2000,"Percent":0.689,"continent":"Middle East"}];


function getData(data, key) {
	var extData = [];
	if(key == "")
	{
		return data;
	}
	for(var i = 0; i < data.length; i++) {
		if(data[i]["continent"] == key) {
			extData.push(data[i])
		}
	}
	return extData
}	
var myChart = new dimple.chart(svg, getData(data,""));
  
var x = myChart.addCategoryAxis("x", ["Point","Year"]);
      
var y = myChart.addMeasureAxis("y", "Population");
var series1 = myChart.addSeries( "Point", dimple.plot.bar);
x.showGridlines = true;
x.addOrderRule("Date");


var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
myChart.draw();

        // This is a critical step.  By doing this we orphan the legend. This
        // means it will not respond to graph updates.  Without this the legend
        // will redraw when the chart refreshes removing the unchecked item and
        // also dropping the events we define below.
        myChart.legends = [];

        // This block simply adds the legend title. I put it into a d3 data
        // object to split it onto 2 lines.  This technique works with any
        // number of lines, it isn't dimple specific.
        svg.selectAll("title_text")
          .data(["Click legend to","show/hide owners:"])
          .enter()
          .append("text")
            .attr("x", 499)
            .attr("y", function (d, i) { return 80 + i * 14; })
            .style("font-family", "sans-serif")
            .style("font-size", "10px")
            .style("color", "Black")
            .text(function (d) { return d; });

        // Get a unique list of Owner values to use when filtering
        var filterValues = dimple.getUniqueValues(data, "Point");
        // Get all the rectangles from our now orphaned legend
        myLegend.shapes.selectAll("rect")
          // Add a click event to each rectangle
          .on("click", function (e) {
            // This indicates whether the item is already visible or not
            var hide = false;
            var newFilters = [];
            // If the filters contain the clicked shape hide it
            filterValues.forEach(function (f) {
              if (f === e.aggField.slice(-1)[0]) {
                hide = true;
              } else {
                newFilters.push(f);
              }
            });
            // Hide the shape or show it
            if (hide) {
              d3.select(this).style("opacity", 0.2);
            } else {
              newFilters.push(e.aggField.slice(-1)[0]);
              d3.select(this).style("opacity", 0.8);
            }
            // Update the filters
            filterValues = newFilters;
            // Filter the data
            myChart.data = dimple.filterData(data, "Point", filterValues);
            // Passing a duration parameter makes the chart animate. Without
            // it there is no transition
            myChart.draw(500);
          }); 
			
		  d3.selectAll('.dropdown-submenu > a').on("click", function(d) {
				myChart.data = getData(data,this.text);
				myChart.draw(500);
		  });
<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">
                Continent <span class="caret"></span>
            </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
             

              <li class="dropdown-submenu">
                <a tabindex="-1" href="#" >Europe</a>
                
              </li>
              
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#" >Middle East</a>
              </li>
            </ul>
        </div>
  <div id="chartContainer">

EDIT :

getData function modifies the data based on the key. It takes two parameters as input. First one is the original data and second on is the continent. If the continent is empty it will return entire data. If the continent is Europe, it will return Europe data.

When assigning data for the first time I am setting key parameter as empty so it will return data. If want to show only Europe data, change the empty string to Europe.

var myChart = new dimple.chart(svg, getData(data,"")); // entire data
var myChart = new dimple.chart(svg, getData(data,"Europe"));  // only Europe data

Upvotes: 2

Related Questions