Guys,
I have my igDataChart in a popout dialog box so that I can make the chart bigger.
Everything is working great except for the part where the chart zooms. I've set both verticalZoomable and horizontalZoomable to true. I can see the selection area when you use the mouse cursor but it doesn't zoom.
Here is my code. Am I missing something? Can you give me any suggestions on how to get it working?
$("#revcostchart").igDataChart({ width: "500px", height: "350px", verticalZoomable: true, horizontalZoomable: true, dataSource: d, axes: [ { name: "catX", type: "categoryX", label: "Month" }, { name: "numY", type: "numericY", minimumValue: 0, formatLabel: function (val) { return '$' + val; } } ], series: [ { name: "Reviewer Costs", title: "ReviewerCosts", type: "column", xAxis: "catX", yAxis: "numY", valueMemberPath: "Value", showTooltip: true, isDropShadowEnabled: true, isHighlightingEnabled: true, isTransitionInEnabled: true, tooltipTemplate: "tooltipTemplate5", } ] });
Thanks!
Hello Ryan,
Your code seems fine. I believe the reason for not zooming lies outside of this portion. Could you please provide the other part of your code or a small isolated sample ?
Meanwhile you can check the attached sample which opens the chart in a popup - everything including the zoom works fine on my machine. Please refer to it and let me know if it helps.
Thanks for the example. I noticed you were opening a new window with your chart and mine is actually opening up in a new dialog box.
Here is the code in my *.cshtml view file.
<div id="viewChartPopup" style="display: none;"> <div id="igReportChart"></div></div>
Here is the code in my js file.
function loadChart()
{
loadchartdata();
$("#viewChartPopup").dialog({ title: "My Chart data", resizable: false, modal: true, width: 'auto', height: 'auto', closeOnEscape: false, buttons: [ { text: "Close", click: function () { $("#igReportChart").igDataChart("destroy"); $(this).dialog("close"); } } ] });
}
When I use the dialog popup I cannot use the zoom options for some reason.
Hristo -
Thanks for the good example there. I like the notes that you put in the file.
My loadchartdata() function basically queries the server for the chart information and then creates the chart itself.
After looking over your code and putting my code in a standalone project I actually believe that it has to do with a CSS function as I can get it to work in the standalone application, but not my actual code.
I'll reply back if/when I resolve the issue on my end.
Thanks for the help.
If you need more help while investigating this on your own, please do not hesitate to contact me. I will be glad to help.
Hey guys, I know it has been a while since this topic has been commented on, but is there any kind of jquery or css code that would stop the zoom from working? I am back on this task and I am still having issues getting it to work on my MVC 5 application using jquery.
IgniteUI controls are strongly recommended to use along with reference to the modernizr library. There are cases when not referencing this library causes issues with some features. Please make sure that you are referencing it:
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
If issue still persists please share more details on your scenario (does issue persist on all browsers, is there any error message in the browser console when trying to zoom, etc.) that would help troubleshooting.
I've been checking around and the problem persists in any broswer I try. So far I've tried IE, Chrome, and Safari.
I do have a reference to the modernizr library as we use many infragistics controls on our pages.
Currently there is no error displayed. The charts load up fine but whenever you try to use any kind of zoom function, it just doesn't work. I am still trying to figure out what could be causing it and now I wonder if it is some kind of CSS issue or something.
I believe isolating will eventually lead you to the root cause of the issue. It will be highly appreciated it if you then share it here so that other community members could benefit from that information.
I've tried a few things and I was able to create a sample that actually worked as intended. This leads me to believe that there is a problem else where, say layout page, that is causing me this grief. I am still going through code trying to find the issue which I think is actually also related to a support ticket I have open for another item.
I will inform you guys if and when I ever find the answer to the problem. ha.
I am just following up to check if you had the time to prepare a sample for investigation.
I have reopened this case for you to facilitate tracking the progress.
Please try to provide your project or isolate the issue in a sample that I will investigate for you.