Drop Off on Google Sankey Chart

I would like to use the Google Sankey chart to show how many players played the quiz, completed it and won or lost. I have the following code:

     google.charts.load('current', {'packages':['corechart','sankey']});
        google.charts.setOnLoadCallback(drawChart);
        //console.log(gameAssets);
        
        function drawChart() { 
                    var sankeydata = new google.visualization.DataTable();
                    sankeydata.addColumn('string', 'From');
                    sankeydata.addColumn('string', 'To');
                    sankeydata.addColumn('number', "Number of Players");
                    sankeydata.addRows([
                      [ "Number of Players","Completions", 391 ],
                      ["Completions","Successful Completions",160],
                      ["Number of Players","Exit" ,768],
                      ["Completions","Unsuccessful Completions",231]
                    ]);
        
                    // Sets chart options.
                    var options = {
                      width: 970,
                      sankey: {
                        node: {
                          width: 4 ,
                          colors: ['#883b90'],
                          label: { 
                             fontSize: 14
                               
                          }
                        },
                        link: {
                          color: { fill: '#f4eee2' }
                        }
                      }
                    };
                    var sankey_chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
                    sankey_chart.draw(sankeydata, options)
    }
        
               
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
Run codeHide result
>

The problem I am facing is that players who do not complete the quiz (shown as "Exit" on the Sankey chart) are in the last column (the same column as "Success" and "Success Failure") . I would prefer it to be at the same level as Completions. Even the best option, showing a fall, as in Google Analytics, with a red arrow pointing down, as shown below:

Disabling Google Analytics

Is it possible to use Google charts?

+4
source share

Source: https://habr.com/ru/post/1627902/


All Articles