Home Forums Chart Support Open Bootstrap Remote Modal from e.dataPoint.link onClick Event

Open Bootstrap Remote Modal from e.dataPoint.link onClick Event

Viewing 4 posts - 1 through 4 (of 4 total)
  • #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,

    You can open bootstrap modal and pass the link attribute of respective datapoint clicked to modal by using click event handler of dataPoints as shown in below code snippet.

    var link;
    function onClick(e){
      link = e.dataPoint.link;
      $('#myModal').modal('show');
    };
    
    $('#myModal').on('shown.bs.modal', function (e) {
      $('#myModal').find('.modal-body').load(link)
    });
    $('#myModal').on('hidden.bs.modal', function (e) {
      $('#myModal').find('.modal-body').html('')
    });

    Please take a look at this JSFiddle for complete working code.

    Open modal on clicking datapoint with link attribute

    ——
    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.