nvd3 multiple charts sharing the same data

Question

I am trying to build 2 vertical charts sharing the same data. So I created a refreshPrimary(top) and refreshStackedArea(bottom) that can be called to refresh the graphs depending on options the user selects.

The problem I am having it that when I invoke both refreshPrimary and refreshStackedArea the top graph does not show.if I only do refreshPrimary it display it's graph ok. Below are the refresh functions, the HTML and chart drawing functions.

Refresh function :

// Add refresh function to lm_pareto context
function refreshPrimary() {
   //
   function refreshGraph() {

    console.log("DEBUG JS lm_pareto.refreshGraph entered");


    d3.selectAll("#lm_pareto svg > *").remove();

    d3.select('#lm_pareto svg')   
    .datum(lm_pareto.dataPrimary)         
    .call(chart);          

    //Update the chart when window resizes.
    nv.utils.windowResize(function() { chart.update() });
    return chart;
    }
   nv.addGraph(refreshGraph);
}


function refreshStackedArea() {
   function refreshGraph_SArea() {

    d3.selectAll("#lm_stackedArea svg > *").remove();

    d3.select('#lm_stackedArea svg')   
    .datum(lm_pareto.dataStackedArea)  
    .call(chart);          //Finally, render the chart!

    //Update the chart when window resizes.
    nv.utils.windowResize(function() { chart.update() });
    return chart;
}
nv.addGraph(refreshGraph_SArea);
}

HTML DIV's

<div id="lm_pareto" class="lm_graph" style="border: 2px solid blue"></div>
<div id="lm_stackedArea" class="lm_graph" style="border: 2px solid blue"></div>

TOP CHART

 var chart;

nv.addGraph(function () {
chart = nv.models.stackedLineChart()
    .options({
    reduceXTicks: false
})
    .margin(margin)

// Get normalised data for chart
chart.lines1.forceY(0);
chart.lines2.forceY(0);

svg = d3.select("#lm_pareto")
    .append("svg");

// chart is a temp object of nv.addGraph... not able to pass back.
return chart;
});

BOTTOM CHART

var margin = {
    top: 50,
    right: 50,
    bottom: 50,
   left: 70
};
var chart;

nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
            .margin(margin)
            .x(function(d) { return d[0] })  
            .y(function(d, x) { return d[1]; })   
            .useInteractiveGuideline(true)   
            .rightAlignYAxis(false)      //y-axis to the right side.
//          .transitionDuration(500)
            .showControls(false)       
            .clipEdge(true)
            .color(lm_pareto.ColorList);


chart.yAxis
  .tickFormat(d3.format(',.2f'));

svg = d3.select("#lm_stackedArea")
    .append("svg")

// OLD WAY
//svg.datum(lm_pareto.dataStackedArea)
//      .call(chart);
//
//nv.utils.windowResize(chart.update);

return chart;

I found the problem. The issue was the sharing of the global variable chart. I changed this to p_chart and sA_chart and it worked fine. What is still confusing is the management of chart. In my attempts at solving the following article was very useful -- https://www.devmynd.com/blog/2014-3-exploring-nvd3... — frankr6591, Apr 18 '15 at 00:26
When I tried to manage chart outside of nv.addgraph() my attempts did not work... ie. function Init_Graph() { var chart = nv.models.XXXX() /// initialize stuff blah ... blah } chart = init_Graph(); nv.addGraph(chart); refreshXXXX(chart) { setup... } This sequence didn't work... After several attempts I reverted to code included and used p_chart and sA_chart. I'm sure I missed some steps... just wondering if someone can give some tips. (sorry for not being specific on attempts -- just confused at this time.) — frankr6591, Apr 18 '15 at 00:37

nvd3 multiple charts sharing the same data

0 Answers0