twitter bootstrap 3 - Bootsrap tabs and Echarts -


am having issue displaying echarts on second tab. chart displayed on first tab on navigation second tab does'nt display

                                <ul class="nav nav-tabs" style="margin-bottom: 15px;">                                     <li class="active">                                         <a href="#campaign" data-toggle="tab">campaigns</a>                                     </li>                                     <li>                                         <a href="#subscribers" data-toggle="tab">subscribers</a>                                     </li>                             </ul>                             <div id="mytabcontent" class="tab-content">                                 <div class="tab-pane fade active in" id="campaign">                                     <div id="piechart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>                                  </div>                                 <div class="tab-pane fade" id="subscribers">                                     <div id="barchart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>                                 </div>                             </div>

then hereis js displays chart

    var mychart = echarts.init(document.getelementbyid('piechart')); mychart.settheme({color:['#6cc66c','#418bca','#ff6600']}); piechartoption =  option = {     title : {         text: 'campaign analysis',         subtext: 'jackpot',         x:'center'     },     tooltip : {         trigger: 'item',         formatter: "{a} <br/>{b} : {c} ({d}%)"     },     legend: {         orient : 'vertical',         x : 'left',         data:['sent','pending','not delivered']     },     toolbox: {         show : true,         feature : {             mark : {show: true},             dataview : {show: true, readonly: false},             magictype : {                 show: true,                  type: ['pie', 'funnel'],                 option: {                     funnel: {                         x: '25%',                         width: '50%',                         funnelalign: 'left',                         max: 1548                     }                 }             },             restore : {show: true},             saveasimage : {show: true}         }     },     calculable : true,     series : [         {             name:'access source',             type:'pie',             radius : '55%',             center: ['50%', '60%'],             data:[                 {value:{{ $no}}, name:'sent'},                 {value:135, name:'pending'},                 {value:155, name:'not delivered'}             ]         }     ] }; mychart.setoption(piechartoption);    /*#########################         barchart            ##################################*/  var mybarchart = echarts.init(document.getelementbyid('barchart'));  var barchartoption = {   title: {     text: '某地区蒸发量和降水量',     subtext: '纯属虚构'   },   tooltip: {     trigger: 'axis'   },   legend: {     data: ['2014', '2015']   },   toolbox: {     show: true,     feature: {       mark: {         show: true       },       dataview: {         show: true,         readonly: false       },       magictype: {         show: true,         type: ['line', 'bar']       },       restore: {         show: true       },       saveasimage: {         show: true       }     }   },   calculable: true,   xaxis: [{     type: 'category',     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']   }],   yaxis: [{     type: 'value'   }],   series: [{     name: '2014',     type: 'bar',     data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],   }, {     name: '2015',     type: 'bar',     data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],   }] };  mybarchart.setoption(barchartoption); /*#########################         barchart            ##################################*/  $(function() {       $( "#tabs" ).tabs({         select: function(event, ui) {           console.log('calling chart.invalidatesize()');           chart.invalidatesize();         }       });

what cud solution this? please help..

});

the answer little late , not sure if found solution, resolution combination of echarts setoption , bootstrap's tab event.

like-

$('#mytabitem').on('shown.bs.tab', function (e) {          mychart.setoption(options); })

the above code reload chart mychart using echarts setoption callback bootstrap tab shown. more info on bootstrap tab events can found here.


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more