Blazemind

javascript theme not rendered in chrome browser

Recommended Posts

FusionCharts.ready(function () {
  var myChart = new FusionCharts({
  type: "angulargauge",
  renderAt: "refgauge",
  width: "100%",
  height: "350",
  dataFormat: "json",
  "dataSource": {"chart":{"caption":"Elecon Motor Speed","subCaption":"Current Speed","lowerlimit":"0","upperlimit":"300","showvalue":"1","theme":"fusion"},"colorrange": {"color": [{ "minvalue":"0","maxvalue":"100","code":"#FFC533"},{"minvalue":"100","maxvalue":"200","code":"#62B58F"},{"minvalue":"200","maxvalue":"300","code":"#F2726F"}]}, "dials": {"dial": [{"value":"","tooltext":"Speed: <b>$datavalue</b>"}]},"trendpoints": {"point": [{ "startvalue":"125","displayvalue":"Eco","thickness":"2","color":"#E15A26","usemarker":"1","markerbordercolor":"#E15A26","markertooltext":"Eco Speed"}]}},
  events: {
  'beforeRender': function (evt, args) {
  var score = document.createElement('div');
  score.setAttribute('id', 'score-detail');
  args.container.parentNode.insertBefore(score, args.container.nextSibling);
  },
  "rendered": function (evtObj, argObj) {
  evtObj.sender.intervalVar = setInterval(function () {
  var chartIns = evtObj.sender;
   
   
  chartIns.feedData("value=" + datavalue);
   
  }, 300);
  },
  "realtimeUpdateComplete": function (evtObj, argObj) {
  var updtObj = argObj && argObj.updateObject,
  values = updtObj && updtObj.values,
  updtValStr = values && values[0],
  updtVal = updtValStr &&
  parseFloat(updtValStr).toFixed(0),
  divToUpdate = document.getElementById("score-detail");
  },
  "disposed": function (evtObj, argObj) {
  clearInterval(evtObj.sender.intervalVar);
  }
  }
  });
  myChart.render();
 

});

 

i am updating value from the code behind page of asp.net the updated value displays and the chart reflects the change in value but the theme is not rendered with the chart.

and the problem in only in chrome browser.

chrome output.png

Share this post


Link to post
Share on other sites

Hi,

 

The value that you are setting to the gauge, is set using "feedData()" API method in your implementation code shared. This method of FusionCharts feed the value dynamically to the real-time charts and gauges without refreshing the chart. So it will not affect the theme that is set to the chart/gauge when the feedData() updates the values.

Could you let us know which version of FusionCharts are you using? As the theme "fusion" that you are using will work with FusionCharts version 3.13.0 or above.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

hi Akash,

i am reading the dynamic data with mqtt and the value is updating without gauge getting rendered again.

 regarding the theme, theme is working in other browsers (eg. firefox,IE,Opera etc) but it is not loading in Chrome  and the version of FusionCharts is the Trial Version Downloaded from the Website.

 

Thanks,

Blazemind

Share this post


Link to post
Share on other sites

Hi,

 

Check the version of FusionCharts in the fusioncharts.js file by opening it in any editor or by executing the below command in the browser console :

FusionCharts.version

Please note : "fusion" theme will be supported for only version 3.13.0 or higher.

 

Check this sample working fine at our end using the theme "fusion" : http://jsfiddle.net/dkL4K/444/

If you still face the same issue, kindly provide a scaled down sample replicating the issue. We will check it at our end.

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now