简体   繁体   中英

Highcharts Drilldown charts CodeIgniter

i am working on a PHP project build in CodeIgniter framework. This application holds many graphs that are dynamically created. I had a great success working with the ronan-gloo highcharts library . Below is the code that generates my graphs...

$this -> load -> library ( 'Highchart' );
$chart = new Highchart ( );

$chart -> chart -> renderTo = "divid";
$chart -> title -> text = "chart Title";
$chart -> xAxis -> categories = $xaxis;

$chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = ''+
                        this.point.name +': '+ this.y;
                    } else {
                        s = '<b>'+ this.series.name +'</b><br/><i>' + this.x +'</i>: <b>'+ this.y + '%</b>';
                    }
                    return s; }" );

$chart -> series [ ] = array (
    'type' => "column" ,
    'name' => "%age" ,
    'data' => $yaxis ,
    'color' => '#CC004B' ,
    'showInLegend' => TRUE ,
    'dataLabels' => array (
        'enabled' => TRUE ,
        'color' => '#CC004B' ,
        'style' => array (
            'fontSize' => '10px' ,
            'verticalalign' => 'bottom'
        )
    )
);

foreach ( $chart->getScripts() as $script ) {
    echo '<script type="text/javascript" src="' . $script . '"></script>';
}

echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
echo "<div id='divid'></div>";
echo "<script type='text/javascript'>" . $chart -> render ( "chart1" ) . "</script>";

this is helping me to a greater extend to create graphs, however, Highcharts has a great drill down functionality ( High Charts Drilldown demo ) which i would wish to implement in my project.

The demo suggest creating javascript objects that holds the drilldown data ( JS Fiddle ) which is called to create a chart. but how could i do it in PHP Codeigniter when the javascript is written on the fly...

Please help!

I was able to manage with the above question. Below is the code that i have used...

$this -> load -> library ( 'Highchart' );

        $chart = new Highchart ( );

        $chart -> chart -> renderTo = "chartcontainer";
        $chart -> title -> text = "Chart Title";
        $chart -> chart -> type = "column";
        $chart -> subtitle -> text = "Click the columns to view Drilldown. Click again to view main chart.";
        $chart -> xAxis -> categories = $xaxis;
        $chart -> yAxis -> title -> text = "%age";
        $chart -> chart -> plotShadow = TRUE;
        $chart -> chart -> plotBorderWidth = 1;

        $chart -> chart -> plotBackgroundColor = "#F0F0F0";

        $pcolumn = $chart -> plotOptions -> column;
        $pcolumn -> cursor = "pointer";
        $xaxisjson = json_encode ( $xaxis );
        $pcolumn -> point -> events -> click = new HighchartJsExpr ( "function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, '#FA7070');
                                } else { // restore
                                    setChart('Repeat %age', $xaxisjson, $drilldowndata);
                                }

                                function setChart(name, categories, data, color) {
                                    chart2.xAxis[0].setCategories(categories, false);
                                    chart2.series[0].remove(false);
                                    chart2.addSeries({
                                        name: name,
                                        data: data,
                                        color: color || '#7070FA'
                                    }, false);
                                    chart2.redraw();
                                }
                            }" );

        $pcolumn -> dataLabels = array (
            "enabled" => true ,
            "style" => array ( "fontWeight" => "bold" ) ,
            "formatter" => new HighchartJsExpr ( "function() {
                            return this.y +'%';
                        }" )
        );

        $chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'%</b> Repeat E-Mails<br/>';
                    if (point.drilldown) {
                        s += 'Click to view '+ point.category +'\'s drilldown data';
                    } else {
                        s += 'Click to return to main graph';
                    }
                    return s;
                }" );

        $chart -> series [ ] = array (
            "name" => "Series Name" ,
            "data" => $drilldowndata [ "data" ]
        );

        foreach ( $chart->getScripts() as $script ) {
            echo '<script type="text/javascript" src="' . $script . '"></script>';
        }

        echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
        echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
        echo "<div id='chartcontainer'></div>";
        echo "<script type='text/javascript'>" . $chart -> render ( "chart2" ) . "</script>";

and the array $drilldown is in the below format:

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [y] => 18.5
                    [drilldown] => Array
                        (
                            [name] => Category0
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 27
                                    [1] => 14.4
                                    [2] => 9.7
                                )
                            [color] => #7070FA
                        )
                )
            [1] => Array
                (
                    [y] => 15.6
                    [drilldown] => Array
                        (
                            [name] => Category1
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 20
                                    [1] => 16.1
                                    [2] => 0
                                )
                            [color] => #7070FA
                        )
                )
            [2] => Array
                (
                    [y] => 21.5
                    [drilldown] => Array
                        (
                            [name] => Category2
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 20.6
                                    [1] => 24.3
                                    [2] => 17.9
                                )

                            [color] => #7070FA
                        )

                )
            [3] => Array
                (
                    [y] => 10
                    [drilldown] => Array
                        (
                            [name] => Category3
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 13.8
                                    [1] => 11.5
                                    [2] => 4
                                )
                            [color] => #7070FA
                        )
                )
        )
)

Any suggestion or help is welcome in comments

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM