3

I'm using a Flot line chart in a BB10 WebWorks application that is also using the bbUI.js toolkit.

When running the app with the Ripple emulator the chart size is right (1000x500). However, when I deploy the app to the device (Dev Alpha) the chart size is too large (2243x1121).

Using the Web Inspector I found that the canvas elements have width and height attributes that exceed the placeholder size:

<div id="weight-chart" style="width: 1000px; height: 500px; 
     padding: 0px; position: relative;">
  <canvas class="flot-base" 
     style="direction: ltr; position: absolute; left: 0px; top: 0px; 
            width: 1000px; height: 500px;" 
     width="2243" height="1121">
  </canvas>
  <canvas class="flot-overlay" 
    style="direction: ltr; position: absolute; left: 0px; top: 0px; 
           width: 1000px; height: 500px;" 
    width="2243" height="1121">
  </canvas>
</div>

This is the HTML page fragment:

<div data-bb-type="screen" data-bb-scroll-effect="on" id="chart-page" 
     data-bb-indicator="true">

  <!-- chart goes here: -->
  <div id="weight-chart" style="width:1000px;height:500px;"></div>

  <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

And this is the javascript call to Flot that is done ondomready:

bb.init({onscreenready: function(element, id, params) {
  }, 
  ondomready: function(element, id, params) {
    if (id == 'chart') {
      chartDataset = ...
      chartOptions = ...
      $.plot($("#weight-chart", element), chartDataset, chartOptions);
      element.getElementById('chart-page').refresh();
    }
});

Do you have any clue on what is happening?

gparis
  • 1,247
  • 12
  • 32
  • Is the placeholder size static, or do you change that via JS at some point after the page has loaded? – DNS Feb 01 '13 at 02:02
  • No, the placeholder size is static. – gparis Feb 01 '13 at 10:58
  • Are you using the latest bbUI.js? Can you check what it is putting in for the viewport size? Could Flot be changing that value on you, adjusting it's size from the screen density? From the values that it's getting it seems like the size is wrongly trying to adjust to the screen density of BB10. – Tim Windsor Mar 01 '13 at 22:57

2 Answers2

0

All you need is to find this line in the JS:

this.pixelRatio = devicePixelRatio / backingStoreRatio;

and replace with:

this.pixelRatio = 1;
mr.VVoo
  • 2,265
  • 20
  • 30
Mohd Hisyam
  • 1
0

Your problem is implement chart in different size, so you need to resize. You should use together :

jquery.flot.js 
jquery.flot.resize.min.js
enhaka
  • 85
  • 8