Issue with Highcharts pie charts with frameset -
i using highcharts pie charts. displaying 4 pie charts in single page different series of data. it's working , good. if im using frameset , calling pages inside these pie charts not displaying, if move page forwared backward charts displaying. kindly figure out this.
<?php include('../control/config.php'); if($_request['basic']!=null) { if($_request['basic']=='internal') { $basepage='internal.php'; } if($_request['basic']=='external') { $basepage='index.php'; } } $projectdir= '../data/project'; // open known directory, , proceed read filename if (is_dir($projectdir)) { if ($dh = opendir($projectdir)) { while (($file = readdir($dh)) !== false) { if($file!="." , $file!=".." , $file!=".svn") { $project_files[]=$file; } } closedir($dh); } } if($_request['pie']!=null){ if($_request['pie']==0){ $pie1=0; $pie2=1; $pie3=2; $pie4=3; } if($_request['pie']==1){ $pie1=4; $pie2=5; $pie3=6; $pie4=7; } if($_request['pie']==2){ $pie1=8; $pie2=9; $pie3=10; $pie4=11; } if($_request['pie']==3){ $pie1=12; $pie2=13; $pie3=14; $pie4=15; } } else{ $pie1=0; $pie2=1; $pie3=2; $pie4=3; } $projectname1=explode('.',$project_files[$pie1]); $projectname2=explode('.',$project_files[$pie2]); $projectname3=explode('.',$project_files[$pie3]); $projectname4=explode('.',$project_files[$pie4]); session_start(); $_session['piefilename1'] = '../data/project/'.$project_files[$pie1]; session_start(); $_session['piefilename2'] = '../data/project/'.$project_files[$pie2]; session_start(); $_session['piefilename3'] = '../data/project/'.$project_files[$pie3]; session_start(); $_session['piefilename4'] = '../data/project/'.$project_files[$pie4]; ?> <head> <title>afls issue summary</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../style/default.css" type="text/css" media="screen"> <script> function go_to_url() { document.location.href='<?php echo $base_path.$basepage;?>?pgco='+<?php echo $_request['pgco'];?>+'&pie='+<?php echo $_request['pie'];?>; } function timegreeting() { window.settimeout(go_to_url, <?php echo $_request['seq'];?> ); //milliseconds load next page. } timegreeting(); </script> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/highcharts.js"></script> <script type="text/javascript" src="../js/pie.js"></script> <script type="text/javascript"> var myfile='<?php echo $project_files[$pie1];?>'; var options1 = { chart: { renderto: 'container1', defaultseriestype: 'pie', spacingtop: 10, spacingbottom: 5, spacingleft: 5, spacingright: 5 }, title: { text: '<?php echo $projectname1[0];?>' }, plotoptions: { pie: { size:'74%', allowpointselect: false, cursor: 'pointer', showinlegend: false, datalabels: { rotation: 0, distance: 10, enabled: true, color: '#2f7ed8', formatter: function() { if(this.y == 0) return null else return this.point.name + ' [ ' + highcharts.numberformat(this.y, 0) + ' ]'; } } } }, legend: { enabled: true, layout: 'vertical', align: 'right', width: 200, verticalalign: 'middle', usehtml: true, borderwidth: 5, borderradius: 10, labelformatter: function() { return '<div style="text-align: left; width:130px;">' + this.name + '</div><div style="width:40px; text-align:right;">' + this.y + '%</div>'; } }, series : [] }; var myfile='<?php echo '../data/project/'.$project_files[$pie1];?>'; $.get(myfile,function(data) { // split lines var lines = data.split(';'); var series = { datalabels: { enabled: true, style: { color: '#000000', fontfamily: 'verdana', fontsize: '12px', lineheight: '21px' }}, data: [] }; // iterate on lines , add categories or series $.each(lines, function(lineno,line) { var items = line.split(','); series.data.push({ type:'pie', name: items[0], y:parsefloat(items[1]) }); }); options1.series.push(series); // create chart var chart = new highcharts.chart(options1); }); </script> <script type="text/javascript"> var myfile='<?php echo '../data/project/'.$project_files[$pie2];?>'; var options2 = { chart: { renderto: 'container2', defaultseriestype: 'pie', spacingtop: 10, spacingbottom: 5, spacingleft: 5, spacingright: 5 }, title: { text: '<?php echo $projectname2[0];?>' }, plotoptions: { pie: { size:'74%', allowpointselect: false, cursor: 'pointer', showinlegend: false, datalabels: { rotation: 0, distance: 10, color: '#2f7ed8', enabled: true, formatter: function() { if(this.y == 0) return null else return this.point.name + ' [ ' + highcharts.numberformat(this.y, 0) + ' ]'; } } } }, colors: [ '#4572a7', '#aa4643', '#db843d' ], series : [] }; $.get(myfile,function(data) { // split lines var lines = data.split(';'); var series = { datalabels: { enabled: true, style: { color: '#000000', fontfamily: 'verdana', fontsize: '12px', lineheight: '21px' }}, data: [] }; // iterate on lines , add categories or series $.each(lines, function(lineno,line) { var items = line.split(','); series.data.push({ type:'pie', name: items[0], y:parsefloat(items[1]) }); }); options2.series.push(series); // create chart var chart = new highcharts.chart(options2); }); </script> <script type="text/javascript"> var myfile='<?php echo '../data/project/'.$project_files[$pie3];?>'; var options3 = { chart: { renderto: 'container3', defaultseriestype: 'pie', spacingtop: 10, spacingbottom: 5, spacingleft: 5, spacingright: 5 }, title: { text: '<?php echo $projectname3[0];?>' }, plotoptions: { pie: { size:'74%', allowpointselect: false, cursor: 'pointer', showinlegend: false, datalabels: { rotation: 0, distance: 10, color: '#2f7ed8', enabled: true, formatter: function() { if(this.y == 0) return null else return this.point.name + ' [ ' + highcharts.numberformat(this.y, 0) + ' ]'; } } } }, colors: [ '#4572a7', '#aa4643', '#db843d' ], series : [] }; $.get(myfile,function(data) { // split lines var lines = data.split(';'); var series = { datalabels: { enabled: true, style: { color: '#000000', fontfamily: 'verdana', fontsize: '12px', lineheight: '21px' }}, data: [] }; // iterate on lines , add categories or series $.each(lines, function(lineno,line) { var items = line.split(','); series.data.push({ type:'pie', name: items[0], y:parsefloat(items[1]) }); }); options3.series.push(series); // create chart var chart = new highcharts.chart(options3); }); </script> <script type="text/javascript"> var myfile='<?php echo '../data/project/'.$project_files[$pie4];?>'; var options4 = { chart: { renderto: 'container4', defaultseriestype: 'pie', spacingtop: 10, spacingbottom: 5, spacingleft: 5, spacingright: 5 }, title: { text: '<?php echo $projectname4[0];?>' }, plotoptions: { pie: { size:'74%', allowpointselect: false, cursor: 'pointer', showinlegend: false, datalabels: { rotation: 0, distance: 10, color: '#2f7ed8', enabled: true, formatter: function() { if(this.y == 0) return null else return this.point.name + ' [ ' + highcharts.numberformat(this.y, 0) + ' ]'; } } } }, colors: [ '#4572a7', '#aa4643', '#db843d' ], series : [] }; $.get(myfile,function(data) { // split lines var lines = data.split(';'); var series = { datalabels: { enabled: true, style: { color: '#000000', fontfamily: 'verdana', fontsize: '12px', lineheight: '21px' }}, data: [] }; // iterate on lines , add categories or series $.each(lines, function(lineno,line) { var items = line.split(','); series.data.push({ type:'pie', name: items[0], y:parsefloat(items[1]) }); }); options4.series.push(series); // create chart var chart = new highcharts.chart(options4); }); </script> </head> <body> <?php include('header.php');?> <table border='0' width='100%'> <tr> <td width='50%' align='right' valign='top'> <?php include('pie1.php');?> </td> <td width='50%' align='right' valign='top'> <?php include('pie2.php');?> </td> </tr> <tr> <td width='50%' align='right' valign='top'> <?php include('pie3.php');?> </td> <td width='50%' align='right' valign='top'> <?php include('pie4.php');?> </td> </tr> </table> </body> </html>
Comments
Post a Comment