javascript - How can I have a responsive graph with highcharts? -


basically, have container divided col-xs-3, col-xs-7(which holds graph), , col-xs-2 , , 3 tables underneath same bootstrap classes(col-xs-3,...). on container have graph created highcharts, , want aligned table underneath(as shown purple arrows),this want result, , responsive when window width changes: enter image description here

right have this:

i tried approches moving graph left, scale graph on different media queries, these work on specific width.

highcharts.chart('container', {                  chart: {                      renderto: ''                  },                  title: {                      text: ''                  },                    credits: {                      enabled: false                  },                    xaxis: {                      linewidth: 0,                      minorticklength: 0,                      ticklength: 0,                      labels: {                          rotation: -45,                          enabled: false                      },                      //maxzoom: 24 * 3600 * 1000 * 30, // fourteen days                      title: {                          //text: 'sample'                      }                  },                  yaxis: {                      min: 0,                      max: 150,                      tickinterval: 50,                      gridlinewidth: 0,                      linewidth: 4,                      plotlines: [{                          color: '#ccc',                          dashstyle: 'dash',                          width: 2,                          value: 100                      }],                      title: {                          text: ''                      },                      labels: {                          style: {                              color: '#ccc'                          },                          formatter: function () {                              if ('100' == this.value) {                                  return '<span style="fill: #000;">' + this.value + ' %</span>';                              } else {                                  return this.value + ' %';                              }                          }                      }                  },                  tooltip: {                      shared: true,                      formatter: function () {                          var result = '<b>' + highcharts.dateformat('%b %e, %y', this.x) + '</b>';                          $.each(this.points, function (i, datum) {                              result += '<br />' + math.round(datum.y) + ' %';                          });                          return result;                      }                  },                  legend: {                      enabled: false,                  },                  plotoptions: {                      line: {                          marker: {                              enabled: false                          }                      }                  },                  series: [{                      name: '',                      data: [[0, 50.57],                              [10, 50.63],                              [20, 75.14],                              [30, 100.08],                              [40, 40.28],                              [130, 68.25],                              [140, 125.01], ],                      linewidth: 5,                      threshold: 99,                      step: 'center',                      tooltip: {                          valuedecimals: 2                      }                  }]              });
.empty {    background-color: #f3f3f3;    height: 250px;  }    .row {    margin: 10px 0;  }
<script src="https://code.highcharts.com/highcharts.js"></script>  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <div class="row">      <div class="col-xs-3 empty"></div>        <div class="col-xs-7" style="">        <div id="container" style="height: 250px; width: 100%"></div>      </div>        <div class="col-xs-2 empty"></div>    </div>    <div class="row">      <div class="col-xs-3 empty"></div>        <div class="col-xs-7" style="">          <div id=""></div>      </div>        <div class="col-xs-2 empty"></div>    </div>  </div>

here jsfiddle of code

i solved making few changes chart. these things changed:

in js file: 

chart: {            renderto: 'chartcontainer'        }

in html file:

 <div id="container" style="height: 250px;width:calc(100% + 90px);"></div>

in css file:

.highcharts-container {     left: -70px; }

here jsfiddle.


-

Comments

Post a Comment

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

Image
i'm using qt framework build graphical user interface. use qgridlayout position qwidgets neatly. gui looks this: my application regularly adds new widgets gui @ runtime. these new widgets not added @ end of qlayout, somewhere in middle. the procedure bit cumbersome. applied on figure above, need take out widg_c , widg_d , ... qgridlayout. next, add widg_x and widg_y , , put other widgets again. how remove widgets qgridlayout: for in reversed(range(mygridlayout.count())): self.itemat(i).widget().setparent(none) ### as long you're dealing small amount of widgets, procedure not disaster. in application display lot of small widgets - perhaps 50 or more! application freezes second while procedure ongoing, annoying user. there way insert widgets somewhere in qlayout, without need take out other widgets? edit: apparently solution qvboxlayout simple. use function insertwidget(..) instead of addwidget(..) . docs can found link: http://doc.qt.io/qt-5/qboxlayou
Read more

python - serve multiple gunicorn django instances under nginx ubuntu -

i need serve 2 webs apps (django) on gunicorn under different domain names using nginx on ubuntu. started using tutorial: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04 it worked fine 1 using that. tried same thing second gives me 502 gateway second domain. tried following tutorial: http://michal.karzynski.pl/blog/2013/10/29/serving-multiple-django-applications-with-nginx-gunicorn-supervisor/ i'm @ part run gunicorn start script: sudo bin/gunicorn_start i response: starting webuildblack root traceback (most recent call last): file "/home/devin/webuildblack/bin/gunicorn", line 7, in <module> gunicorn.app.wsgiapp import run importerror: no module named 'gunicorn.app'; 'gunicorn' not package you have named program gunicorn.py gunicorn -package. rename file , remove gunicorn.pyc file.
Read more

module - Prestashop displayPaymentReturn hook url -

i new prestashop developer , trying create paymentmodule. have got show payment method can not proceed purchase because not know hot works. does know should redirect run hooddisplaypaymentreturn method? i happy if explain me complete navigation map make purchase. anyway, can find relation between hooks , pages? when have new module payment rely on simplest provided prestashop: bankwire. inside can find 3 hooks. hookpayment: public function hookpayment($params) { if (!$this->active) return; if (!$this->checkcurrency($params['cart'])) return; $this->smarty->assign(array( 'this_path' => $this->_path, 'this_path_bw' => $this->_path, 'this_path_ssl' => tools::getshopdomainssl(true, true).__ps_base_uri__.'modules/'.$this->name.'/' )); return $this->display(__file__, 'payment.tpl'); } hookdisplaypaymenteu: public fun
Read more