Hi,
I working on jquery charts for iPad web app. After making zooming properties true, its working fine on desktop browsers.But on iPad simulator, I am able to zoom out but not able to zoom in easily. With small pinch out , the chart is going out of view and I've to struggle a lot to bring it back. Also, tooltip is not always working. At some places its showing and at some places its not showing.
Note: when horizontal and vertical zoom is false then tooltip is working fine.
Do we have any proper solution for this or should I make the horizontal and vertical zoom property false.
Thanks,
Bipul Kumar
Bipul,
I have tried to replicate this in the iPad simulator, but have been unsuccessful. Are you using an option + mouse drag to simulate the pinch/spread? Do you have an html page that replicates the issue? It could be a problem with the environment around the chart, or the specific chart content.
-Graham
Hi Graham,
I'm using windows keyboard and using windows+alt+mouse left click to simulate pinch/spread. I even tried on the device. But, there also the experience was frustrating. The code which i am using is very basic one given in the documentation for bar chart.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.tmpl.min.js" type="text/javascript"></script>
<script src="js/infragistics.loader.js" type="text/javascript"></script>
<script id="tooltipTemplate1" type="text/x-jquery-tmpl">
<div id="tooltip" class="ui-widget-content ui-corner-all">
<span id="tooltipValue">(lbl_seriesValue): ${item.Value1}</span>
</div>
</script>
<script id="tooltipTemplate2" type="text/x-jquery-tmpl">
<span id="tooltipValue">$$(lbl_seriesValue): ${item.Value2}</span>
<script id="tooltipTemplate3" type="text/x-jquery-tmpl">
<span id="tooltipValue">$$(lbl_seriesValue): ${item.Value3}</span>
<script type="text/javascript">
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igDataChart.Category"
});
$.ig.loader(function () {
var currData, currDataSource, doGeneration;
doGeneration = function () {
var num = 10, data = [];
for (var i = 0; i < num; i++) {
var val1 = Math.round(Math.random() * 100);
var val2 = Math.round(Math.random() * 100);
var val3 = Math.round(Math.random() * 100);
data[i] = { Label: i.toString(), Value1: val1, Value2: val2, Value3: val3 };
}
currData = data;
currDataSource = new $.ig.DataSource({ dataSource: currData });
doGeneration();
$("#chart1").igDataChart({
width: "500px",
height: "500px",
dataSource: currDataSource,
legend: { element: "legend1" },
axes: [{
name: "xAxis",
type: "categoryX",
label: "Label"
},
{
name: "yAxis",
type: "numericY"
}],
series: [{
name: "series1",
title: "BMW",
type: "column",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Value1",
showTooltip: true,
tooltipTemplate: "tooltipTemplate1"
}, {
name: "series2",
title: "Audi",
valueMemberPath: "Value2",
tooltipTemplate: "tooltipTemplate2"
name: "series3",
title: "Mazda",
valueMemberPath: "Value3",
tooltipTemplate: "tooltipTemplate3"
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
$("#chart2").igDataChart({
legend: {element: "legend2"},
type: "numericX"
type: "categoryY",
type: "bar",
$("#seriesType").live('change', function (e) {
$(".chartWrapper").hide();
$("." + $(this).val()).show();
<style type="text/css">
#chart1, #chart2
position: relative;
float: left;
margin-right: 10px;
#legend1, #legend2
.options
font-size: 0.857em;
line-height: 1.429em;
margin-bottom: 15px;
</style>
</head>
<body>
<div class="options">
$$(txt_type):
<select id="seriesType">
<option value="column" selected="selected">$$(sel_column)</option>
<option value="bar">$$(sel_bar)</option>
</select>
<div class="chartWrapper column">
<div id="chart1">
<div id="legend1">
<div class="chartWrapper bar" style="display: none">
<div id="chart2">
<div id="legend2">
</body>
</html>
If you could find a solution , it would be a great help for me.
Thanks Graham for your suggestions.
When I used the latest modernizer , it started working fine. And for the tooltip I am using Crosshair.
-Bipul
I would also make sure you are using the latest service release of the product, as there have been a few fixes made to the touch support since the initial release of the product.
I'm still not sure if I'm seeing the behavior you are referencing. The only behavior that seems to come close is that if you let both fingers stray off the chart while doing a zoom interaction Safari will stop targetting the control with the spread interaction and so it will stop zooming. This seems to be easier to do with the simulator because the positioning of the "fingers" relative to the center of the interaction seems to be quite erratic.
If this isn't what you are experiencing, could you send along some sort of video so that I can determine how what you are seeing differs from what we are seeing?
Also, regarding tooltips. On the touch platform it is intended that you use the touch tooltips that are provided by the drag crosshair. This is enabled by setting crosshairVisibility: "visible". You then do a press and hold until the crosshair shows up, and you can drag this around to examine the values of all the series as the crosshair passes them. If you don't want the crosshairs visible on the desktop, I'd recommend using modernizr to only enable them if you are on a touch platform. In fact, from what I recall, I think the chart turns them on in a touch environment by default if you have modernizr referenced.
This also puts the chart into touch mode such that the OPD functionality is tailored for a touch experience, so it is a good thing to reference modernizr on a page using the chart. Earlier versions of the chart will sometimes show a tooltip on a tap of a series, but this was not reliable compared to the drag tooltips, especially since most of the series make for very small touch targets, so the drag tooltips are designed to be what is used in a touch environment.
You also have the option of using the events raised by the series to display your own overlay information about the points interacted with, if so desired.