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,
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.
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.
If you need more help while investigating this on your own, please do not hesitate to contact me. I will be glad to help.
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 there is a mistake in your code it is hard to find since you provided the initialization code for chart with ID=revcostchart, while in your .cshtml file the <div> container is set different ID. I guess these are different charts and the configuration code you have provided is not referred to the chart that you load in the dialog box.
However if you had set the verticalZoomable and horizontalZoomable properties of the #igReportChart chart you should not experience such issues.
I have changed my sample to use the jQuery dialog window to display the chart and zooming works fine. I have also changed the code a little bit so the chart is initialized within the loadChart function - I did this because I see in your code that you destroy the chart widget on when the dialog is closed. Please refer to it for a demonstration, the sample is attached below.
Please do not hesitate to contact us if you need further assistance.