LogoLogo
  • AttackForge Support
  • Release Notes
    • 2025
    • 2024
    • 2023
    • 2022
    • 2021
    • 2020
    • 2019
  • Core & Enterprise
    • Getting Started
      • How It Works
      • Requesting A Project
      • Creating & Updating Projects
      • Invite User To Project
      • View Project Team
      • Project Scope
      • Project Workspace
      • Project Notes
      • Project Pages
      • Test Cases
      • Creating Vulnerabilities
      • Updating Vulnerabilities
      • Review & QA
      • Attack Chains
      • Reporting
      • Retesting & Remediation
      • Notifications
      • Custom Fields & Forms
      • Vulnerability SLAs
      • User Settings
      • Login Redirects
    • Modules
      • Dashboard
      • Analytics
      • Vulnerabilities
      • Projects
      • Scheduling
      • Portfolios
      • Groups
      • Attack Chains
      • Assets
      • Writeups
      • Test Suites
      • Report Templates
        • Overview
        • Tutorial
        • Tips & Tricks
        • Troubleshooting
        • Template - Report Templates
        • Template - Tags
        • Template - Options
        • Template - Functions
        • Template - Filters
        • Template - Styles
        • Template - Tables
        • Template - Charts
        • Template - Conditions
        • ReportGen CLI
        • ReportGen Library
      • Users
      • Administration
      • Flows
      • Self-Service RESTful API
        • GETTING STARTED
        • EXPORTING TO CSV
        • ADVANCED QUERY FILTER
        • ActivateUser
        • AddProjectMembershipAdministrators
        • AddTestcaseToTestsuite
        • AddTestcasesToTestsuite
        • AddUserToGroup
        • ApproveProjectRequestById
        • ArchivePortfolio
        • ArchiveProject
        • CancelProjectRetestRound
        • CloneProject
        • CompleteProjectRetestRound
        • CreateAssetInLibrary
        • CreateGroup
        • CreatePortfolio
        • CreateProject
        • CreateProjectNote
        • CreateProjectRequest
        • CreateProjectTestCase
        • CreateProjectWorkspaceNote
        • CreateRemediationNote
        • CreateScope
        • CreateTestcaseNote
        • CreateTestsuite
        • CreateUser
        • CreateUsers
        • CreateVulnerability
        • CreateVulnerabilityBulk
        • CreateVulnerabilityLibraryIssue
        • CreateVulnerabilityWithLibrary
        • DeactivateUser
        • DownloadProjectTestCaseFile
        • DownloadProjectTestCaseNoteFile
        • DownloadProjectTestCaseWorkspaceNoteFile
        • DownloadVulnerabilityEvidence
        • DownloadVulnerabilityLibraryFile
        • DownloadWorkspaceFile
        • GetApplicationAuditLogs
        • GetAssets
        • GetAssetsByGroup
        • GetAssetInLibrary
        • GetAssetsInLibrary
        • GetCustomFieldsConfig
        • GetFormConfig
        • GetGroup
        • GetGroups
        • GetMostCommonVulnerabilities
        • GetMostFailedTestcases
        • GetMostVulnerableAssets
        • GetPortfolio
        • GetPortfolios
        • GetPortfolioStream
        • GetProjectAuditLogs
        • GetProjectById
        • GetProjects
        • GetProjectsAndVulnerabilities
        • GetProjectsByGroup
        • GetProjectMembershipAdministrators
        • GetProjectNotes
        • GetProjectReport
        • GetProjectReportData
        • GetProjectRequests
        • GetProjectRequestById
        • GetProjectTestcasesById
        • GetProjectVulnerabilitiesById
        • GetProjectWorkspace
        • GetTestsuiteById
        • GetTestsuites
        • GetUserByEmail
        • GetUserById
        • GetUserByUsername
        • GetUserAuditLogs
        • GetUserGroups
        • GetUserLoginHistory
        • GetUserProjects
        • GetUsers
        • GetVulnerabilityById
        • GetVulnerabilities
        • GetVulnerabilitiesByAssetName
        • GetVulnerabilitiesByGroup
        • GetVulnerabilityLibraryIssues
        • GetVulnerabilityRevisionHistory
        • InviteUserToProject
        • InviteUsersToProjectTeam
        • RejectProjectRequestById
        • RegenerateAPIKey
        • RemoveProjectMembershipAdministrators
        • RemoveProjectTeamMembers
        • RequestNewProjectRetest
        • RestoreProject
        • SendEmail
        • SendDailyCommencementEmail
        • SendDailyCompletionEmail
        • UpdateAssetInLibrary
        • UpdateCustomFieldsConfig
        • UpdateExecSummaryNotes
        • UpdateFormConfig
        • UpdateGroup
        • UpdatePortfolio
        • UpdateProjectById
        • UpdateProjectMembershipAdministrators
        • UpdateProjectNote
        • UpdateProjectRequestById
        • UpdateProjectRetestRound
        • UpdateProjectWorkspaceNote
        • UpdateScope
        • UpdateTestcase
        • UpdateTestcaseOnTestsuite
        • UpdateTestsuite
        • UpdateUserAccessOnGroup
        • UpdateUserAccessOnProject
        • UpdateUser
        • UpdateVulnerabilityById
        • UpdateVulnerabilityLibraryIssue
        • UpdateVulnerabilitySLAs
        • UpdateVulnerabilityWithLibrary
        • UploadTestcaseFile
        • UploadVulnerabilityEvidence
        • UploadVulnerabilityLibraryFile
        • UploadWorkspaceFile
      • Self-Service Events API
        • GETTING STARTED
        • Project Created
        • Project Updated
        • Project Request Created
        • Project Request Updated
        • Project Retest Requested
        • Project Retest Completed
        • Project Retest Cancelled
        • Vulnerability Created
        • Vulnerability Updated
        • Vulnerability Evidence Created
        • Vulnerability Evidence Updated
        • Vulnerability Remediation Note Created
        • Vulnerability Remediation Note Updated
    • AFScript
    • Access Control Matrix
    • Raising Support Tickets
    • Security
  • Contact
Powered by GitBook

Check YouTube for more tutorials: https://youtube.com/@attackforge

On this page
  • Pie Chart
  • Example 1: Pie Chart showing unique vulnerabilities
  • Example 2: Pie Chart using data from custom variables
  • Example 3: Donut Pie Chart showing unique vulnerabilities
  • Configuration Options
  • Bar Chart
  • Example 1: Horizontal Bar Chart showing unique vulnerabilities
  • Example 2: Vertical Bar Chart showing unique vulnerabilities
  • Example 3: Bar Chart using data from custom variables
  • Configuration Options
  1. Core & Enterprise
  2. Modules
  3. Report Templates

Template - Charts

PreviousTemplate - TablesNextTemplate - Conditions

Last updated 7 months ago

UPDATED: Please head over to our new GitHub Support Site for help, examples, tips and tricks:

You can add charts to your reports. The following charts are supported in ReportGen v2.5.4 or above.

  • Pie chart

  • Bar chart

Pie Chart

Example 1: Pie Chart showing unique vulnerabilities

This example will produce a pie chart using data from existing tags e.g. {totalCriticalVulns}, {totalHighVulns}, etc. to populate the values in the chart.

{#json}{=< >=}</><%$chart[
   {
      “type”: “pie”,
      “name”: “unique_vulns_by_priority_pie”,
      “options”: {
         “title”: “”, 
         “data”: {
            “names”: [
	       “Critical”,
	       “High”,
	       “Medium”,
 	       “Low”,
   	       “Info”
	    ],
            “values”: [
               “%(totalCriticalVulns)”,
	       “%(totalHighVulns)”,
	       “%(totalMediumVulns)”,
	       “%(totalLowVulns)”,
	       “%(totalInfoVulns)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”,
	       “#00B050”
            ]
         },
         “width”: 600,
         “height”: 400
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Example 2: Pie Chart using data from custom variables

This example will produce a pie chart for unique 'Internal Findings'. This example uses filters and functions in order to pre-calculate 'Internal Findings' into variables, then refers to these variables in the chart to populate the values in the chart.

This example uses custom tags to filter 'Internal Findings'. If you are not sure how to use custom tags, please check custom tags page for more details.

{$declare[CriticalInternalFindings][0]}
{$declare[HighInternalFindings][0]}
{$declare[MediumInternalFindings][0]}
{$declare[LowInternalFindings][0]}
{$declare[InfoInternalFindings][0]}
{#vulnerabilities | filterBy:’AffectedAssetCustomTags’:[‘Source:Internal’]}
{#priority == ‘Critical’}{$increment[CriticalInternalFindings][1]}{/}
{#priority == ‘High’}{$increment[HighInternalFindings][1]}{/}
{#priority == ‘Medium’}{$increment[MediumInternalFindings][1]}{/}
{#priority == ‘Low’}{$increment[LowInternalFindings][1]}{/}
{#priority == ‘Info’}{$increment[InfoInternalFindings][1]}{/}
{/}

{#json}{=< >=}</><%$chart[
   {
      “type”: “pie”,
      “name”: “unique_internal_findings_pie”,
      “options”: {
         “title”: “”, 
         “data”: {
            “names”: [
	       “Critical”,
	       “High”,
	       “Medium”,
 	       “Low”
	    ],
            “values”: [
               “$(CriticalInternalFindings)”,
	       “$(HighInternalFindings)”,
	       “$(MediumInternalFindings)”,
	       “$(LowInternalFindings)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”
            ]
         },
         “width”: 600,
         “height”: 400
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Example 3: Donut Pie Chart showing unique vulnerabilities

The example will produce a donut pie chart using data from existing tags e.g. {totalCriticalVulns}, {totalHighVulns}, etc. to populate the values in the chart. It sets the "inner_radius" to a value to create the donut hole in the center of the chart.

{#json}{=< >=}</><%$chart[
   {
      “type”: “pie”,
      “name”: “unique_vulns_by_priority_pie”,
      “options”: {
         “title”: “”, 
         “inner_radius”: 130,
         “data”: {
            “names”: [
	       “Critical”,
	       “High”,
	       “Medium”,
 	       “Low”,
   	       “Info”
	    ],
            “values”: [
               “%(totalCriticalVulns)”,
	       “%(totalHighVulns)”,
	       “%(totalMediumVulns)”,
	       “%(totalLowVulns)”,
	       “%(totalInfoVulns)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”,
	       “#00B050”
            ]
         },
         “width”: 600,
         “height”: 400
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Configuration Options

  • type (required): pie.

  • name (required): must be unique name for the chart. String.

  • options (required)

    • inner_radius (optional): used to create a donut chart. Sets the radius of the inner white circle. Number. Default is 0.

    • title (optional): display a title above the chart. String.

    • title_font_size (optional): sets font size for title. Number. Default is 18.

    • title_offset (optional): sets the distance between the title and the top boundary. Number. Default is 25.

    • labels_inside_chart (optional): includes labels inside chart. true or false. defaults to false.

    • data (required)

      • names (required): labels for each of the sections within the chart. List of strings.

      • names_font_size (optional): sets font size for names. Number. Default is 14.

      • values (required): data for each of the sections within the chart. List of strings, numbers, %(scope), $(variables).

      • values_font_size (optional): sets font size for values. Number. Default is 14.

      • colors (optional): colors to assign for each value. Supports hex codes and system color names. List of strings. Default is black.

    • width (optional): sets width of chart in pixels. Number. Default is 640.

    • height (optional): sets height of chart in pixels. Number. Default is 400.

    • margin (optional)

      • top (optional): sets the distance between the top of the chart, and the top boundary. Number. Default is 0.

      • bottom (optional): sets the distance between the bottom of the chart, and the bottom boundary. Number. Default is 0.

      • left (optional): sets the distance between the left-end of the chart, and the left boundary. Number. Default is 0.

      • right (optional): sets the distance between the right-end of the chart, and the right boundary. Number. Default is 0.

Bar Chart

Example 1: Horizontal Bar Chart showing unique vulnerabilities

This example will produce a horizontal bar chart using data from existing tags e.g. {totalCriticalVulns}, {totalHighVulns}, etc. to populate the values in the chart.

{#json}{=< >=}</><%$chart[
   {
      “type”: “bar”,
      “name”: “unique_vulns_by_priority_bar_horizontal”,
      “options”: {
         “orientation”: “horizontal”,
         “title”: “Unique Vulnerabilities”, 
         “data”: {
            “names_label”: “Priority”,
            “names”: [
	       “critical”,
	       “high”,
	       “medium”,
 	       “low”,
   	       “info”
	    ],
            “values_label”: “Vulnerabilities”,
            “values”: [
               “%(totalCriticalVulns)”,
	       “%(totalHighVulns)”,
	       “%(totalMediumVulns)”,
	       “%(totalLowVulns)”,
	       “%(totalInfoVulns)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”,
	       “#00B050”
            ]
         },
         “width”: 400,
         “height”: 300
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Example 2: Vertical Bar Chart showing unique vulnerabilities

This example will produce a vertical bar chart using data from existing tags e.g. {totalCriticalVulns}, {totalHighVulns}, etc. to populate the values in the chart.

{#json}{=< >=}</><%$chart[
   {
      “type”: “bar”,
      “name”: “unique_vulns_by_priority_bar_horizontal”,
      “options”: {
         “orientation”: “vertical”,
         “title”: “Unique Vulnerabilities”, 
         “data”: {
            “names_label”: “Priority”,
            “names”: [
	       “critical”,
	       “high”,
	       “medium”,
 	       “low”,
   	       “info”
	    ],
            “values_label”: “Vulnerabilities”,
            “values”: [
               “%(totalCriticalVulns)”,
	       “%(totalHighVulns)”,
	       “%(totalMediumVulns)”,
	       “%(totalLowVulns)”,
	       “%(totalInfoVulns)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”,
	       “#00B050”
            ]
         },
         “width”: 400,
         “height”: 300
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Example 3: Bar Chart using data from custom variables

This example will produce a horizontal and vertical bar chart for unique 'Internal Findings'. This example uses filters and functions in order to pre-calculate 'Internal Findings' into variables, then refers to these variables in the chart to populate the values in the chart.

This example uses custom tags to filter 'Internal Findings'. If you are not sure how to use custom tags, please check custom tags page for more details.

{$declare[CriticalInternalFindings][0]}
{$declare[HighInternalFindings][0]}
{$declare[MediumInternalFindings][0]}
{$declare[LowInternalFindings][0]}
{$declare[InfoInternalFindings][0]}
{#vulnerabilities | filterBy:’AffectedAssetCustomTags’:[‘Source:Internal’]}
{#priority == ‘Critical’}{$increment[CriticalInternalFindings][1]}{/}
{#priority == ‘High’}{$increment[HighInternalFindings][1]}{/}
{#priority == ‘Medium’}{$increment[MediumInternalFindings][1]}{/}
{#priority == ‘Low’}{$increment[LowInternalFindings][1]}{/}
{#priority == ‘Info’}{$increment[InfoInternalFindings][1]}{/}
{/}

{#json}{=< >=}</><%$chart[
   {
      “type”: “bar”,
      “name”: “unique_vulns_by_priority_bar_horizontal”,
      “options”: {
         “orientation”: “horizontal”,
         “title”: “Unique Vulnerabilities”, 
         “data”: {
            “names_label”: “Priority”,
            “names”: [
	       “critical”,
	       “high”,
	       “medium”,
 	       “low”,
   	       “info”
	    ],
            “values_label”: “Vulnerabilities”,
            “values”: [
               “$(CriticalInternalFindings)”,
	       “$(HighInternalFindings)”,
	       “$(MediumInternalFindings)”,
	       “$(LowInternalFindings)”,
	       “$(InfoInternalFindings)”
	    ],
            “colors”: [
               “#7030A0”,
	       “#FF0000”,
	       “#FFC000”,
	       “#0070C0”,
	       “#00B050”
            ]
         },
         “width”: 400,
         “height”: 300
      }
   }
]><#json><={ }=>{/}

The following chart is produced:

Switching horizontal to vertical will produce the following:

Configuration Options

  • type (required): bar.

  • name (required): must be unique name for the chart. String.

  • options (required)

    • orientation (required): must be vertical or horizontal. String.

    • title (optional): display a title above the chart. String.

    • title_font_size (optional): sets font size for title. Number. Default is 18.

    • title_offset (optional): sets the distance between the title and the top boundary. Number. Default is 25.

    • data (required)

      • names_label (optional): sets a label for the names. String.

      • names_label_font_size (optional): sets font size for the names label. Number. Default is 18.

      • names_label_offset (optional): sets the distance between the names label and the left-boundary (for horizontal charts) or bottom-boundary (for vertical charts). Number. Default is 5 for vertical bar chart and 15 for horizontal bar chart.

      • names (required): labels for each of the bars within the chart. List of strings.

      • names_font_size (optional): sets font size for names. Number. Default is 10.

      • values_label (optional): sets a label for the values. String.

      • values_label_font_size (optional): sets font size for the values label. Number. Default is 18.

      • values_label_offset (optional): sets the distance between the values label and the bottom-boundary (for horizontal charts) or left-boundary (for vertical charts). Number. Default is 15 for vertical bar chart and 5 for horizontal bar chart.

      • values (required): data for each of the bars within the chart. List of strings, numbers, %(scope), $(variables)

      • values_font_size (optional): sets font size for values. Number. Default is 10.

      • colors (optional): colors to assign for each value. Supports hex codes and system color names. List of strings. Default is black.

    • y_axis_increase_ticks_by_percentage (optional): For vertical bar charts, increase the y-axis by a percentage.

    • width (optional): sets width of chart in pixels. Number. Default is 640.

    • height (optional): sets height of chart in pixels. Number. Default is 400.

    • margin (optional)

      • top (optional): sets the distance between the top of the chart, and the top boundary. Number. Default is 50.

      • bottom (optional): sets the distance between the bottom of the chart, and the bottom boundary. Number. Default is 50.

      • left (optional): sets the distance between the left-end of the chart, and the left boundary. Number. Default is 50.

      • right (optional): sets the distance between the right-end of the chart, and the right boundary. Number. Default is 0 for vertical charts and 10 for horizontal charts.

https://github.com/AttackForge/ReportGen