Sunday 15 January 2012

javascript - morris chart does not work on firefox -



javascript - morris chart does not work on firefox -

hello working on app displays morris chart on bootstrap tab. graphs displayed on firefox not show in firefox or net explorer.

please help.

here java scrip code using:

$('ul.nav a').on('shown.bs.tab', function(e) { var types = $(this).attr("data-identifier"); var typesarray = types.split(","); $.each(typesarray, function(key, value) { eval(value + ".redraw()"); }) }); $(function() { $.getjson('data.php', function(json) { var areac = { element: 'revenue-chart', data: object.keys(json.qa).map(function(key) { homecoming json.qa[key]; }), xkey: 'audit_date', ykeys: ['audit_score'], labels: ['qa score'], linecolors: ['#a0d0e0', '#3c8dbc'], hidehover: 'auto' }; line = morris.line(areac) //donut chart var area1 = { element: 'sales-chart', data: object.keys(json.ecsat).map(function(key) { homecoming json.ecsat[key]; }), xkey: 'csat_date', ykeys: ['csat_score'], labels: ['csat score'], hidehover: 'auto' }; line1 = morris.area(area1) }); });

here code

here result data.php

{"qa":[{"audit_date":"2014-10-23","audit_score":"92"},{"audit_date":"2014-10-16","audit_score":"67"},{"audit_date":"2014-10-01","audit_score":"90"},{"audit_date":"2014-10-03","audit_score":"96"},{"audit_date":"2014-10-05","audit_score":"75"},{"audit_date":"2014-10-20","audit_score":"89"}],"ecsat":[{"csat_score":"2.0000","csat_date":"2014-10-05"},{"csat_score":"3.7500","csat_date":"2014-10-12"},{"csat_score":"2.0667","csat_date":"2014-10-19"},{"csat_score":"1.6250","csat_date":"2014-10-26"},{"csat_score":"1.0000","csat_date":"2014-11-02"}],"pcsat":[{"pcsat_score":"10.0000","pcsat_date":"2014-10-19"},{"pcsat_score":"10.0000","pcsat_date":"2014-11-02"}]}

the issue caued bootstrap tabs hide div's trying draw charts on.

added code check if div active before drawing graph:

$('ul.nav a').on('shown.bs.tab', function(e){ if ($(e.target).attr('href') == '#tab-name' && $('#tab-name').html().length == 0) { <<---draw chart here --->> } });

javascript twitter-bootstrap firefox raphael morris.js

No comments:

Post a Comment