gparis
gparis

Reputation: 1267

The canvas size of a Flot chart is too large in a BlackBerry bbUI application

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?

Upvotes: 3

Views: 2167

Answers (2)

enhaka
enhaka

Reputation: 83

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

Upvotes: 0

Mohd Hisyam
Mohd Hisyam

Reputation: 1

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

this.pixelRatio = devicePixelRatio / backingStoreRatio;

and replace with:

this.pixelRatio = 1;

Upvotes: 0

Related Questions