javascript - How to build a responsive thermometer panel using highcharts -


hey trying build thermometer panel using highcharts. way build it: build several thermometers , single thermometer(which actual column graph circle drawing in end of chart).

the thermometer factory service, called function generate chart of service in order generate thermometer graph.

so far have succeeded in above task,but component isn't responsive in laptops or tablets.

i using bootstrap , considering moving flexbox instead, need guidance responsive problem come , how solved it.

edit: i think best way handle problem unit thermometer panel 1 graph instead of 4 separated graphs, question is: how can it?

here code:

a codepen of code:http://codepen.io/barak/pen/jrdrxv

var app = angular.module("app",[]);    app.controller("mainctrl", ["$scope","thermometer",function($scope,thermometer){    $scope.title = "hello world";      var chartthermo1        = thermometer.generatechart("thermometer1","a00");      var chartthermo2        = thermometer.generatechart("thermometer2","b03");      var chartthermo3        = thermometer.generatechart("thermometer3","c04");      var chartthermo4        = thermometer.generatechart("thermometer4", "to");                               }])    app.factory('thermometer', function () {          var thermometer = {};          thermometer.generatechart = function (containerid,title) {              var chart = new highcharts.chart({                  chart: {                      marginbottom: 50,                      renderto: containerid                  },                  series: [{                      data: [70],                      type: 'column',                      pointwidth: 20,                      threshold: -40,                      borderwidth: 0,                      name: 'temp'                  }],                  credits: {                      enabled: false                  },                  legend: {                      enabled: false                  },                  xaxis: {                      labels: {                          enabled: false                      },                      linewidth: 0,                      tickwidth: 0                  },                  yaxis: {                      min: 0,                      max: 150,                      minpadding: 0,                      maxpadding: 0,                      startontick: false,                      endontick: false,                      title: {                          text: ''                      },                      tickinterval: 75,                      minortickinterval: 1,                      gridlinewidth: 0,                      minorgridlinewidth: 0,                      tickwidth: 1,                      minortickwidth: 1                  },                  title: {                      text: title                  }                }, function (chart) {                  // draw shape                  var series = chart.series[0],                      point = series.points[0],                      radius = 20;                  chart.renderer.circle(                      chart.plotleft + point.shapeargs.x + (point.shapeargs.width / 2),                      chart.plottop + series.yaxis.len + radius - 5,                      20                  )                  .attr({                      fill: series.color                  })                  .add();              });              return chart;          }          return thermometer;        });
.thermometer{      display: inline-block;      height: 280px;      width: 80px;      margin: 1em auto;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.6/highcharts.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="mainctrl">     <div class="container-fluid">      <div class="row">        <div class="col-lg-3 col-md-3">           <div id="thermometer1" class="thermometer flex-item"></div>           <div id="thermometer2" class="thermometer flex-item"></div>           <div id="thermometer3" class="thermometer flex-item"></div>           <div id="thermometer4" class="thermometer flex-item"></div>        </div>      </div>      </div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more