How to insert caption with quantity

Question

How to insert caption with quantity

Asked 10 years, 2 months ago

Viewed 688 times

2

Hello. I have a chart highcharts and need to enable caption with quantity so that facilitate the visualization at the time of printing because the quantity is only appearing when I hover the mouse over and the quantity does not come out in 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>

3

Can you post how you are building the chart? Not knowing how you structured your code, it is difficult to provide help.

– bupereira

2014/08/13 at 18:57
I’m sorry, but yesterday I stayed know access on a few pages for an internal company problem then. I ended up not posting the code.

– fabricio_wm

2014/08/14 at 13:37
@fabricio_wm http://jsfiddle.net/3ea7tbou/ follow the fiddle link from my example.

– William Borba

2014/08/14 at 23:35

2 answers

Browser other questions tagged php highcharts

You are not signed in. Login or sign up in order to post.

by carla • **632** points · Answer 1 · 2015-05-01T15:55:03+00:00

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

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

Third, in jsFiddle you need to separate JS, html and it’s no use to put PHP. I believe you used it just to show us your code, but here’s the tip that if you want to show a functional example you need to separate these things.

Finally, here’s the example I believe you’re looking for: http://jsfiddle.net/L601eqcp/3/ I tried to keep your original code to the fullest.

1) If you want to add the amounts in the plots of the graph you add the following snippet inside plotOptions:

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

2)If you want the quantities in the caption itself, you need to add the following row within Legend:

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

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

I hope I’ve helped.

by William Borba • **460** points · Answer 2 · 2014-08-14T23:29:45+00:00

could, the detail is in "plotOptions" with 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 from the documentation itself.

http://www.highcharts.com/demo/bar-basic

EDIT

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