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.