javascript - Selecting a single HighCharts container causes other containers to change position -
i using highcharts, , seeing weird functionality when selecting 1 of charts.
if , if select top right gauge, causes other gauges move position. other gauges work fine.
i having trouble figuring out why happening, , hoping point out missing.
my end uses python flask module, html uses jinja2 framework, , javascript.
front.html
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/solid-gauge.js"></script> <link rel="stylesheet" type="text/css" href=" {{url_for('static',filename='style.css')}}"/> </head> <body id="body" <div class="header"> <span id="headertext">current isis connections </span> </div> <div id="gaugetable"> <div id="workgroup-01" class="gaugecell"> </div> <div id="workgroup-02" class="gaugecell" ></div> <div id="workgroup-04" class="gaugecell"></div> <div id="workgroup-05" class="gaugecell"></div> <div id="workgroup-06" class="gaugecell"></div> <div id="workgroup-03" class="gaugecell"></div> <div id="workgroup-3a" class="gaugecell"></div> <div id="workgroup-07" class="gaugecell"> </div> </div> <script type="text/javascript"> var workgroups =['workgroup-01','workgroup-02','workgroup-03','workgroup-3a','workgroup-04', 'workgroup-05','workgroup-06','workgroup-07']; $(function () { var gaugeoptions = { chart: { type: 'solidgauge' }, title: 'test', pane: { // positioning center: ['50%', '85%'], // img size size: '100%', // full circle/half circle startangle: -90, endangle: 90, // gauge coloring background: { backgroundcolor: (highcharts.theme && highcharts.theme.background2) || '#000', // inner semi circle sizing innerradius: '60%', outerradius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // value axis yaxis: { stops: [ // set limits coloring [0.1, '#55bf3b'], // green [0.5, '#dddf0d'], // yellow [0.9, '#df5353'] // red ], // outside line buffer linewidth: 0, // idk minortickinterval: null, // idk tickpixelinterval: 400, //idk tickwidth: 0, title: { // title location y: -70 }, labels: { // bottom label offset y: 16 } }, plotoptions: { solidgauge: { datalabels: { y: 15, borderwidth: 0, usehtml: true } } } }; // gauges // // // for( in workgroups){ $('#'+workgroups[i]).highcharts(highcharts.merge(gaugeoptions, { yaxis: { min: 0, max: 200, title: { text: workgroups[i] } }, credits: { enabled: false }, series: [{ name: workgroups[i], data: [0], datalabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((highcharts.theme && highcharts.theme.contrasttextcolor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">clients</span></div>' }, tooltip: { valuesuffix: ' clients' } }] })); } } ); function get_gauge_data(){ $.get('get_gauge_data', function(returneddata){ $.each(returneddata, function(key,value){ for(i in workgroups){ divid = "#"+workgroups[i]; var chart = $(divid).highcharts(), point, newval, inc; if (chart) { point = chart.series[0].points[0]; newval = value[workgroups[i]]; } point.update(newval); } }); } ); } $(document).ready(function() { //trigger repeating calls get_gauge_data(); setinterval(get_gauge_data, 5000); }); var highcharts = document.getelementsbyclassname("gaugecell"); var highchartslistener = function(){ for(var = 0;i<highcharts.length;i++){ if(this == highcharts[i]){ $(this).addclass("selected"); }else{ $(highcharts[i]).removeclass("selected"); } } } for(var = 0;i<highcharts.length;i++){ highcharts[i].addeventlistener('click', highchartslistener,false); } </script> </body> </html> styles.css
/* reset browser defaults */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; border: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* **************************************************************************************** */ /* main body formatting */ body { background-color:#d7d5c9; font-family: verdana; text-align: left; } /* **************************************************************************************** */ /* header , footer */ .header { background-color: #4c453d; color:#ff6c00; font-size:24px; text-indent: 20px; padding:8px 25px 50px; } /* .footer{ background-color: #4c453d; color:#ff6c00; text-indent: 20px; height: 20px; width: 100%; font-size:12px; } /* manually set width of 1st/status column it's big enough , fixed */ .footer #status { width:70px; } */ /* **************************************************************************************** */ /* gauge formatting */ .test{ border-collapse:collapse; margine: 5px; height: 450px; width: 900px; } #gaugetable{ border-collapse: collapse; margin: 5px; height: 450px; width: 900px; } .gaugecell{ border-width:4px; border-color:gray; border-style:solid; padding: 0px; height: 200px; width: 200px; float:left; } .selected { border: 3px solid #0e5342; background-color: #a8db92; } distorted img
i think have couple options.
instead of floats, use
display: inline-block, removewhite-space: nowrapparent. fit them in parent div.the added green border 3x, while normal border 4px. changing 4px keeps dimensions same , retains layout.
using "clearfix" on last item in row reset height fit.
Comments
Post a Comment