Hi, I'm testing the igDataChart on my mobile (Android 2.3.6 (on Opera, FireFox and the native browser)) and I see that I can't drag/move the window when I interact with the chart.
Is there a property that allow this ?
There is the DefaultInteraction attribut but that not seems to work...
<%= Html.Infragistics().DataChart<Mesure>(Model) .ID("chart") .Width("320px") .Height("500px") .Legend(legend => legend.LegendType(LegendType.Legend).ID("legend1")) .VerticalZoomable(false) .HorizontalZoomable(false) .DefaultInteraction(InteractionState.DragPan) .Axes(axes => { axes.CategoryX("xAxis"). Label(item => item.Annee); //.LabelTextColor("white").LabelLocation(AxisLabelsLocation.InsideTop); //.Stroke("blue").MajorStroke("blue"); //Grille //.Strip("blue");//bgcolor une stroke sur deux. axes.NumericY("yAxis"); //.LabelTextColor("white").LabelLocation(AxisLabelsLocation.InsideLeft); //.Stroke("blue").MajorStroke("blue"); //Grille; }) .Series(series => { series .Line("Classement") .XAxis("xAxis").YAxis("yAxis") .ValueMemberPath(item => item.Classement) .Title("Classement") .ShowTooltip(true) .TooltipTemplate("InfoBulleChart") //.Brush("lime") .Thickness(2); //series ... }) //.PlotAreaBackground("black") .DataBind() .Render() %>
Thanks in advance.
Jérôme.
Hi,
You have set VerticalZoomable and HorizontalZoomable to false in the above. If these are false then the chart will not react to zoom and pan requests from the user. Do you have modernizr referenced on that page? Some of the chart's mobile interactions (for example the overview pane) don't get enabled unless modernizr detects a touch environment.
DefaultInteraction defines whether your mouse or touch input will pan the view by default, or draw the zoom rectangle. When the chart detects a touch environment this will default to dragPan. We don't support a pinch/zoom gesture in android in v1 (it is supported in iOS, though), from what I recall. But you can pan, and you can zoom the chart by either double tapping the chart, or via the use of the overview pane, which is enabled by setting OverviewPlusDetailPaneVisible to visible.
Please note, that the overview pane will not be configured for proper use in a touch environment unless the chart is in touch mode. If you have modernizr referenced, this should be the case.
-Graham
hi, ok, I understand now, if I zoom on the chart, then I can pan/drag with the click + pan/drag key (that works).
But what I was thinking is to move all the page when I touch the chart, like if I touch on the side of the chart.
Sorry for my english.
Unfortunately the chart will handle your touch events even if you can't pan, in the current version. This is reported as a bug currently.
What you could do to make sure the chart doesn't try to handle the touch events, in the meantime, is to put a transparent DOM element on top of it. This would, of course, prevent any interation with the chart, though.
Its actually based on some samples work that I did, so if you have any questions about it you could direct them at me or Mihail.
I think you'll find this blog post useful: http://es.infragistics.com/community/blogs/mihail_mateev/archive/2012/08/20/how-to-add-annotations-to-the-javascript-and-html-in-infragistics-jquery-chart.aspx
Hi Graham,
I am evaluating the jQuery controls and have a question related to drawing a transparent DOM element over the Chart.
(By the way, I am an experienced developer but new to web development especially HTML5/CSS3/JavaScript, jQuery. So, my questions may be very basic and I'd appreciate a detailed response).
How do I put a transparent DOM element canvas over the igDataChart?
I've a requirement to make the chart (data points) adjustable, meaning allow the user to change a data point in the series with a mouse (by holding the mouse up/down) or touch (touch and drag the data point up/down). (I see that using motion frame work, I can notify the add, change or remove items, but I don't see support for adjusting data point interactively/directly on the chart using mouse or touch).
I believe one of the options to implement this feature is by putting a transparent DOM element canvas over the igDataChart and overlay an input element like a slider over the column (in case of a column series). And on slider change, the notify set item can be called on igDataChart.
How do I get the x, y co-ordinates of a column or all the columns in a series from the igDataChart, so that I can put a slider element over the each column in the transparent DOM element canvas?
Also, this transparent DOM element canvas over the igDataChart can be used to allow free-form annotation over the chart and once it is annotated the image can be saved.
Please let me know.
Thanks.
B.Manohar