CODEWITHSUNDEEP
javascriptangularjsfusioncharts
Sushant
Sushant

Reputation: 3669

Update Fusion Charts with AngularJS

I have a rather simple problem. I have a fusionchart treemap that is in a tab. The data for fusion chart changes indefinitely. So ideally treemap should also get updated.

Well, it does get updated if that tab is opened. But if I am on a different tab, the treemap does not get updated. The code snippet is as follows-

Controller-

var grabData = function(){$http.get('someApi').then(function success(response) {
//logic to update $scope.final_data
$scope.dataSource = {
'chart': {
    //configuration
},
   'data': $scope.final_data,
   'colorrange': {
       //fusion chart options
    };
       // $scope.change = false;
}, function error(response) {});};

HTML-

<div fusioncharts
    width= "100%"
    height= "450"
    type= "treemap"
    dataFormat= "json"
    dataSource= "{{dataSource}}">
</div>

Thanks !

Upvotes: 0

Views: 826

Answers (2)

user3274033
user3274033

Reputation: 29

You can use:

FusionCharts.items["#chartid"].setJSONData($scope.dataSource);

Upvotes: 0

Ayan
Ayan

Reputation: 2380

Understanding the Problem

Data not getting update while another tab is in focus, i.e. the chart-container element is not in a visible state.

For a better explanation, let`s consider a dummy code, containing five tabs. Each tab has a tree map chart being rendered. After an interval of every 1 min, the caption is updated showing the current time and date.

$(function() {
  var chartArr = [],
    tabArr = $('.tab-content')[0].children,
    obj = {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "theme": "zune"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "2217",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09"
          }, {
            "label": "Galaxy S6 Edge",
            "value": "448",
            "sValue": "1.48"
          }, {
            "label": "Galaxy S6",
            "value": "416",
            "sValue": "1.13"
          }, {
            "label": "Galaxy J1",
            "value": "304",
            "sValue": "1.18"
          }, {
            "label": "Galaxy J7",
            "value": "159",
            "sValue": "1.36"
          }, {
            "label": "Galaxy Note5",
            "value": "191",
            "sValue": "1.48"
          }, {
            "label": "galaxy A8",
            "value": "180",
            "sValue": "1.19"
          }]
        }, {
          "label": "Apple",
          "fillcolor": "838986",
          "value": "1283",
          "data": [{
            "label": "iPhone 6",
            "value": "340",
            "sValue": "1.08"
          }, {
            "label": "iPhone 6s plus",
            "value": "296",
            "sValue": "1.14"
          }, {
            "label": "iPhone 6s",
            "value": "227",
            "sValue": "1.12"
          }, {
            "label": "iPhone 5s",
            "value": "174",
            "sValue": "1.18"
          }, {
            "label": "iPhone 5c",
            "value": "96",
            "sValue": "1.18"
          }, {
            "label": "iPhone 4s",
            "value": "150",
            "sValue": "1.11"
          }]
        }, {
          "label": "Nokia",
          "fillcolor": "838986",
          "value": "759",
          "data": [{
            "label": "Lumia 630",
            "value": "101",
            "sValue": "1.13"
          }, {
            "label": "lumia 810",
            "value": "98",
            "sValue": "0.85"
          }, {
            "label": "lumia 930",
            "value": "105",
            "sValue": "0.56"
          }, {
            "label": "lumia 950 XL dual sim",
            "value": "85",
            "sValue": "0.75"
          }, {
            "label": "lumia 735",
            "value": "64",
            "sValue": "0.78"
          }, {
            "label": "lumia 830",
            "value": "66",
            "sValue": "0.83"
          }, {
            "label": "lumia 1320 LTE",
            "value": "133",
            "sValue": "0.29"
          }, {
            "label": "lumia 1320",
            "value": "107",
            "sValue": "0.29"
          }]
        }, {
          "label": "LG",
          "fillcolor": "838986",
          "value": "441",
          "data": [{
            "label": "G4",
            "value": "189",
            "sValue": "0.51"
          }, {
            "label": "L70 Dual",
            "value": "122",
            "sValue": "0.52"
          }, {
            "label": "G FLEX 2",
            "value": "77",
            "sValue": "0.64"
          }, {
            "label": "G3 S",
            "value": "53",
            "sValue": "0.64"
          }]
        }, {
          "label": "Huawei",
          "fillcolor": "838986",
          "value": "411",
          "data": [{
            "label": "Y3 U03",
            "value": "136",
            "sValue": "1.40"
          }, {
            "label": "G8",
            "value": "78",
            "sValue": "0.87"
          }, {
            "label": "Y520",
            "value": "67",
            "sValue": "1.35"
          }, {
            "label": "ascend p7",
            "value": "48",
            "sValue": "0.97"
          }, {
            "label": "G7 plus",
            "value": "27",
            "sValue": "0.87"
          }, {
            "label": "P8",
            "value": "55",
            "sValue": "1.23"
          }]
        }, {
          "label": "Lenovo",
          "fillcolor": "838986",
          "value": "489",
          "data": [{
            "label": "A5000",
            "value": "47",
            "sValue": "0.69"
          }, {
            "label": "vibe P780",
            "value": "37",
            "sValue": "0.69"
          }, {
            "label": "K4 Note",
            "value": "156",
            "sValue": "0.69"
          }, {
            "label": "A7010",
            "value": "89",
            "sValue": "0.71"
          }, {
            "label": "Vibe P1 Mini",
            "value": "110",
            "sValue": "0.67"
          }, {
            "label": "Vibe x3 Lite",
            "value": "50",
            "sValue": "0.77"
          }]
        }, {
          "label": "Sony",
          "fillcolor": "838986",
          "value": "200",
          "data": [{
            "label": "Xperia Z3",
            "value": "38",
            "sValue": "1.5"
          }, {
            "label": "Xperia Z3+",
            "value": "25",
            "sValue": "1.38"
          }, {
            "label": "Xperia Z5",
            "value": "67",
            "sValue": "0.64"
          }, {
            "label": "Xperia X3 Dual",
            "value": "46",
            "sValue": "0.73"
          }, {
            "label": "Xperia E4",
            "value": "24",
            "sValue": "0.77"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "0",
        "gradient": "1",
        "minvalue": "0",
        "code": "dfff72",
        "startlabel": "Ideal",
        "endlabel": "Threshold",
        "color": [{
          "code": "062a3f",
          "maxvalue": "1.6",
          "label": "Threshold"
        }]
      }
    };

  function chartGenerator(selector) {
    //console.log(selector);
    var visitChart = new FusionCharts({
        type: 'treemap',
        renderAt: selector,
        width: '550',
        height: '550',
        dataFormat: 'json',
        dataSource: obj
      })
      .render();
    setInterval(function() {
      var data = visitChart.getJSONData(),
        dt = new Date();
      data.chart.caption = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
      visitChart.setJSONData(data);
    }, 1000);
    return visitChart;
  }

  FusionCharts.ready(function() {
    for (var len = tabArr.length, i = 0; i < len; i += 1) {
      chartGenerator(tabArr[i].id);
    }
  });
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#Tab_1" data-toggle="tab">Tab 1</a>
  </li>
  <li class=""><a href="#Tab_2" data-toggle="tab">Tab 2</a>
  </li>
  <li class=""><a href="#Tab_3" data-toggle="tab">Tab 3</a>
  </li>
  <li class=""><a href="#Tab_4" data-toggle="tab">Tab 4</a>
  </li>
  <li class=""><a href="#Tab_5" data-toggle="tab">Tab 5</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active in" id="Tab_1">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_2">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_3">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_4">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_5">
    FusionCharts rendering here...
  </div>
</div>

One can easily notice, the time in the captions are not synced. The captions in the not-visible tab containers are not updated.

Cause

FusionCharts uses different DOM level operations to offer a prettier visualisation

With these operations, it does an exhaustive space managements, which becomes not much possible in case of containers remaining in hidden modes. So the data updates are ignored in these states.

Work-Around

Lets walk through an effective work-around to handle these situations.

  • If the container is not in a visible state, store the data(that needs to be updated with) in a store.
  • Listen to the event while changing a tab.
  • Update the chart with the latest data.

Below is one way of implementing so.

$(function() {
  var chartArr = [],
    tabArr = $('.tab-content')[0].children,
    obj = {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "theme": "zune"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "2217",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09"
          }, {
            "label": "Galaxy S6 Edge",
            "value": "448",
            "sValue": "1.48"
          }, {
            "label": "Galaxy S6",
            "value": "416",
            "sValue": "1.13"
          }, {
            "label": "Galaxy J1",
            "value": "304",
            "sValue": "1.18"
          }, {
            "label": "Galaxy J7",
            "value": "159",
            "sValue": "1.36"
          }, {
            "label": "Galaxy Note5",
            "value": "191",
            "sValue": "1.48"
          }, {
            "label": "galaxy A8",
            "value": "180",
            "sValue": "1.19"
          }]
        }, {
          "label": "Apple",
          "fillcolor": "838986",
          "value": "1283",
          "data": [{
            "label": "iPhone 6",
            "value": "340",
            "sValue": "1.08"
          }, {
            "label": "iPhone 6s plus",
            "value": "296",
            "sValue": "1.14"
          }, {
            "label": "iPhone 6s",
            "value": "227",
            "sValue": "1.12"
          }, {
            "label": "iPhone 5s",
            "value": "174",
            "sValue": "1.18"
          }, {
            "label": "iPhone 5c",
            "value": "96",
            "sValue": "1.18"
          }, {
            "label": "iPhone 4s",
            "value": "150",
            "sValue": "1.11"
          }]
        }, {
          "label": "Nokia",
          "fillcolor": "838986",
          "value": "759",
          "data": [{
            "label": "Lumia 630",
            "value": "101",
            "sValue": "1.13"
          }, {
            "label": "lumia 810",
            "value": "98",
            "sValue": "0.85"
          }, {
            "label": "lumia 930",
            "value": "105",
            "sValue": "0.56"
          }, {
            "label": "lumia 950 XL dual sim",
            "value": "85",
            "sValue": "0.75"
          }, {
            "label": "lumia 735",
            "value": "64",
            "sValue": "0.78"
          }, {
            "label": "lumia 830",
            "value": "66",
            "sValue": "0.83"
          }, {
            "label": "lumia 1320 LTE",
            "value": "133",
            "sValue": "0.29"
          }, {
            "label": "lumia 1320",
            "value": "107",
            "sValue": "0.29"
          }]
        }, {
          "label": "LG",
          "fillcolor": "838986",
          "value": "441",
          "data": [{
            "label": "G4",
            "value": "189",
            "sValue": "0.51"
          }, {
            "label": "L70 Dual",
            "value": "122",
            "sValue": "0.52"
          }, {
            "label": "G FLEX 2",
            "value": "77",
            "sValue": "0.64"
          }, {
            "label": "G3 S",
            "value": "53",
            "sValue": "0.64"
          }]
        }, {
          "label": "Huawei",
          "fillcolor": "838986",
          "value": "411",
          "data": [{
            "label": "Y3 U03",
            "value": "136",
            "sValue": "1.40"
          }, {
            "label": "G8",
            "value": "78",
            "sValue": "0.87"
          }, {
            "label": "Y520",
            "value": "67",
            "sValue": "1.35"
          }, {
            "label": "ascend p7",
            "value": "48",
            "sValue": "0.97"
          }, {
            "label": "G7 plus",
            "value": "27",
            "sValue": "0.87"
          }, {
            "label": "P8",
            "value": "55",
            "sValue": "1.23"
          }]
        }, {
          "label": "Lenovo",
          "fillcolor": "838986",
          "value": "489",
          "data": [{
            "label": "A5000",
            "value": "47",
            "sValue": "0.69"
          }, {
            "label": "vibe P780",
            "value": "37",
            "sValue": "0.69"
          }, {
            "label": "K4 Note",
            "value": "156",
            "sValue": "0.69"
          }, {
            "label": "A7010",
            "value": "89",
            "sValue": "0.71"
          }, {
            "label": "Vibe P1 Mini",
            "value": "110",
            "sValue": "0.67"
          }, {
            "label": "Vibe x3 Lite",
            "value": "50",
            "sValue": "0.77"
          }]
        }, {
          "label": "Sony",
          "fillcolor": "838986",
          "value": "200",
          "data": [{
            "label": "Xperia Z3",
            "value": "38",
            "sValue": "1.5"
          }, {
            "label": "Xperia Z3+",
            "value": "25",
            "sValue": "1.38"
          }, {
            "label": "Xperia Z5",
            "value": "67",
            "sValue": "0.64"
          }, {
            "label": "Xperia X3 Dual",
            "value": "46",
            "sValue": "0.73"
          }, {
            "label": "Xperia E4",
            "value": "24",
            "sValue": "0.77"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "0",
        "gradient": "1",
        "minvalue": "0",
        "code": "dfff72",
        "startlabel": "Ideal",
        "endlabel": "Threshold",
        "color": [{
          "code": "062a3f",
          "maxvalue": "1.6",
          "label": "Threshold"
        }]
      }
    };

  function chartGenerator(selector) {
    //console.log(selector);
    var elemId = '#' + selector,
      elem = $(elemId),
      visitChart = new FusionCharts({
        type: 'treemap',
        renderAt: selector,
        width: '550',
        height: '550',
        dataFormat: 'json',
        dataSource: obj
      })
      .render();
    setInterval(function() {
      var data = visitChart.getJSONData(),
        dt = new Date();
      data.chart.caption = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
      if (!elem[0].offsetHeight || !elem[0].offsetWidth) {
        dataStore.set(elemId, visitChart, data);
      } else {
        visitChart.setJSONData(data);
      }
    }, 1000);
  }

  FusionCharts.ready(function() {
    for (var len = tabArr.length, i = 0; i < len; i += 1) {
      chartGenerator(tabArr[i].id);
    }
  });
});

var dataStore = (function() {
  var store = {};
  return {
    get: function(selector) {
      return store[selector];
    },
    set: function(selector, chartRef, data) {
      var obj;
      if (!(obj = store[selector])) {
        obj = store[selector] = {};
      }
      obj.chartRef = chartRef;
      obj.data = data;
    }
  }
})();


$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var data,
    elem = $(e.target),
    target = elem.attr("href"),
    res = dataStore.get(target),
    chartRef = res.chartRef,
    data = res.data;
  chartRef.setJSONData(data);
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#Tab_1" data-toggle="tab">Tab 1</a>
  </li>
  <li class=""><a href="#Tab_2" data-toggle="tab">Tab 2</a>
  </li>
  <li class=""><a href="#Tab_3" data-toggle="tab">Tab 3</a>
  </li>
  <li class=""><a href="#Tab_4" data-toggle="tab">Tab 4</a>
  </li>
  <li class=""><a href="#Tab_5" data-toggle="tab">Tab 5</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active in" id="Tab_1">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_2">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_3">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_4">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_5">
    FusionCharts rendering here...
  </div>
</div>

Just keep changing the tabs, and voila! Its done!

Upvotes: 2

Related Questions