How To Add A Google Line Chart Widget - Adding a Google Chart which reads data from a CSV File

Posted: Wednesday, November 11, 2020 5:02:23 PM(UTC)

Andy.S

Member Original PosterPosts: 57

This may be of use to you if you want to include data from a 3rd party or trend style information not included in Lansweeper and draw a Google Chart to display the data, in the example below it displays AD information disabled / stale assets which would usually be automatically deleted from Lansweeper after 60 days, I run a powershell script to create a CSV file with data format (ADResults.CSV) :

Code:

Date,Total_Computers,Total_Computers_Enabled,Total_Computers_Disabled,Total_Servers,Total_Servers_Enabled,Total_Servers_Disabled,Total_Stale_Enabled_Assets_90_Days,Total_Newly_Created_24HRS
07/11/2020 12:00:00,2000,2300,100,200,140,176,22,13
08/11/2020 12:00:01,2010,2300,150,216,140,176,51,0
09/11/2020 11:13:28,2020,2301,110,219,143,176,41,4
09/11/2020 12:00:00,2000,2400,110,219,143,176,41,5

The Custome Widget is as follows, you will need to download loader.js and jquery.csv.js :

Code:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="LS.BaseControl" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="LS.Enums" %>

<%@ Import Namespace="LS" %>

<% Response.CacheControl = "no-cache";%>

<% Response.AddHeader("Pragma", "no-cache"); %>

<% Response.Expires = -1; %>

<%  LS.User.Current().CheckUserWebsiteAccess(); %>



<script type="text/javascript" src="/WidgetsCustom/loader.js"></script> 

   <script src="/WidgetsCustom/jquery.csv.js"> </script>


<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(BasicLine);

    function BasicLine() {
        $.get("/WidgetsCustom/ADResults.csv", function(csvString) {
            var arrayData = $.csv.toArrays(csvString, 
                                          {onParseValue: $.csv.hooks.castToScalar}),
                data      = new google.visualization.arrayToDataTable(arrayData),


    options = {
    title: 'Active Directory Asset Count',
    width: '100%',
    height: '100%',
    legend: {
        position: "right",color: "#000",
            fontName: "sans-serif",
            fontSize: 11
    },
    hAxis: {
        title: 'Date',
        titleTextStyle: {
            color: "#000",
            fontName: "sans-serif",
            fontSize: 16,
            bold: true,
            italic: false
 
        }
    },
    vAxis: {scaleType: 'log',
        title: 'Asset Count',
        titleTextStyle: { 
            color: "#000",
            fontName: "sans-serif",
            fontSize: 16,
            bold: true,
            italic: false
 
        }
    },
    annotations: {
        alwaysOutside: true,
        textStyle: {
            fontSize: 14,
            auraColor: 'none'
        }
    }
};
               
                chart     = new google.visualization
                              .LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        },
        'text');
    }
</script>


    <div id="chart_div" style="width: 1500px; height: 800px;"></div>


 
<%  

              
;%>  

  








</div>

Options