Drilldown charts in angular js using google charts directives

后端 未结 1 1818
独厮守ぢ
独厮守ぢ 2021-01-17 02:32

We are new to angularjs v4. We have a requirement of drilldown charts in google charts. We are using ng2-google-charts directives. We are able to find the select event and u

相关标签:
1条回答
  • 2021-01-17 02:43

    Like highcharts there isn't any simple way in google charts to make drilldown. But with some tricks it is possible

     <input type="button" style="width: auto !important;" value="back" id="btnBack" />
    <div id="SkillBar"></div>
    

    Take a back button and a container to draw chart. Now load your visualization library bar charts and create your bar chart

    google.charts.load('current', { packages: ['corechart', 'bar'] });
     google.charts.setOnLoadCallback(drawAnnotations);
       function drawAnnotations() {
            google.charts.setOnLoadCallback(drawSkillBar);
    
            function drawSkillBar() {
    
                var data = new google.visualization.DataTable();
    
    
                data.addColumn('string', 'Category');
                data.addColumn('number', 'Demand');
                data.addColumn({ type: 'number', role: 'annotation' });
                data.addColumn('number', 'Supply Overall');
                data.addColumn({ type: 'number', role: 'annotation' });
                data.addColumn('number', 'Bench and Buffer');
                data.addColumn({ type: 'number', role: 'annotation' });
    
                data.addRows([
                  ['Core', 25, 25, 22, 22, 12, 12],
                  ['Invest', 15, 15, 21, 21, 11, 11],
                  ['Others', 10, 10, 12, 12, 9, 9]
                ]);
    
                var options = {
                    title: '',
                    //hAxis: {
                    //    title: 'Time of Day',
                    //},
                    //vAxis: {
                    //    title: 'Rating (scale of 1-10)'
                    //},
                    is3D: true,
                    'height': 300,
                    'width': 600,
                    colors: ['#3366CC', '#378eb8', '#984ea3'],
                    legend: 'true',
                    //focusTarget: 'category',
                    animation: {
                        startup: true,
                        duration: 500,
                        easing: 'out'
                    }
                };
    
    
                var chart = new google.visualization.ColumnChart(document.getElementById('SkillBar'));
    

    Create your select handler like this

     function selectHandler() {
                    var selectedItem = chart.getSelection()[0];
    
                    if (selectedItem && selectedItem.row != null) {
                        var value = data.getValue(selectedItem.row, selectedItem.column);
                        var column = data.getColumnLabel(selectedItem.column)
    
                        if (column.toLowerCase() == 'demand') {
                            $('#btnBack').removeClass('hidden');
                            drawDemandBar(data.getValue(selectedItem.row, 0), '#3366CC');
                        }
                        if (column.toLowerCase() == 'supply overall') {
                            $('#btnBack').removeClass('hidden');
                            drawSupplyBar(data.getValue(selectedItem.row, 0), '#378eb8');
                        }
                        if (column.toLowerCase() == 'bench and buffer') {
                            $('#btnBack').removeClass('hidden');
                            drawOthersBar(data.getValue(selectedItem.row, 0), '#984ea3');
                        }
    
                    }
                }
    

    Now draw your chart with select handler event attached

    google.visualization.events.addListener(chart, 'select', selectHandler);
                chart.draw(data, options);
    

    Thats it.. Now all you have to do is declare three different functions for 3 bars

    1. drawSupplyBar()  2. drawDemandBar() 3. drawOthersBar()
    

    you can find full code and working fiddle Here

    0 讨论(0)
提交回复
热议问题