How can I show Bootstrap modal when on click in individual bars in chart.js

Total Post:45

Points:323
 368  View(s)
Ratings:
Rate this:
<script type="text/javascript">

    google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = '@Html.Raw(Json.Encode(@ViewBag.user))';
        var dt = new google.visualization.DataTable();
        dt.addColumn('string', 'Date');
        dt.addColumn('number', 'User');
        var data = JSON.parse(data);
        $.each(data, function (i, v) {
            dt.addRow([v.Date, v.Total]);
        });
        var options = {
            chart: {
                title: 'Recently Registered User',
                subtitle: 'Count',
            }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('user'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(dt, options);
    }
</script>
  1. Post:2

    Points:14
    Re: How can I show Bootstrap modal when on click in individual bars in chart.js

    you can use this function       

     function selectHandler() {
    
                var selectedItem = chart.getSelection()[0];
                if (selectedItem) {
                    var val = dt.getValue(selectedItem.row, 0);
                    $('#myModal').modal('show');
                   // alert('The user selected ' + val);
                }
            }

    hope this will helps you..

      Modified On Dec-04-2017 02:56:54 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!