How to insert caption with quantity

Question

How to insert caption with quantity

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

Hello. I have a highcharts graphic and I need to enable caption with quantity so it makes it easier to preview at the time of printing because the quantity is only showing up when I mouse over and the quantity does not print.

<html> 
<head>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>    
    <script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>      
    <script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'></script>
</head>
        <body>
            <?php
            require 'conecta.php';
            mysql_select_db("asteriskcdrdb", $conLigacoes);           
           $sql = "select distinct case when (dstchannel like '%claro%') then 'Claro' when (dstchannel like '%Tim%') then 'Tim' when (dstchannel like '%Vivo%') then 'Vivo' when (dstchannel like '%Tim%') then 'Tim' when (dstchannel like '%Oi%') then 'Oi' when (dstchannel like '%Nextel%') then 'Nextel' else 'Outras' end as 'Operadora', count(dstchannel) as Quantidade from cdr where (dstchannel regexp 'claro|Tim|vivo|oi|nextel') and calldate between '".$_POST['DataInicial']."' and '".$_POST['DataFinal']."' group by  Operadora";

           $result1 = mysql_query($sql);
           $data1 = array();
           $data2 = array();

           while ($row = mysql_fetch_array($result1)) {
               $data1 = $row['Operadora'];
               $data2 = $row['Quantidade'];
               $DadosGrafico[] = "['".$data1."',".$data2."]";
           } 
    ?>
            <script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: 'Relatório de Ligações'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['<?php echo join("','", $data1) ?>'],}, 
            yAxis: {
                min: 0,
                title: {
                    text: 'Quantidade'
                }
            },
            legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 50,
                        y: 35,
                        floating: true,
                        shadow: true
                    }, 
            plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }}, 
            series: [{ name: 'Quantidade', data: [<?php echo join(',',$DadosGrafico ) ?>],
                           // pointStart: 0
                            //pointInterval
                        }
    //                    
                        ]
        });
    });
    </script> 

    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

php highcharts

asked by anonymous 13.08.2014 / 20:38

2 answers

I can not include the artifacts by Maven Load dependencies on demand

score 2 · Answer 1

Firstly, it is not the plotOptions that are printing the contents of your chart, it is the parameter "series:" that is doing this.

Second point, your code is a mess, if you had separated and indented it would be clear that plotOptions and the series are different things.

Third, in jsFiddle you need to separate JS, html and no use putting PHP. I think you used it just to show us your code, but the trick is that if you want to show a working example you need to separate these things.

Finally, here's the example I believe you're looking for: link I tried to keep your original code to the maximum.

1) If you want to add the quantities in the chart labels you add the following excerpt within plotOptions:

series: {
    dataLabels: {
        enabled: true,
            format: '{point.name}: {point.y:.1f}%'
    }
},

2) If you want the quantities in the legend itself, you need to add the following line inside the legend:

labelFormat: '{name} ({percentage:.1f}%)',

Namely, the number before f is the number of decimals you want to display.

I hope I have helped.

score 0 · Answer 2

I got, the detail is in "plotOptions" with the parameter "dataLabels".

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Chart reflow is set to true'
        },

        subtitle: {
            text: 'When resizing the window or the frame, the chart should resize'
        },
        // aqui está a solução, dataLabels 'enabled true'
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },


        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

I took the documentation myself.

link

EDIT

'plotOptions': { 
    pie: {
        dataLabels: {
            enabled: true
        }
    },
    column: { 
        pointPadding: 0.2, borderWidth: 0 
    }
}