Reputation: 1267
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
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
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