[Solved] Is it possible to create a pie chart?

Questions about Thunkable
1

Hi, I want to create a pie chart in my application.
How can this be done?

2

Hi,

You can see an example of a line graph on the scrChart screen. Change it to pie (see Google Chart).

https://x.thunkable.com/projects/5d370bd8814895afb4300c50/project/properties/designer/

2 Likes
4

Is it possible to set a unique color for each segment in the chart?

5

It is possible, additional information on https://developers.google.cn/chart/interactive/docs/gallery/piechart?hl=en page

1 Like
6

Thanks, but how can the color be changed? What should be added to the text🤔?
You can update the text😅:

 data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><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',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
7

For a more convenient operation, I suggest you first make the changes in a html-file and view them in the browser. If all is well, then after that copy the code in Thunkable X. code with color change is given below

data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<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',
          is3D: true,
		  colors:['red','#004411','yellow','#005647','green','#567876']
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
1 Like
8

How do you define each color segment of your own?
I want to give each segment of the chart its own color (colors should be fixed and there may be more or less than 10 segments in the chart)
Here is the list of colors:

#4CAF50,#FF0402, #3366FF #CC33CC,#FF6602,#666666,#FFCC32,#993399,#FF9966,#CC6601

Sorry I don’t understand😅

9

No matter, I already succeeded
Here’s the result:

data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><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', is3D: true, slices: { 0: { color: '#4CAF50' }, 1: { color: '#FF0402' }, 2: { color: '#3366FF' }, 3: { color: '#CC33CC' }, 4: { color: '#FF6602' }, 5: { color: '#666666' }, 6: { color: '#FFCC32' }, 7: { color: '#993399' }, 8: { color: '#FF9966' }, 9: { color: '#CC6601' } } }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>

10

Updated solution here

1 Like