Example of Google Chart usage

Dont create your support topics here! No new topics with questions allowed!

Moderator: crythias

Forum rules
Dont create your support topics here! No new topics with questions allowed!
Post Reply
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Example of Google Chart usage

Post by crythias »

This is an advanced subject. If you don't know what you're doing, you won't be happy with the result.
This is an Example, and as such, it may not work for your case, or you may want something else to happen.
Please don't PM me with configuration for your implementation. If you know why you want this, you probably know what data you seek, and what result you want to show.
This *particular* example may violate your own internal privacy procedures because it shows your agent list, along with a count of what they've opened and closed today.
There are no filters, safeguards, or ACL applied.


This query expands on the implementation of the extdata.pl example by hand-creating a JSON result ready for implementation with Google Charts API.

As an example, this gets today's open and close tickets per agent in a nice graph.
For colors,sizes, and different chart types, you'll want to consult the Google Charts documentation.
For specific reporting queries, create a topic in the forum, and read up on the OTRS API.
If you see a bug in this implementation, pm me or reply here.

graphdata.pl:

Code: Select all

#!/usr/bin/perl -w
use strict;
use warnings;

use CGI qw(:standard);
#use JSON;

print header(-type => 'application/json');
#print header(-type => 'text/plain');

# use ../../ as lib location
use FindBin qw($Bin);
use lib "$Bin/../..";
use lib "$Bin/../../Kernel/cpan-lib";
use lib "$Bin/../../Custom";

use Kernel::Config;
use Kernel::System::Encode;
use Kernel::System::Log;
use Kernel::System::Ticket;
use Kernel::System::Time;
use Kernel::System::Main;
use Kernel::System::DB;
use Kernel::System::User;
use Kernel::System::Stats;
use Kernel::System::Group;
use Kernel::System::CSV;

        my %CommonObject = ();
        $CommonObject{ConfigObject} = Kernel::Config->new();
        $CommonObject{EncodeObject} = Kernel::System::Encode->new(%CommonObject);
        $CommonObject{LogObject}    = Kernel::System::Log->new(
    LogPrefix => 'ExtData',
    %CommonObject,
        );
        $CommonObject{TimeObject} = Kernel::System::Time->new(%CommonObject);
        $CommonObject{MainObject}   = Kernel::System::Main->new(%CommonObject);
        $CommonObject{DBObject}     = Kernel::System::DB->new(
                %CommonObject,
        #       DatabaseDSN  => 'DBI:odbc:database=123;host=localhost;',
        #  DatabaseUser => 'user',
        #       DatabasePw   => 'somepass',
        #       Type         => 'mysql',
        );
        $CommonObject{TicketObject} = Kernel::System::Ticket->new(%CommonObject);
        $CommonObject{GroupObject} = Kernel::System::Group->new(%CommonObject);
        $CommonObject{CSVObject} = Kernel::System::CSV->new(%CommonObject);
        $CommonObject{UserObject} = Kernel::System::User->new(%CommonObject);

        ###
        # ticket count open/closed per agent today
        #
        ###
        my %UserList = $CommonObject{UserObject}->UserSearch(
                UserLogin => '*',
                Valid => 1,
        );
        my $TimeNow = $CommonObject{TimeObject}->SystemTime();

        my ( $Sec, $Min, $Hour, $Day, $Month, $Year, $WeekDay )
            = $CommonObject{TimeObject}->SystemTime2Date(
            SystemTime => $TimeNow,
            );
   my $dataTable = '{ "cols": [ {"id":"","label":"Agent","pattern":"","type":"string"},
                        {"id":"","label":"Open","pattern":"","type":"number"},
                        {"id":"","label":"Closed","pattern":"","type":"number"}],"rows": [';
   while ( my ($key, $value) = each %UserList) {

        $dataTable .= '{"c":[{"v":"' . $value . '"}, ';
        my $CountCreated = $CommonObject{TicketObject}->TicketSearch(

            # cache search result 30 min
#            CacheTTL => 60 * 30,
            # tickets with create time after ... (ticket newer than this date) (optional)
            TicketCreateTimeNewerDate => "$Year-$Month-$Day 00:00:00",

            # tickets with created time before ... (ticket older than this date) (optional)
            TicketCreateTimeOlderDate => "$Year-$Month-$Day 23:59:59",

            Result     => 'COUNT',
            OwnerIDs => [$key],

            # search with user permissions
            UserID => 1,
        );
        $dataTable .=  '{"v": ' . $CountCreated .'}, ';

        my $CountClosed = $CommonObject{TicketObject}->TicketSearch(

            # cache search result 30 min
#            CacheTTL => 60 * 30,

            # tickets with create time after ... (ticket newer than this date) (optional)
            TicketCloseTimeNewerDate => "$Year-$Month-$Day 00:00:00",

            # tickets with created time before ... (ticket older than this date) (optional)
            TicketCloseTimeOlderDate => "$Year-$Month-$Day 23:59:59",

            OwnerIDs => [$key],
            Result     => 'COUNT',

            # search with user permissions
            UserID => 1,
        );
        $dataTable .= '{"v": ' . $CountClosed . '}]},';
}
        $dataTable = substr($dataTable, 0, -1);
        $dataTable .= "]}";
print $dataTable;
1;
 
an example document to view the result (modify the line containing http://yourotrsserver/otrs/graphdata.pl):

Code: Select all

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
         var jsonData = $.ajax({
            url: "http://yourotrsserver/otrs/graphdata.pl", 
            dataType:"json",
            async: false
        }).responseText;

        var data = new google.visualization.DataTable(jsonData);

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240});
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

Hi this is exactly what i was looking for the supervisor reports part!

However the following issues were noticed:
the pl script did not work untill i changed the path. As i am not familiar with perl i just added the lines instead of editing. After doing this change the file worked fine when it was placed in the bin.

Code: Select all

    #!/usr/bin/perl -w
    use strict;
    use warnings;

    use CGI qw(:standard);
    #use JSON;

    print header(-type => 'application/json');
    #print header(-type => 'text/plain');

    # use ../../ as lib location
    use FindBin qw($Bin);
    use lib "$Bin/..";
use lib "$Bin/../Kernel/cpan-lib";
use lib "$Bin/../Custom";
    use lib "$Bin/../..";
    use lib "$Bin/../../Kernel/cpan-lib";
    use lib "$Bin/../../Custom";

    use Kernel::Config;
    use Kernel::System::Encode;
    use Kernel::System::Log;
    use Kernel::System::Ticket;
    use Kernel::System::Time;
    use Kernel::System::Main;
    use Kernel::System::DB;
    use Kernel::System::User;
    use Kernel::System::Stats;
    use Kernel::System::Group;
    use Kernel::System::CSV;

            my %CommonObject = ();
            $CommonObject{ConfigObject} = Kernel::Config->new();
            $CommonObject{EncodeObject} = Kernel::System::Encode->new(%CommonObject);
            $CommonObject{LogObject}    = Kernel::System::Log->new(
        LogPrefix => 'ExtData',
        %CommonObject,
            );
            $CommonObject{TimeObject} = Kernel::System::Time->new(%CommonObject);
            $CommonObject{MainObject}   = Kernel::System::Main->new(%CommonObject);
            $CommonObject{DBObject}     = Kernel::System::DB->new(
                    %CommonObject,
            #       DatabaseDSN  => 'DBI:odbc:database=x;host=localhost;',
            #  DatabaseUser => 'x',
            #       DatabasePw   => 'x',
            #       Type         => 'mysql',
            );
            $CommonObject{TicketObject} = Kernel::System::Ticket->new(%CommonObject);
            $CommonObject{GroupObject} = Kernel::System::Group->new(%CommonObject);
            $CommonObject{CSVObject} = Kernel::System::CSV->new(%CommonObject);
            $CommonObject{UserObject} = Kernel::System::User->new(%CommonObject);

            ###
            # ticket count open/closed per agent today
            #
            ###
            my %UserList = $CommonObject{UserObject}->UserSearch(
                    UserLogin => '*',
                    Valid => 1,
            );
            my $TimeNow = $CommonObject{TimeObject}->SystemTime();

            my ( $Sec, $Min, $Hour, $Day, $Month, $Year, $WeekDay )
                = $CommonObject{TimeObject}->SystemTime2Date(
                SystemTime => $TimeNow,
                );
       my $dataTable = '{ "cols": [ {"id":"","label":"Agent","pattern":"","type":"string"},
                            {"id":"","label":"Open","pattern":"","type":"number"},
                            {"id":"","label":"Closed","pattern":"","type":"number"}],"rows": [';
       while ( my ($key, $value) = each %UserList) {

            $dataTable .= '{"c":[{"v":"' . $value . '"}, ';
            my $CountCreated = $CommonObject{TicketObject}->TicketSearch(

                # cache search result 30 min
    #            CacheTTL => 60 * 30,
                # tickets with create time after ... (ticket newer than this date) (optional)
                TicketCreateTimeNewerDate => "$Year-$Month-$Day 00:00:00",

                # tickets with created time before ... (ticket older than this date) (optional)
                TicketCreateTimeOlderDate => "$Year-$Month-$Day 23:59:59",

                Result     => 'COUNT',
                OwnerIDs => [$key],

                # search with user permissions
                UserID => 1,
            );
            $dataTable .=  '{"v": ' . $CountCreated .'}, ';

            my $CountClosed = $CommonObject{TicketObject}->TicketSearch(

                # cache search result 30 min
    #            CacheTTL => 60 * 30,

                # tickets with create time after ... (ticket newer than this date) (optional)
                TicketCloseTimeNewerDate => "$Year-$Month-$Day 00:00:00",

                # tickets with created time before ... (ticket older than this date) (optional)
                TicketCloseTimeOlderDate => "$Year-$Month-$Day 23:59:59",

                OwnerIDs => [$key],
                Result     => 'COUNT',

                # search with user permissions
                UserID => 1,
            );
            $dataTable .= '{"v": ' . $CountClosed . '}]},';
    }
            $dataTable = substr($dataTable, 0, -1);
            $dataTable .= "]}";
    print $dataTable;
    1;
     
Though it was not said, i assumed that we had to enter the database details inside? Even with your default values command prompt was able to execute the script.

Now the html, the file should link to a jquery script, not all of us have it :) so i used http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js
as the source and i could get a red box to come out, otherwise i got a blank page.

now comes the final problem
i get the message Table has no columns.× when i open the html file
Still not sure where i should save the file, so ive tried it at a couple of locations but still get the same message :(
juanman80
Znuny newbie
Posts: 44
Joined: 11 Nov 2011, 10:30
Znuny Version: 5.0.15

Re: Example of Google Chart usage

Post by juanman80 »

I managed to make it work with the provided jquery in otrs (in

Code: Select all

/otrs-web/js/thirdparty/jquery-1.6.4/jquery.js
).
I had a Invalid JSON String when retrieving data from all my agents, but it worked when limited to just 2 agents. Maybe there is a max JSON length.
Anyway, it did work without any change.
OTRS 5.0.15 on CentOSLinux with MariaDB database connected to an Active Directory for Agents and Customers.
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Example of Google Chart usage

Post by crythias »

arvas wrote: i assumed that we had to enter the database details inside? Even with your default values command prompt was able to execute the script.
No. Database information comes from Config.pm. Commented information was in case you had a different (non-otrs) source of data from which to report.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

juan how did you limit it to just 2 agents? could you share the code you used to make it work?
juanman80
Znuny newbie
Posts: 44
Joined: 11 Nov 2011, 10:30
Znuny Version: 5.0.15

Re: Example of Google Chart usage

Post by juanman80 »

arvas wrote:juan how did you limit it to just 2 agents? could you share the code you used to make it work?
I think I just deleted some agents... after all, it was in my Test environment ;)

To make it work, I just copied crythias' original code, with the following change in var/httpd/htdocs/graphdata.html:

Code: Select all

        <!-- <script type="text/javascript" src="jquery-1.7.2.min.js"></script> -->
        <script type="text/javascript" src="/otrs-web/js/thirdparty/jquery-1.6.4/jquery.js"></script>
and, obviously, the url in jsonData to point to my test server.
OTRS 5.0.15 on CentOSLinux with MariaDB database connected to an Active Directory for Agents and Customers.
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Example of Google Chart usage

Post by crythias »

You can also change the UserSearch criteria. I haven't found a good "or" but you might push a result onto another result.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

ah... deleting the actual users... i cant do that, mines a live environment ><
The only last thing i can think of why this is not working is the location the documents are placed...
Where did you place this html document? You did save the document as a html right?
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

Hi, please ignore my post just now,

i just realised you gave me the path and filename as var/httpd/htdocs/graphdata.html

Where did you place the .pl file? I tried placing that file in the cgi bin and bin but both do not seem to generate any result...
How do you execute the file? When i double click it gives me Table has no columns.×
juanman80
Znuny newbie
Posts: 44
Joined: 11 Nov 2011, 10:30
Znuny Version: 5.0.15

Re: Example of Google Chart usage

Post by juanman80 »

arvas wrote:Hi, please ignore my post just now,

i just realised you gave me the path and filename as var/httpd/htdocs/graphdata.html

Where did you place the .pl file? I tried placing that file in the cgi bin and bin but both do not seem to generate any result...
How do you execute the file? When i double click it gives me Table has no columns.×
Oh, man! you shouldn't be making tests in a live environment! you should have a test environment in which... well, test things like this!
my .pl is $OTRS_HOME/bin/cgi-bin/graphdata.pl
my .html is in var/httpd/htdocs/graphdata.html and the URL to get it is http://my_otrs_server/otrs-web/graphdata.html
OTRS 5.0.15 on CentOSLinux with MariaDB database connected to an Active Directory for Agents and Customers.
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

ITS ALIVE!!!!!
haha thanks juan!
Yea but with the kind of resources i have, i only have the live machine to work on at the moment... I have found OTRS to be quite resiliant to my tamperings though! lol...

Ok my chart works too! yippee!

What does Open mean? that they have viewed these number of tickets? or they are the owner of this many number of tickets who's state is open?
Any idea how i could modify the timeline to have additional days? (say a period of last 7 days or last month?)
crythias
Moderator
Posts: 10169
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: Example of Google Chart usage

Post by crythias »

arvas wrote:What does Open mean?
It means the state is open. (New is email that hasn't been responded to. Open is any other non-closed ticket, generally).
arvas wrote:the owner of this many number of tickets who's state is open?
yes
arvas wrote:Any idea how i could modify the timeline to have additional days? (say a period of last 7 days or last month?)

Code: Select all

        my $TimeNow = $CommonObject{TimeObject}->SystemTime();
is now in seconds. So you can subtract 7 days * 24 hours * 60 minutes * 60 seconds from SystemTime() to get last 7 days.

Code: Select all

        my $TimeNow = $CommonObject{TimeObject}->SystemTime() - 7*24*60*60;
Although at the next question you're about to ask, please ask in the forums rather than here. It's a pain to moderate "howto" discussions.
OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
arvas
Znuny newbie
Posts: 44
Joined: 15 Oct 2012, 09:08
Znuny Version: 3.0.11

Re: Example of Google Chart usage

Post by arvas »

haha ok thx alot crythias, will shift over there! :D
Post Reply