Embedding Vulnerabilities Trend Graph in SharePoint or Blog

In this post, we talk about using various third party Chart APIs to display a trend graph on any SharePoint site (or a blog). These graphs delivers a quick summary of the vulnerabilities identified during various security assessments. This can be embedded in a Security SharePoint portal or a dashboard which will be accessed by clients/higher management.

For applications that are assessed at the end of every release cycle (version change), from this graph, one can visualize the trend of vulnerability detection. Here severity scale – Critical, High, Medium & Low (Info) is also displayed in the graph.

We will have a look at 2 charting APIs to achieve this – Google Charts and Highcharts

Using Google Charts

By using Google Charts API, we try to embed the following chart on our SharePoint site. Once the code is embedded, user can hover over the data points to get its value and other information.

Google Chart

There are various obvious reasons for choosing a chart API over a static image inserted into the site.

  1. Its easy to update. Just need to change the values in the embed code.
  2. Less cluttered. As you can see, values of the data points are not displayed in the chart. If anyone needs to know the value, he/she just has to hover over any column.
  3. This can later be programmed to update itself from the data available in any SharePoint list.

Steps

1. Add a ‘Content Editor Web part’ by clicking ‘Add a Web Part’ option.

Adding Content Editor Web part

2. Now access the ‘Source Editor’ via ‘edit – Modify Shared Web Part’.

Edit Source

3. Paste the following code on to the source editor. Replace the ‘data required’ block to match with your data table.

[snipt code="4a0466bb811d990538f8374705f5facd"]

4. You can use this google spreadsheet to convert tabular data to google charts API mark up – http://goo.gl/ALbIc.

Generate Data

5. Insert the data generated in column ‘H’ on to the Google Chart code.

Few Points

  1. If you need to change the severity scale to something other than C, H, M, L then modify it on ‘var rowData’ and the match the number of data values appropriately.
  2. Change chart dimensions, color and other properties in draw() options.

Using Highcharts

High charts is yet another popular charting solution. Unlike, Google charts, we don’t have to modify the embed code to update the graph values. In the following example, we use a feature in highcharts that extracts value from HTML table that is displayed on the same page. So we just need to update the data in the HTML table using the SharePoint Rich Text Editor and graphs are automatically updated.

Highchart Trend

Steps

First, we need to download Highcharts API and extract it to our local directory. Then upload ‘highchart.js‘ to your SharePoint site (I copied to ‘Shared Documents‘, you can upload it anywhere you want). Note the relative URL of that js file.

1. Add 2 content editor webparts. One webpart holds embed code for Chart and other for data table

2. Chart webpart – Access source code editor and paste the following code. Replace the highcharts.js URL with previously copied SharePoint URL. (It will be something like /Shared%20Documents/hc/highcharts.js)

[snipt code="1ceef4f257a618b28325e9b580a5fd63"]

3. Datatable webpart – Access source code editor and paste the following code.

[snipt code="e68d5f76b7efa451ba6e5a0604eefd2e"]

4. Updating the data – Click on Modify Shared Web part and access the Rich Text Editor. Now, any one can modify the values from the table without messing up the embed code markup.

Edit Datatable

When the SharePoint page that contains the chart code loads, highchart.js file will be initialized and values in the HTML table below (identified by the table id – ‘datatable’) are extracted and displayed on the graph. Similar to Google charts, we can hover over any of the columns to view the value of data point.

Few Points

  1. Chart dimensions can be modified by changing the attributes of ‘container‘ div in Chart Web part source.
  2. Match the value of table id with the value in document.getElementById. Default is ‘datatable
  3. Change the severity levels in datatable by deleting or adding columns on Rich text editor. Your scale might be H, M, L so delete ‘Critical’ column.
  4. Change the title and other options in Highcharts code if necessary. Refer to highchart documentation

There are various other solutions which involves access to SharePoint designer or to be able to upload third-party web parts on the SharePoint server. If you want a simple front-end solution, this works the best.

Highcharts Info
App Name Highcharts
License free
Type code
App URL Download
More Info link