javascript - How can I get this chart to display next to data table in CSS? -
please refer jsfiddle: google chart api example
is there obvious css reveals how can chart display right of data table instead of below it? or chart location being controlled javascript? can please provide solution? tried various css methods split chart data table no luck.
the chart display in browser couldn't work in jsfiddle.
(p.s. javascript in jsfiddle above--it's pretty lengthy...)
here's html:
<!doctype html> <head> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/attc.googlecharts.js"></script> <link rel="stylesheet" type="text/css" href="cs/attcsandbox.css"> </head> <body> <div class="maincontent"> <table class="left" title="attendance percentages" id="attendancepercentages" summary="piedescription" data-attc-createchart="true" data-attc-coldescription="piedescription" data-attc-colvalues="pievalues" data-attc-location="attendancepercentagespie" data-attc-hidetable="true" data-attc-type="pie" data-attc-googleoptions='{"is3d":true}' data-attc-controls='{"showhide":true,"create":true,"charttype":true}' > <thead> <tr> <th id="piedescription">description</th> <th id="pievalues">sessions</th> <th>%</th> <th>other</th> </tr> </thead> <tbody> <tr> <td>present</td> <td>405</td> <td>89</td> <td>5</td> </tr> <tr> <td>missing</td> <td>1</td> <td>0</td> <td>4</td> </tr> <tr> <td>authorised absent</td> <td>36</td> <td>7</td> <td>3</td> </tr> <tr> <td>unauthorised absent</td> <td>1</td> <td>0</td> <td>2</td> </tr> <tr> <td>late</td> <td>30</td> <td>2</td> <td>1</td> </tr> </tbody> </table> <div class="right" id="attendancepercentagespie"></div> </div> </body> </html> here's css:
/* @media screen { */ /* override css in main */ body{ margin-left: 5px; margin-right: 5px; margin-top:5px; width:100%; position:relative; left:0px; top:0px; z-index:0; background-color:#ffffff; color:#47535e; font-size:0.7em; font-family: calibri, sans-serif; } div.left { border: 2px solid #cfbfaf; width: 49%; float: left; } div.right { border: 2px solid #cfbfaf; width: 49%; float: right; } div.maincontent{ margin-left: 20px; margin-right: 20px; width:400px; } table{ margin-left: auto; margin-right: auto; width:98%; border:1px solid #e6e6e6; border-radius:5px; box-sizing: border-box; background-color:#f6f6f6; border-collapse: collapse; } table td,table th{ border:1px solid #e6e6e6; border-top:1px solid #ffffff; } table th{ background-color:#ffffff; } /*attc classes*/ /*attc classes*/ div.attccontrols{ width:100%; border:1px solid #e6e6e6; border-radius:5px; box-sizing: border-box; background-color:#f6f6f6; } div.attccontrols ul{ overflow:hidden; padding:2px 2px 2px 2px; margin:0px; } div.attccontrols ul li{ margin:0px; padding:0px 0px 0px 10px; list-style-type: none; display: inline; float:right; clear:none; } div.attccontrols ul li a{ border:1px solid #9cdff7; border-radius:3px; box-sizing: border-box; background-color:#86d6f5; padding:2px; color:white; text-decoration:none; display:inline-block; background-image:none; font-weight:normal; } div.attccontrols ul li a:hover{ border:1px solid white; color:#47535e; } div.attccontrols ul li fieldset{ border:1px solid #9cdff7; border-radius:3px; box-sizing: border-box; background-color:#86d6f5; padding:2px; margin:0px; color:white; text-decoration:none; } div.attccontrols ul li fieldset label{ padding-right:5px; } div.attccontrols ul li fieldset select{ font-size:1em; padding:0px; margin:0px; } input.attceditcheckradioboxes{ display: block; margin-left: auto; margin-right: auto; } /* } */
there couple of things first of specifying div.left therefore class on table never inherits properties it's class name of left. secondly table has width of 98% means going take pretty it's whole block , force content above or below. ideally want right , left classes apply widths @ 49% should ok borders add 2px left , right equaling total of 4px per container , should in essence come out 1% in 400px wide .maincontent area browsers may not respect size may have reduce widths accommodate borders.
Comments
Post a Comment