Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

How to add the D3.js library to Power Dashboard Reports and Gadgets. In this example, we will be following this line chart example from Google.

Instructions

Following the directions as found on this Google documentation, paste the HTML code into a SIL

  1. Following the directions as found on this Google documentation, paste the HTML code into a SIL Template file as detailed in this documentation.

  2. When setting up the Copy the body html from the Google line chart example, add it to a file in the “silprograms” file that ends with “.tpl”. Add “html” tags as pictured below.

    Code Block
    <html>
      <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
      </body>
    </html>

  3. Create a new SIL Reporting Gadget, select the .tpl file you just created.

    Image Added

  4. Add the JavaScript from the Google line chart example

    Code Block
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
      ]);
    
      var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
      };
    
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    
      chart.draw(data, options);
    }

  5. Add the following at the end of the JavaScript so that it loads the D3.js library.

    Code Block
    var script = document.createElement('script');
    script.src = "https://www.gstatic.com/charts/loader.js";
    document.body.appendChild(script);

  6. Toggle on the “Use custom javascript file?” and select the javascript file created in the previous step.

...

  1. Image Added
Note

Make sure that the file script created in step 1 ends in .tpl, or the chart will not render properly

...