Android Question Treemap Chart. Does anyone know how to do it?

eperez · Aug 24, 2020

Hi everyone, I would like to make an app to show it to my geography class and I need to add a treemap chart. Does someone know how to do it or has some code to share it?

Thanks!

John Naylor · Aug 25, 2020

Maybe worth starting here for generating a tree map then you'll have to figure out displaying it as per your image.

eperez · Aug 25, 2020

Hi, thank for your answer! The difficult is arranging the panels automatically based on their weights, I can´t arrange them dynamically on the screen. If someone can help me I will be greatful!

John Naylor · Aug 25, 2020

eperez said:
Hi, thank for your answer! The difficult is arranging the panels automatically based on their weights, I can´t arrange them dynamically on the screen. If someone can help me I will be greatful!

Do you have a dataset handy as an example of what you are working with?

It shouldn't be too difficult but it is hard to get a clear direction without any data.

John Naylor · Aug 27, 2020

If anyone views this thread in the future I knocked up a rough and ready demo using Google Charts and a WebView control.

It needs a layout called '1' which just has a single control on it called WebView1

Using the example from Google I created a smart string (mainly for how it looks but also because I'd not come across them before so wanted to have a go) which contains all the relevant html and data, When the WebView is fully loaded I zoomed the view out as far as it will go. It could be made much more tidy by loading in the html from a template as I saw done in other posts then injecting the data but hey, I did say rough and ready! ;-)

B4X:

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
End Sub

Sub Globals
    Private WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)

    Activity.LoadLayout("1")        'Load in the layout file - It just contains a single web view
    WebView1.ZoomEnabled = True

    Dim html As String = CreateTreeMapHTML    'See sub for generating a string with html and data in it

    WebView1.LoadHtml(html)    'Display the chart
  
End Sub

Sub WebView1_PageFinished (target As String)
  
    'Zoom all the way out when the chart loads
  
    Do While WebView1.Zoom( False ) = True
    Loop
  
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Private Sub CreateTreeMapHTML As String

    'Simply create a smart string with all the relevant html in it
  
    Dim SmartString As String = $"
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
    ['Location', 'Parent', 'Population', '(color)'],
    ['Global',    null,                 0,                               0],
    ['Brazil',    'Global',            11,                              0],
    ['USA',       'Global',            52,                              0],
    ['Mexico',    'Global',            24,                              0],
    ['Canada',    'Global',            16,                              0],
    ['France',    'Global',             42,                              0],
    ['Germany',   'Global',             31,                              0],
    ['Sweden',    'Global',             22,                              0],
    ['Italy',     'Global',             17,                              0],
    ['UK',        'Global',             21,                              0],
    ['China',     'Global',               36,                              0],
    ['Japan',     'Global',               20,                              0],
    ['India',     'Global',               40,                              0],
    ['Laos',      'Global',               4,                               0],
    ['Mongolia',  'Global',               1,                               0],
    ['Israel',    'Global',               12,                              0],
    ['Iran',      'Global',               18,                              0],
    ['Pakistan',  'Global',               11,                              0],
    ['Egypt',     'Global',             21,                              0],
    ['S. Africa', 'Global',             30,                              0],
    ['Sudan',     'Global',             12,                              0],
    ['Congo',     'Global',             10,                              0],
    ['Zaire',     'Global',             8,                               0]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
"$

    Return SmartString
  
  
End Sub

Android Question Treemap Chart. Does anyone know how to do it?

eperez

New Member

John Naylor

Active Member

eperez

New Member

John Naylor

Active Member

John Naylor

Active Member

Similar Threads