Help needed - Sankey

35 views
Skip to first unread message

Dejan Stojadinovic

unread,
Oct 13, 2016, 11:31:06 AM10/13/16
to Google Visualization API
Hello

I'm complete beginner with JS and really would appreciate your help.
Need to prepare sankey chart, and following the instructions, I managed to make one.

This works and looks ok:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_basic" style="width: 900px; height: 600px;"></div>

 

 

JavaScript

      google.charts.load('current', {

        'packages': ['sankey']

      });

      google.charts.setOnLoadCallback(drawChart);

 

      function drawChart() {

        var data = new google.visualization.DataTable();

        var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',

          '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'

        ];

        data.addColumn('string', 'From');

        data.addColumn('string', 'To');

        data.addColumn('number', 'Weight');

        data.addRows([

[ 'Biomass', 'small HOB', 68 ],

          [ 'small HOB', 'Albania', 212 ],

          [ 'Biomass', 'stoves', 106 ],

          [ 'stoves', 'Albania', 106 ],

          [ 'Electricity', 'electric appliance', 551 ],

          [ 'electric appliance', 'Albania', 551 ],

          [ 'Coal (lignite)', 'small HOB', 2 ],

          [ 'LFO', 'small HOB', 71 ],

          [ 'LPG', 'small HOB', 71 ],

          [ 'other fuel', 'other appliance', 19 ],

          [ 'other appliance', 'Albania', 19 ]

        ]);

        // Sets chart options.

        var options = {

          width: 900,

          sankey: {

            node: {

              colors: colors

            },

            link: {

              colorMode: 'gradient',

              colors: colors

            }

          }

        };

 

        // Instantiates and draws our chart, passing in some options.

        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));

        chart.draw(data, options);

      }




But, I need to change font size and type, and not sure how to do it. In the guidelines, it says that next option should be used:


    var options = {
      width:
600,
      sankey: {
        node: { label: { fontName:
'Arial',
                         fontSize:
12,
                         color:
'#871b47',
                         bold:
true,
                         italic:
true } } },
    };

When I paste it, it changes the font type and size, but I loose custom colors that I also need.

Would be grateful if someone could help! Thanks in advance!


Reply all
Reply to author
Forward
0 new messages