Home forums Using CanvasJS drill down on data point click

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #26120

    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

    #26129

    @priyanksheth,

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


    Shashi Ranjan
    Team CanvasJS

    #26137

    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

    #26166

    Hi

    Expecting revert on this.. Pl. help

    #26173

    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

    #26207

    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

    #26219

    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

    #26222

    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.

    #26243

    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
    });
    }

    }
    });

    }

    #26265

    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

    #26286

    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

    #26298

    Hi Shashi

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

    #26306

    Priyank,

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


    Shashi Ranjan
    Team CanvasJS

    #26506

    Priyank,

    Please take a look at this updated sample project.


    Shashi Ranjan
    Team CanvasJS

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.