Home forums Using CanvasJS Open Bootstrap Remote Modal from e.dataPoint.link onClick Event

This topic contains 3 replies, has 2 voices, and was last updated by  Manoj Mohan 2 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25111

    I am attempting to open a Bootstrap 4 Modal on a column chart where each bars link attribute will trigger a modal. I cannot figure out the syntax to call the Bootstrap modal in the onClick event and pass in the needed data- attributes (or are they needed opening a modal this way?) for the modal.

    As you can see from the code below, each link has a unique link value, and the end result is the ability to click on a point or bar in a chart and trigger opening a Bootstrap Modal and passing in the link value that would normally be the href value in a link that would open a modal normally.

    Any help is appreciated!

    <script>
    var chartColors = "#dee2e6";
    var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    toolTip:{
    content: "Found in {y} of 19 Documents"
    },
    axisY:{
    maximum: 20,
    gridColor: chartColors,
    lineColor: chartColors,
    tickColor: chartColors
    },
    axisX:{
    lineColor: chartColors,
    tickColor: chartColors
    },
    data: [{
    type: "column",
    cursor:"pointer",
    click: onClick,
    indexLabelPlacement: "outside",
    indexLabel: "{y}",
    dataPoints: [{ label: "Asset Taxes", y: 19, link: "/modal/kDocListByField.cfm?KFieldID=682&ProjectID=10", indexLabel:"100%" },{ label: "Employment", y: 9, link: "/modal/kDocListByField.cfm?KFieldID=689&ProjectID=10", indexLabel:"47%" },{ label: "Excluded\nAssets", y: 19, link: "/modal/kDocListByField.cfm?KFieldID=683&ProjectID=10", indexLabel:"100%" },{ label: "Litigation", y: 18, link: "/modal/kDocListByField.cfm?KFieldID=688&ProjectID=10", indexLabel:"95%" },{ label: "Offsite\nDisposal", y: 15, link: "/modal/kDocListByField.cfm?KFieldID=686&ProjectID=10", indexLabel:"79%" },{ label: "Operating\nExpenses", y: 13, link: "/modal/kDocListByField.cfm?KFieldID=690&ProjectID=10", indexLabel:"68%" },{ label: "Personal\nInjury", y: 18, link: "/modal/kDocListByField.cfm?KFieldID=684&ProjectID=10", indexLabel:"95%" },{ label: "Royalties", y: 17, link: "/modal/kDocListByField.cfm?KFieldID=687&ProjectID=10", indexLabel:"89%" }]
    }]
    });
    chart.render();
    function onClick(e){
    window.open(e.dataPoint.link, 'data-toggle="modal", data-target="#PDFModal"');
    // $('#kDocModal').on('show.bs.modal', function (e) {
    // var link = $(e.relatedTarget).link;
    // });
    };
    </script>
    #25129

    @joyrex,

    Please take a look at this JSFiddle.

    ——
    Manoj Mohan
    Team CanvasJS

    #25140

    Manoj,

    Thank you! This worked perfectly; the only change I needed to make was to target .modal-content versus ‘.modal-body’ to inject the e.dataTarget.link value into the script that is loaded into the modal.

    We will definitely be buying a CanvasJS license now that this proof-of-concept works!

    #25152

    @joyrex,

    Glad that it works for your use-case :)

    —–
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.