drill down on data point click

[priyanksheth]

hi, how can i make clickable data point? on click x value should go code behind and query data which will be displayed as bar chart on the same place with back button. on back button click again the original chart will displayed

[Shashi Ranjan]

@priyanksheth,

Please take a look at this Gallery Page for an example on drilldown chart.

—
Shashi Ranjan
Team CanvasJS

[priyanksheth]

Hi Shashi

I did check the link. There is only two click on two segment of the doughnut chart. My requirement is little different. I have a chart of X-Date and Y-Time with a SplineArea. Now If i click on any point then it should take the X value and pass it behind the code for a SQL query and final data of that particular date(day).

So ideally in your chart you are calling one function to handle predefined option data but in my case i need to call two function one is options and other is actual data from code behind.

Pl. help me in this.

Regards
Priyank

[priyanksheth]

Hi

Expecting revert on this.. Pl. help

[Shashi Ranjan]

Priyank,

Drilldown chart can be achieved irrespective of chart-types, changing Pie to spline also works fine.

Kindly share sample project along with sample database over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you out.

—
Shashi Ranjan
Team CanvasJS

[priyanksheth]

Hi Shashi

I have uploaded chart on jfiddle https://jsfiddle.net/priyanksheth/qwgr49kf/13/. Pl. check and let me know whats wrong in this chart.

Data for Returning Visitors is showing blank chart

regards
Priyank

[Vishwas R]

Priyank,

You seemed to be passing string to x-value within Returning Visitors data because of which it’s not rendering chart properly. As of now, CanvasJS supports number and date-time in x-value. You can use label to pass string that has to be displayed over axis. Please take a look at this updated JSFiddle.

It would help us understand your scenario better if you could share us working JSFiddle that reproduces the issue. The JSFiddle that you have shared doesn’t seems to be working.

—
Vishwas R
Team CanvasJS

[priyanksheth]

Hi Shashi

Thanks for your reply. I have done the changes and now drill down is working for me. in drill down chart when click on button how can we load only chart and not the complete page post back.

[priyanksheth]

Hi Shashi

I have resolved above problem as well. Now new thing is happening. I am calling function on data point click which is as given below. the problem is in visitorsChartDrilldownHandler if I enabled alert(”) then chart is plotting but If I comment that alert chart is not plotting. I am failed understand the reason. Kindly help me out.

click: onClick,

function visitorsChartDrilldownHandler(e) {
pageViewsSplineAreaChartI = new CanvasJS.Chart(“inq”, inqDrilldownedChartOptions);
pageViewsSplineAreaChartI.options.data = LineChartData[e.dataPoint.name];
pageViewsSplineAreaChartI.options.title = { text: e.dataPoint.name}; //text: e.dataPoint.name }
console.log(e.dataPoint.name);
alert(”);
//setInterval(pageViewsSplineAreaChartI.render(),50000);
pageViewsSplineAreaChartI.render();
$(“#backButton”).toggleClass(“invisible”);
}

$(“#backButton”).click(function () {
$(this).toggleClass(“invisible”);
pageViewsSplineAreaChartI = new CanvasJS.Chart(“inq”, inqOptions);
pageViewsSplineAreaChartI.options.data = LineChartData[“inq Data”];
dataPointsCol.splice(0,dataPointsCol.length)
//alert(dataPointsCol);
pageViewsSplineAreaChartI.render();

});

function onClick(e){
//alert( e.dataSeries.type+ “, dataPoint { x:” + e.dataPoint.x + “, y: “+ e.dataPoint.y + ” }” );
colpara = e.dataPoint.x;
//alert(colpara);
showDetail(colpara);
visitorsChartDrilldownHandler(e);

}

function showDetail(colpara) {
//alert(colpara);
var s = colpara;
var coldata = {s:colpara};
//var sParam = colpara.toString();
$.ajax({
type: “POST”,
url: “ZipDashBoard.aspx/DrillDow”,
data: JSON.stringify(coldata), // passing the parameter
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(retValue) {
//alert(retValue.d);
newColData = eval(retValue.d);
//alert(newColData);
for (var i = 0; i < newColData.length; i++)
{
dataPointsCol.push({
label: newColData[i].x,
y: newColData[i].y
});
}

}
});

}

[Shashi Ranjan]

Priyank,

It seems to be working fine. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into your code, understand the scenario better and help you out?

—
Shashi Ranjan
Team CanvasJS

[priyanksheth]

Hi

I have tried enough to run drill down through Ajax but not happening. Pf. link to access complete project. I have separated the two chart from the actual collection of page which I am using and which is working fine except the drill down chart. More over if we put some alert in handler function then drilled down is also plotting.

After separating the two chart for a sample, the first chart itself is not loading. The ajax call is not happening. I dont know why? i have tried enough.

Following is google doc link to have project for testing.

https://drive.google.com/drive/folders/1u9Rv7R82fgf4u7J7aP_-TBUczI5jRoLI?usp=sharing

Regards
Priyank

[priyanksheth]

Hi Shashi

Hope you gone through the link provided above. Kindly help.

[Shashi Ranjan]

Priyank,

We are looking into your query and will get back to you at the earliest.

—
Shashi Ranjan
Team CanvasJS

[Shashi Ranjan]

Priyank,

Please take a look at this updated sample project.

—
Shashi Ranjan
Team CanvasJS