chart load

56 views
Skip to first unread message

Surendhar Chinna

unread,
Jun 22, 2022, 7:05:11 AM6/22/22
to Google Visualization API
Hi all,
i have a requirement for loading chart but had some error
below is my code 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
<xsl:template match="/">
<html>
  <head>
  <!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
    <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 = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        <!-- // For each orgchart box, provide the name, manager, and tooltip to show. -->
        data.addRows([
    <xsl:for-each select="DATA_DS/G_1">
      [{'v':'<xsl:value-of select="REPORTEE_NAME" disable-output-escaping="yes"/>',
      'f':'<xsl:value-of select="REPORTEE_FACE" disable-output-escaping="yes"/>'},
      '<xsl:value-of select="MANAGER_NAME" disable-output-escaping="yes"/>',
      '<xsl:value-of select="EMAIL_ADDRESS"/>\r\n<xsl:value-of select="PRIMARY_PHONE" disable-output-escaping="yes"/>'],
    </xsl:for-each>
        ]);

        <!-- // Create the chart. -->
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
   
        <!-- // selection -->
        google.visualization.events.addListener(chart, 'select', function () {
          <!-- // get the row of the node clicked -->
          var selection = chart.getSelection();
          var row = selection[0].row;
          <!-- // get a list of all collapsed nodes -->
          var collapsed = chart.getCollapsedNodes();
          <!-- // if the node is collapsed, we want to expand it
          // if it is not collapsed, we want to collapse it -->
          var collapse = (collapsed.indexOf(row) == -1);
          chart.collapse(row, collapse);
          <!-- // clear the selection so the next click will work properly -->
          chart.setSelection();
                });
    <!-- // Style -->
    <xsl:for-each select="DATA_DS/G_1">
      <xsl:choose><xsl:when test="G_2/CHK_COLLAPSE = 'Y'">
      data.setRowProperty(<xsl:value-of select="position() - 1"/>, 'style', 'background: none; box-shadow:none; border:2px solid #339966; background-color: #c6ecd9');
      </xsl:when>
      <xsl:when test="G_2/CHK_COLLAPSE = 'X'">
      data.setRowProperty(<xsl:value-of select="position() - 1"/>, 'style', 'background: none; box-shadow:none; border:2px solid #339966; background-color: #c6ecd9');
      </xsl:when>
      <xsl:otherwise>
      data.setRowProperty(<xsl:value-of select="position() - 1"/>, 'style', 'background: none; box-shadow:none; border:1px solid #3388dd');
      </xsl:otherwise></xsl:choose>
    </xsl:for-each>
        <!-- // Draw the chart, setting the allowHtml option to true for the tooltips. -->
        chart.draw(data, {'allowHtml':true, allowCollapse:true});
    <xsl:for-each select="DATA_DS/G_1">
      <xsl:choose><xsl:when test="G_2/CHK_COLLAPSE = 'Y'"> </xsl:when>
      <xsl:when test="position() = 1"> </xsl:when>
      <xsl:otherwise>
      chart.collapse(<xsl:value-of select="position() - 1"/>, true);
      </xsl:otherwise></xsl:choose>
    </xsl:for-each>
    }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>
Reply all
Reply to author
Forward
0 new messages