Add Link to a piechart

Question

Add Link to a piechart

Navigation

#1 by (0 votes)

-1

I'm working with graphics, which works well for me and delivers the data I request; my problem is that I can not add a url and that this url take me in said graph.

<div class="el-chart-w">
                        <canvas height="300px" id="pieChart" width="500px"></canvas>
                    </div>

I'm using the chart.js library

<script type="text/javascript">
    $(document).ready(function (){
        if ($("#pieChart").length) {
            var pieChart = $("#pieChart");

            // pie chart data
            var pieData = {
                labels: ["1 Venta", "2 Ventas", "3 Ventas", "4 Ventas ó más"],
                datasets: [{
                    data: [ {{$venta1}}, {{$venta2}}, {{$venta3}}, {{$venta4}}],
                    url: [ "http://misitio/venta1", "http://misitio/venta2", "http://misitio/venta3", "http://misitio/venta4"],
                    backgroundColor: ["#f80404",   "#040af8", "#04f849",   "#f8d804", "#8e04f8"],
                    hoverBackgroundColor: ["#f80404", "#040af8", "#04f849",   "#f8d804", "#8e04f8"],
                    borderWidth: 0
                }]

            };

            // -----------------
            // init pie chart
            // -----------------
            new Chart(pieChart, {
                type: 'pie',
                data: pieData,
                options: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 15,
                            fontColor: '#3e4b5b'
                        }
                    },
                    animation: {
                        animateScale: true
                    }
                }
            });
        }

    });
</script>

And my problem is here, when I want to position myself on one of the sales I can not make my graphic get the url I need to go to another page and see who are the vendors that have made the sale that I selected. I guess I'm using something wrong, and I do not know what it is, please, my help can help me, it would be great.

Greetings and thanks

javascript jquery html5 php chart.js

asked by Juanjo Medina 04.09.2018 в 16:02

source

1 answer

Help with sql connection from java please Extract a column of MSQL names and save it in a PHP array

score 0 · Accepted Answer

Juanjo, maybe this can help you

<script type="text/javascript">
$(document).ready(function (){
    if ($("#pieChart").length) {
        var pieChart = $("#pieChart");

        var data= {
            labels: ["1 Venta", "2 Ventas", "3 Ventas", "4 Ventas ó más"],
            datasets: [{
                data: [ {{$venta1}}, {{$venta2}}, {{$venta3}}, {{$venta4}}],
                backgroundColor: ["#f80404",   "#040af8", "#04f849",   "#f8d804", "#8e04f8"],
                hoverBackgroundColor: ["#f80404", "#040af8", "#04f849",   "#f8d804", "#8e04f8"],
                borderWidth: 0
            }]

        };

   var canvas = document.getElementById("pieChart");
        var ctx = canvas.getContext("2d");
        var myNewChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                legend: {
                    position: 'bottom',
                    labels: {
                        boxWidth: 15,
                        fontColor: '#3e4b5b'
                    }
                },
                animation: {
                    animateScale: true
                }
            }
        });
   canvas.onclick = function(evt) {
        var activePoints = myNewChart.getElementsAtEvent(evt);
        if (activePoints[0]) {
           var chartData = activePoints[0]['_chart'].config.data;
               var idx = activePoints[0]['_index'];
       var total = chartData.labels[idx];
               var value = chartData.datasets[0].data[idx];

               var url = "http://www.microsoft.com";
               console.log(url);
               alert(url);
                               }
        };

    }

});
</script>