Visualize GitHub code contribution using app link | Targetprocess - Enterprise Agility Solution
3 years ago

Visualize GitHub code contribution using app link

Hello, dear friends. As you know we have added the possibility to visualize data using external links. It is not a big deal to visualize the data by the link from apps which already have well-formed JSON or CSV data via their API. But sometimes data is not ready to be visualized without some transformation. I am going to discover how to visualize data using link app to create charts from the data which requires pre-processing. We will use GitHub API weekly contributions for this purpose. Find below step by step explanation.

  • Create HTTP application

    First of all, we need to create an application which will connect to the external platform, process data in the way we need and expose the processed data to the world using GET route or using several GET routes. Let's assume we want to visualize weekly contributions to GitHub for all repositories of the organization or for the team of the organization. It is not possible to do out the box using GitHub API, because GitHub allows retrieving contribution stats only by one repository – Looks like we need to create some code which will combine stats data from GitHub into one single data point.

    So we have created node.js application for that. The source code is available at

    The API of the application:

    GET: /me

    Retrieve stats of repositories where you are added as a collaborator.

    GET: /:organization

    Retrieve stats of repositories by the organization.
    - :organization is the organization at GitHub.

    GET: /:owner/:repository

    Retrieve stats of concrete repository.
    - :owner is user or organization at GitHub
    - :repository is the name of the repository

    GET: /:organization/team/:team

    Retrieve stats of repositories by the team.
    - :organization is an organization at GitHub
    - :team is team name or slug at GitHub

    We implemented a way to authenticate the user to his GitHub account using query token or special request header posted to our application.

  • Deploy created application

    After creating application we need to deploy it to some cloud, like Heroku or Amazon, or we can use our own cluster to make it available at some static address or IP. We used our cluster for that and configured it to be available at

  • Create Link Account

    Now we need to configure account for the link app in Visual Editor, so let's proceed with that:

    1. Start creating new report, select "Chart from link", click on "Switch accounts" and click "Add Account" button

    Targetprocess Image

    2. Generate personal access token in GitHub at, copy it into value textbox, fill the rest account form and click connect.

    Targetprocess Image


  • Provide link

    It is time to provide the link to repositories I am going to visualize. I will proceed with all repositories for our GitHub organization "vizydrop". So I put the following URL into link textbox: "".

    Targetprocess Image

    Data processing can take time, so please wait until the platform parses incoming data. After processing we will see the blank editor with discovered fields.

    Targetprocess Image

  • Create charts, explore data in a visual way

    It is a showtime. Now we are ready to build reports like these:

    You GitHub Team Pulse

    X: MONTH([Date])
    Y1: SUM([Code Additions])
    Y2: -SUM([Code Deletions])

    Targetprocess Image

    GitHub Code Contribution by Repository

    X: SUM([Code Deletions])
    Y: SUM([Code Additions])
    SIZE: SUM([Code Commits])
    COLOR: [Repository]

    Targetprocess Image

Please feel free to use or use it's source code (docker image is available as well) to visualize code contribution to your repositories.  Let us know about any questions or comments.


Capterra Top 20
Capterra Top 20
Project Portfolio Management
GetApp Category Leaders
GetApp Category Leaders
Project Portfolio Management
GetApp Category Leaders
GetApp Category Leaders
Software Advice FrontRunners
Software Advice FrontRunners
Product Management
Software Advice Recommended
Software Advice Recommended
Product Roadmap
Software Advice Customer Support
Software Advice Customer Support
Project Portfolio Management Software

Subscribe to the latest updates

Thank you!

Сheck out latest blog posts: Show all

Or contact
a sales representative

Get a live
product demo

Let one of our product specialists create your account
and shape Targetprocess for your company needs.