miloschuman / yii2-highcharts

Highcharts widget for Yii 2 Framework
http://www.yiiframework.com/extension/yii2-highcharts-widget/
MIT License
166 stars 63 forks source link

drilldown js issue #21

Closed xiandalisay closed 9 years ago

xiandalisay commented 9 years ago

I tried using pie chart with dill down. I passed the JSON data. I also tried using array format. But the drill down does not work. Do I have the bypass the needed js assets?

This is from the demo http://www.highcharts.com/demo/pie-drilldown

<?=
\miloschuman\highcharts\HighCharts::widget([
    'options' => '{
    "chart": {
        "type": "pie"
    },
    "title": {
        "text": "Browser market shares. January, 2015 to May, 2015"
    },
    "subtitle": {
        "text": "Click the slices to view versions. Source: netmarketshare.com."
    },
    "plotOptions": {
        "series": {
            "dataLabels": {
                "enabled": true,
                "format": "{point.name}: {point.y:.1f}%"
            }
        }
    },
    "series": [
        {
            "name": "Brands",
            "colorByPoint": true,
            "data": [
                {
                    "name": "Microsoft Internet Explorer",
                    "y": 56.33,
                    "drilldown": "Microsoft Internet Explorer"
                },
                {
                    "name": "Chrome",
                    "y": 24.03,
                    "drilldown": "Chrome"
                },
                {
                    "name": "Firefox",
                    "y": 10.38,
                    "drilldown": "Firefox"
                },
                {
                    "name": "Safari",
                    "y": 4.77,
                    "drilldown": "Safari"
                },
                {
                    "name": "Opera",
                    "y": 0.91,
                    "drilldown": "Opera"
                },
                {
                    "name": "Proprietary or Undetectable",
                    "y": 0.2,
                    "drilldown": null
                }
            ]
        }
    ],
    "drilldown": {
        "series": [
            {
                "name": "Microsoft Internet Explorer",
                "id": "Microsoft Internet Explorer",
                "data": [
                    [
                        "v11.0",
                        24.13
                    ],
                    [
                        "v8.0",
                        17.2
                    ],
                    [
                        "v9.0",
                        8.11
                    ],
                    [
                        "v10.0",
                        5.33
                    ],
                    [
                        "v6.0",
                        1.06
                    ],
                    [
                        "v7.0",
                        0.5
                    ]
                ]
            },
            {
                "name": "Chrome",
                "id": "Chrome",
                "data": [
                    [
                        "v40.0",
                        5
                    ],
                    [
                        "v41.0",
                        4.32
                    ],
                    [
                        "v42.0",
                        3.68
                    ],
                    [
                        "v39.0",
                        2.96
                    ],
                    [
                        "v36.0",
                        2.53
                    ],
                    [
                        "v43.0",
                        1.45
                    ],
                    [
                        "v31.0",
                        1.24
                    ],
                    [
                        "v35.0",
                        0.85
                    ],
                    [
                        "v38.0",
                        0.6
                    ],
                    [
                        "v32.0",
                        0.55
                    ],
                    [
                        "v37.0",
                        0.38
                    ],
                    [
                        "v33.0",
                        0.19
                    ],
                    [
                        "v34.0",
                        0.14
                    ],
                    [
                        "v30.0",
                        0.14
                    ]
                ]
            },
            {
                "name": "Firefox",
                "id": "Firefox",
                "data": [
                    [
                        "v35",
                        2.76
                    ],
                    [
                        "v36",
                        2.32
                    ],
                    [
                        "v37",
                        2.31
                    ],
                    [
                        "v34",
                        1.27
                    ],
                    [
                        "v38",
                        1.02
                    ],
                    [
                        "v31",
                        0.33
                    ],
                    [
                        "v33",
                        0.22
                    ],
                    [
                        "v32",
                        0.15
                    ]
                ]
            },
            {
                "name": "Safari",
                "id": "Safari",
                "data": [
                    [
                        "v8.0",
                        2.56
                    ],
                    [
                        "v7.1",
                        0.77
                    ],
                    [
                        "v5.1",
                        0.42
                    ],
                    [
                        "v5.0",
                        0.3
                    ],
                    [
                        "v6.1",
                        0.29
                    ],
                    [
                        "v7.0",
                        0.26
                    ],
                    [
                        "v6.2",
                        0.17
                    ]
                ]
            },
            {
                "name": "Opera",
                "id": "Opera",
                "data": [
                    [
                        "v12.x",
                        0.34
                    ],
                    [
                        "v28",
                        0.24
                    ],
                    [
                        "v27",
                        0.17
                    ],
                    [
                        "v29",
                        0.16
                    ]
                ]
            }
        ]
    }
}'
]);
miloschuman commented 9 years ago

@xiandalisay sorry for the delayed response. If you have not already solved the issue yourself, the key is to specify any additional js files you need using the scripts property like this:

<?= \miloschuman\highcharts\HighCharts::widget([
    'scripts' => ['modules/drilldown'],
    'options' => '{...}',
]); ?>

This behavior is documented in the Tips section of Readme.md