Hi,
Thank you for your response and sorry abt my delayed response, I'm juggling lots of things here.
Here is my entire js file for zoom pie, is it going to suffice? or are you going to need a jsfiddle, which will take me some time to get to?
I also get the same error in safari if that is any value to you...
///
var zooomPieInstance = null;
var genericPieChart = null;
function ZoomPieChart(title) {
this.title = title;
zooomPieInstance = this;
// --- Caches By Type Chart --- //
this.bind = function (data) {
$("#ReportPanel").empty();
initPie(data);
}
var dataa = null;
function getZoomData(pieId, limit, offset, successCallback, errorCallback) {
//let's have a custom error handling code
var myErrorCallback = function () {
if (window.console) console.log("There was an error while requesting data for pie '" + pieId + "'");
errorCallback();
};
updateBC();
if (pieId == null || pieId === undefined) return;
app.service.getData(dataa.ApiController, dataa.MethodName, dataa.MethodType, dataa.ReportFilters,
function (data) {
dataa = data;
if (data.Models.length > 0 && genericPieChart._impl.title.settings.text.indexOf("Full") < 0)
genericPieChart._impl.title.settings.text += " is " + data.Models[0].Census + " | " + data.Models[0].PercentFull + "% Full " + " | " + data.Models[0].AvgCensus + " Average Census"
// $('#breadCrumbs').replaceWith($('#breadCrumbs').html(data.ReportFilters.BreadCrumHtml));
successCallback({ subvalues: data.Models });
}, function (a, error) { errorCallback(a, error); }
);
}
function zoomInfo(data) {
var percent = genericPieChart._impl.selection.currentSlice != null ?
genericPieChart._impl.selection.currentSlice.percent.toFixed(2)
:genericPieChart._impl.scene.pies[genericPieChart._impl.scene.pies.length - 1].parentSlice.percent.toFixed(2);
return "<h3>" + data.name + '</h3><a><b>' + data.text + "<br>Percent: " + percent + "%</b></a>";
}
function zoomStyle(slice, data) {
slice.insideLabel.text = slice.percent.toFixed(2) + "%";
slice.label.text = data.name;
}
function updateBC() {
var activeItems = genericPieChart.getActiveSlices();
var goto = ['1'];
var html = "<a href='javascript:zooomPieInstance.goTo(" + ko.toJSON(goto) + ")'>" + $('#ddlFacList')[0][$('#ddlFacList')[0].selectedIndex].text + " </a>";
for (var i in activeItems) {
if (activeItems[i].data !== undefined) {
goto.push(activeItems[i].data.name);
html += "> <a href='javascript:zooomPieInstance.goTo(" + ko.toJSON(goto) + ")'>" + activeItems[i].data.name + "</a>";
}
}
document.getElementById("breadCrumbs").innerHTML = html;
}
function updated(event) {
updateBC();
}
function clicked(event) {
if (event.clickOrigin == null) return;
if (event.clickOrigin == "back") {
genericPieChart.updateSettings({ interaction: { mode: "drilldown" } });
dataa.ReportFilters.BreadCrumValues.pop();
}
else {
if (event.slice.data.stop)
genericPieChart.updateSettings({ interaction: { mode: "select" } });
else {
genericPieChart.updateSettings({ interaction: { mode: "drilldown" } });
if (event.slice.data.name != null)
dataa.ReportFilters.BreadCrumValues.push(event.slice.data.name);
}
}
}
this.constructor.prototype.goTo = function (pielevel) {
var activeItems = genericPieChart.getActiveSlices();
var curOffset = pielevel.length - activeItems.length;
if (curOffset < 0) curOffset = -(curOffset);
genericPieChart.setPie(pielevel, 0);
curOffset++;
for (i=0; i < curOffset; i++) {
dataa.ReportFilters.BreadCrumValues.pop();
}
}
var col1 = [
"#0ca3c9"
];
var col = [
"#0ca3c9",
"#02546a",
"#116f8b",
"#00a9d3",
"#95d9f2",
"#662C54",
"#676AA7",
"#D63A39",
"#00323f"];
function initPie(data) {
data.ReportFilters.BreadCrumValues = [];
dataa = data;
var title = "Census on " + $('#Start___Calendar').val() + ($('#Start___Calendar').val() == $('#Stop___Calendar').val() ? "" : " to " + $('#Stop___Calendar').val());
$("#ReportPanel").empty();
genericPieChart = new PieChart({
container: document.getElementById("ReportPanel"),
area: { height: 650 },
interaction: { others: { enabled: false } },
pie: {
style: {
colorDistribution: "gradient",
sliceColors: col1
},
theme: "smoothy"
},
data: { dataFunction: getZoomData },
info: { contentsFunction: zoomInfo },
slice: { styleFunction: zoomStyle },
title: { text: title },
events: {
onClick: clicked
,onChartUpdate: updated
},
navigation: { initialDrilldown: ['1'] }
});
}
}