What should I adjust in google charts code to get rid of some properties? (javascript)

What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?

Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

<html>

  <head>

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

    <script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Task', 'Hours per Day'],

          ['Work',     11],

          ['Eat',      2],

          ['Commute',  2],

          ['Watch TV', 2],

          ['Sleep',    7]

        ]);



        var options = {

          title: 'My Daily Activities',

          pieHole: 0.4,

        };



        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="donutchart" style="width: 900px; height: 500px;"></div>

  </body>

</html>

I only want the values circled in the image below:

chart image

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

Sample input/output please

– Happypig375
Nov 26 '18 at 10:44

Do you mean how does the chart looks like? If yes I have added image above, if not please let me know and I will add.

– jonathan
Nov 26 '18 at 11:08

add a comment |

What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?

Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

<html>

  <head>

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

    <script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Task', 'Hours per Day'],

          ['Work',     11],

          ['Eat',      2],

          ['Commute',  2],

          ['Watch TV', 2],

          ['Sleep',    7]

        ]);



        var options = {

          title: 'My Daily Activities',

          pieHole: 0.4,

        };



        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="donutchart" style="width: 900px; height: 500px;"></div>

  </body>

</html>

I only want the values circled in the image below:

chart image

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

Sample input/output please

– Happypig375
Nov 26 '18 at 10:44

Do you mean how does the chart looks like? If yes I have added image above, if not please let me know and I will add.

– jonathan
Nov 26 '18 at 11:08

add a comment |

What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?

Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

<html>

  <head>

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

    <script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Task', 'Hours per Day'],

          ['Work',     11],

          ['Eat',      2],

          ['Commute',  2],

          ['Watch TV', 2],

          ['Sleep',    7]

        ]);



        var options = {

          title: 'My Daily Activities',

          pieHole: 0.4,

        };



        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="donutchart" style="width: 900px; height: 500px;"></div>

  </body>

</html>

I only want the values circled in the image below:

chart image

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?

Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

<html>

  <head>

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

    <script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Task', 'Hours per Day'],

          ['Work',     11],

          ['Eat',      2],

          ['Commute',  2],

          ['Watch TV', 2],

          ['Sleep',    7]

        ]);



        var options = {

          title: 'My Daily Activities',

          pieHole: 0.4,

        };



        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="donutchart" style="width: 900px; height: 500px;"></div>

  </body>

</html>

I only want the values circled in the image below:

chart image

javascript charts

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

edited Nov 26 '18 at 15:16

Jesse de Bruijne

2,47861427

asked Nov 26 '18 at 9:55

jonathan

164

asked Nov 26 '18 at 9:55

jonathan

164

asked Nov 26 '18 at 9:55

jonathan

164

Sample input/output please

– Happypig375
Nov 26 '18 at 10:44

Do you mean how does the chart looks like? If yes I have added image above, if not please let me know and I will add.

– jonathan
Nov 26 '18 at 11:08

add a comment |

Sample input/output please

– Happypig375
Nov 26 '18 at 10:44

Do you mean how does the chart looks like? If yes I have added image above, if not please let me know and I will add.

– jonathan
Nov 26 '18 at 11:08

Sample input/output please

– Happypig375
Nov 26 '18 at 10:44

Do you mean how does the chart looks like? If yes I have added image above, if not please let me know and I will add.

– jonathan
Nov 26 '18 at 11:08

add a comment |

2 Answers
2

active

oldest

votes

Try changing options to:

    var options = {

      title: 'My Daily Activities',

      pieHole: 0.4,

      slices: {

        2: { textStyle : {color:'transparent'} },

        3: { textStyle : {color:'transparent'} },

        4: { textStyle : {color:'transparent'} },

        5: { textStyle : {color:'transparent'} },

      }

    };

This will set slices 2,3,4,5 to a transparent text colour.

Adapted from: https://stackoverflow.com/a/27010671/608312

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

add a comment |

@JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.

<html>

      <head>

        <script type="text/javascript" src="loader.js"></script>



        <script type="text/javascript">



         google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ['Metric', 'Score', 'Site'],

        ['Uniqueness', 6.178, 'https://www.google.com/'],

        ['', 93.82, 'https://www.bing.com/']

      ]);



      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1]);



      var options = {

        legend: 'none',

        title: 'Unique Identifiability',

        pieHole: 0.6,

        colors: ['#EE7023', '#808080']



      };



      var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));







      google.visualization.events.addListener(chart, 'select', function () {

        var selection = chart.getSelection(); 





        if (selection.length > 0) {



          window.open(data.getValue(selection[0].row, 2), '_blank');

          console.log(data.getValue(selection[0].row, 2));

        }

      });

answered Nov 27 '18 at 15:07

jonathan

164

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53478573%2fwhat-should-i-adjust-in-google-charts-code-to-get-rid-of-some-properties-javas%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Try changing options to:

    var options = {

      title: 'My Daily Activities',

      pieHole: 0.4,

      slices: {

        2: { textStyle : {color:'transparent'} },

        3: { textStyle : {color:'transparent'} },

        4: { textStyle : {color:'transparent'} },

        5: { textStyle : {color:'transparent'} },

      }

    };

This will set slices 2,3,4,5 to a transparent text colour.

Adapted from: https://stackoverflow.com/a/27010671/608312

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

add a comment |

Try changing options to:

    var options = {

      title: 'My Daily Activities',

      pieHole: 0.4,

      slices: {

        2: { textStyle : {color:'transparent'} },

        3: { textStyle : {color:'transparent'} },

        4: { textStyle : {color:'transparent'} },

        5: { textStyle : {color:'transparent'} },

      }

    };

This will set slices 2,3,4,5 to a transparent text colour.

Adapted from: https://stackoverflow.com/a/27010671/608312

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

add a comment |

Try changing options to:

    var options = {

      title: 'My Daily Activities',

      pieHole: 0.4,

      slices: {

        2: { textStyle : {color:'transparent'} },

        3: { textStyle : {color:'transparent'} },

        4: { textStyle : {color:'transparent'} },

        5: { textStyle : {color:'transparent'} },

      }

    };

This will set slices 2,3,4,5 to a transparent text colour.

Adapted from: https://stackoverflow.com/a/27010671/608312

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

Try changing options to:

    var options = {

      title: 'My Daily Activities',

      pieHole: 0.4,

      slices: {

        2: { textStyle : {color:'transparent'} },

        3: { textStyle : {color:'transparent'} },

        4: { textStyle : {color:'transparent'} },

        5: { textStyle : {color:'transparent'} },

      }

    };

This will set slices 2,3,4,5 to a transparent text colour.

Adapted from: https://stackoverflow.com/a/27010671/608312

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

edited Nov 27 '18 at 13:56

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

answered Nov 26 '18 at 15:40

JakeSteam

2,13852436

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

add a comment |

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

I managed to get rid of the label 'legend: 'none'' but still not sure where should I add 'pieslicetext: "none"

– jonathan
Nov 27 '18 at 13:52

Just realised I misread your question. Have edited answer.

– JakeSteam
Nov 27 '18 at 13:54

it didn't work. I have added code that I have so far..

– jonathan
Nov 27 '18 at 15:06

add a comment |

@JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.

<html>

      <head>

        <script type="text/javascript" src="loader.js"></script>



        <script type="text/javascript">



         google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ['Metric', 'Score', 'Site'],

        ['Uniqueness', 6.178, 'https://www.google.com/'],

        ['', 93.82, 'https://www.bing.com/']

      ]);



      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1]);



      var options = {

        legend: 'none',

        title: 'Unique Identifiability',

        pieHole: 0.6,

        colors: ['#EE7023', '#808080']



      };



      var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));







      google.visualization.events.addListener(chart, 'select', function () {

        var selection = chart.getSelection(); 





        if (selection.length > 0) {



          window.open(data.getValue(selection[0].row, 2), '_blank');

          console.log(data.getValue(selection[0].row, 2));

        }

      });

answered Nov 27 '18 at 15:07

jonathan

164

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

add a comment |

@JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.

<html>

      <head>

        <script type="text/javascript" src="loader.js"></script>



        <script type="text/javascript">



         google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ['Metric', 'Score', 'Site'],

        ['Uniqueness', 6.178, 'https://www.google.com/'],

        ['', 93.82, 'https://www.bing.com/']

      ]);



      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1]);



      var options = {

        legend: 'none',

        title: 'Unique Identifiability',

        pieHole: 0.6,

        colors: ['#EE7023', '#808080']



      };



      var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));







      google.visualization.events.addListener(chart, 'select', function () {

        var selection = chart.getSelection(); 





        if (selection.length > 0) {



          window.open(data.getValue(selection[0].row, 2), '_blank');

          console.log(data.getValue(selection[0].row, 2));

        }

      });

answered Nov 27 '18 at 15:07

jonathan

164

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

add a comment |

@JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.

<html>

      <head>

        <script type="text/javascript" src="loader.js"></script>



        <script type="text/javascript">



         google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ['Metric', 'Score', 'Site'],

        ['Uniqueness', 6.178, 'https://www.google.com/'],

        ['', 93.82, 'https://www.bing.com/']

      ]);



      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1]);



      var options = {

        legend: 'none',

        title: 'Unique Identifiability',

        pieHole: 0.6,

        colors: ['#EE7023', '#808080']



      };



      var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));







      google.visualization.events.addListener(chart, 'select', function () {

        var selection = chart.getSelection(); 





        if (selection.length > 0) {



          window.open(data.getValue(selection[0].row, 2), '_blank');

          console.log(data.getValue(selection[0].row, 2));

        }

      });

answered Nov 27 '18 at 15:07

jonathan

164

@JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.

<html>

      <head>

        <script type="text/javascript" src="loader.js"></script>



        <script type="text/javascript">



         google.charts.load("current", {packages:["corechart"]});

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([

        ['Metric', 'Score', 'Site'],

        ['Uniqueness', 6.178, 'https://www.google.com/'],

        ['', 93.82, 'https://www.bing.com/']

      ]);



      var view = new google.visualization.DataView(data);

      view.setColumns([0, 1]);



      var options = {

        legend: 'none',

        title: 'Unique Identifiability',

        pieHole: 0.6,

        colors: ['#EE7023', '#808080']



      };



      var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));







      google.visualization.events.addListener(chart, 'select', function () {

        var selection = chart.getSelection(); 





        if (selection.length > 0) {



          window.open(data.getValue(selection[0].row, 2), '_blank');

          console.log(data.getValue(selection[0].row, 2));

        }

      });

answered Nov 27 '18 at 15:07

jonathan

164

answered Nov 27 '18 at 15:07

jonathan

164

answered Nov 27 '18 at 15:07

jonathan

164

answered Nov 27 '18 at 15:07

jonathan

164

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

add a comment |

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

The code I posted answered the question you asked. If you now just want to hide the % symbol, that's a different question, so you should make a new one. If your initial question is answered, feel free to mark the question as solved!

– JakeSteam
Nov 27 '18 at 15:40

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl