google pie chart with value center

Mohamed MAHI MOUSSA answered on July 16, 2023 Popularity 1/10 Helpfulness 1/10

answer google pie chart with value center

related google pie chart with value center

google pie chart with value center

Comment

Tip Mohamed MAHI MOUSSA 1 GREPCC

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Google Visualization Dohnut Chart Text Position</title>
    <style>
      
      #test_font{
          position: absolute;
          visibility: hidden;
          height: auto;
          width: auto;
          white-space: nowrap;
      }
      
    </style>
</head>
<body>
    <table class="Charts">
        <tr>
            <td>
                <div id="donutchart1" style="width: 256px; height: 256px;"></div>
            </td>
            <td>
                <div id="donutchart2" style="width: 256px; height: 256px;"></div>
            </td>
        </tr>
    </table>
    <div id="test_font"></div>
    <script src="https://www.gstatic.com/charts/loader.js">
    </script> 
    <script>
        google.charts.load("visualization", "1", {
          packages: ["corechart"]
        });
        google.charts.setOnLoadCallback(init);


        function drawChart(chartID, heading, known, unknown) {

          var chart = new google.visualization.PieChart(document.getElementById(chartID));
          var data = google.visualization.arrayToDataTable([
            ['Knowledge', 'Out of 10'],
            ['Known', known],
            ['Unknown', unknown]
          ]);
          var options = {
            title: heading,
            pieHole: 0.7,
            colors: ['#000000', '#cdcdcd'],
            pieSliceText: 'none',
            legend: {
              position: 'none'
            },
            tooltip: {
              text: 'percentage'
            },
            tooltip: {
              textStyle: {
                fontSize: 12
              }
            }
          };

          chart.draw(data, options);
        }

        function centerText(chart) {
        var cht = document.querySelector(chart);
          var txt = document.querySelector(chart + " text");
          var test_txt = document.querySelector('#test_font');
          test_txt.innerHTML = txt.innerHTML;
          test_txt.style.fontFamily = txt.getAttribute('font-family');
          test_txt.style.fontSize = txt.getAttribute('font-size') + 'px';
          test_txt.style.fontWeight = txt.getAttribute('font-weight');
          var X = (cht.clientWidth-test_txt.clientWidth)/2;
          var Y = ((cht.clientHeight-test_txt.clientHeight)/2) + 1*document.querySelectorAll(chart + " rect").item(1).getAttribute('height');
          txt.setAttribute('x', X);
          txt.setAttribute('y', Y);
        }

        function init() {
          drawChart('donutchart1', 'VB.NET', 8, 2);
          drawChart('donutchart2', 'Javascript', 4, 6);
          centerText('#donutchart1');
          centerText('#donutchart2');
        }
    </script>
</body>
</html>
 Run code snippet

xxxxxxxxxx

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    <title>Google Visualization Dohnut Chart Text Position</title>

    <style>

      #test_font{

          position: absolute;

          visibility: hidden;

          height: auto;

          width: auto;

          white-space: nowrap;

    </style>

</head>

<body>

    <table class="Charts">

        <tr>

            <td>

                <div id="donutchart1" style="width: 256px; height: 256px;"></div>

            </td>

            <td>

                <div id="donutchart2" style="width: 256px; height: 256px;"></div>

            </td>

        </tr>

    </table>

    <div id="test_font"></div>

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

    </script>

    <script>

        google.charts.load("visualization", "1", {

          packages: ["corechart"]

});

        google.charts.setOnLoadCallback(init);

        function drawChart(chartID, heading, known, unknown) {

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

          var data = google.visualization.arrayToDataTable([

            ['Knowledge', 'Out of 10'],

            ['Known', known],

            ['Unknown', unknown]

]);

          var options = {

            title: heading,

            pieHole: 0.7,

            colors: ['#000000', '#cdcdcd'],

            pieSliceText: 'none',

            legend: {

              position: 'none'

},

            tooltip: {

              text: 'percentage'

},

            tooltip: {

              textStyle: {

                fontSize: 12

};

          chart.draw(data, options);

        function centerText(chart) {

        var cht = document.querySelector(chart);

          var txt = document.querySelector(chart + " text");

          var test_txt = document.querySelector('#test_font');

          test_txt.innerHTML = txt.innerHTML;

          test_txt.style.fontFamily = txt.getAttribute('font-family');

          test_txt.style.fontSize = txt.getAttribute('font-size') + 'px';

          test_txt.style.fontWeight = txt.getAttribute('font-weight');

          var X = (cht.clientWidth-test_txt.clientWidth)/2;

          var Y = ((cht.clientHeight-test_txt.clientHeight)/2) + 1*document.querySelectorAll(chart + " rect").item(1).getAttribute('height');

          txt.setAttribute('x', X);

          txt.setAttribute('y', Y);

        function init() {

          drawChart('donutchart1', 'VB.NET', 8, 2);

          drawChart('donutchart2', 'Javascript', 4, 6);

          centerText('#donutchart1');

          centerText('#donutchart2');

    </script>

</body>

</html>

 Run code snippet

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: center pie-chart whatever

Link to this answer
Share Copy Link

Contributed on Jul 16 2023

Mohamed MAHI MOUSSA

0 Answers Avg Quality 2/10

Closely Related Answers

google pie chart with value center

Comment

Tip Mohamed MAHI MOUSSA 1 GREPCC

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<table class="Charts">
    <tr>
        <td class="donutCell">
            <div id="donutchart1" class="donutDiv"></div>
            <div class="centerLabel">8/10</div>
        </td>
        <td class="donutCell">
            <div id="donutchart2" class="donutDiv"></div>
            <div class="centerLabel">4/10</div>
        </td>
    </tr>
</table>
 Run code snippet

xxxxxxxxxx

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

<table class="Charts">

    <tr>

        <td class="donutCell">

            <div id="donutchart1" class="donutDiv"></div>

            <div class="centerLabel">8/10</div>

        </td>

        <td class="donutCell">

            <div id="donutchart2" class="donutDiv"></div>

            <div class="centerLabel">4/10</div>

        </td>

    </tr>

</table>

 Run code snippet

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: pie-chart center whatever

Link to this answer
Share Copy Link

Contributed on Jul 16 2023

Mohamed MAHI MOUSSA

0 Answers Avg Quality 2/10

google pie chart with value center

Contents

More Related Answers

google pie chart with value center

Closely Related Answers

google pie chart with value center

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.