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.