+44(0)1908 545 770
YOUR EXPERT RPA PARTNER

Team up with our RPA strategy and tech specialists for maximum automation impact

Find out more
Harness the power of UiPath in your business.
WATCH NOW

Save money and spend more time on priority work.

Book consultation
READY, SET, AUTOMATE

Let's choose, design and deploy a process automation solution for your business.

Find out more
TRANSFORM YOUR BUSINESS

Let's analyse your business to discover opportunities for innovation and automation.

Find out more

Begin your business transformation journey

Book consultation
AUTOMATE EVERY FUNCTION

Automate where it matters most. Scale to solve challenges in every area

Find out more
GIVE EVERY TEAM THE TOOLS FOR SUCCESS

Equip people with user-friendly solutions that save time and make work easier

Find out more

Which business problem
can we solve first?

Book consultation
14 January 2017

How to use HighCharts controls in K2 SmartForms (with EXAMPLES)

In this article, we will learn about how to use the HighCharts controls in K2 SmartForms.

HighCharts controls can be downloaded from the K2 Community site.

Registration is required to view the full article. Click here to register FREE…

K2 Automated Testing Software

rnBenchQA allows full test automation of K2, including fully automated K2 SmartForms and K2 Workflow testing. It promotes test driven development for K2 and ensures continued quality assurance for K2 solutions. Easily apply changes to test cases to accommodate changes to K2 apps and ensure all apps are regression tested to avoid defects and assure continuous quality.

 

Free K2 Five Upgrade Review

 

Before using the HighCharts control, you need to register it to make it available in the K2 SmartForm designer.

First, extract the folder and copy the HighCharts control DLL from bin folder

The control can be registered either using the Registercustomcontrol batch file or can be registered manually as below

(DLL Location: VS Solution – K2Field.K2Forms.Controls.ChartingK2Field.K2Forms.Controls.ChartingbinDebug)

  1. Manually copy K2Field.K2Forms.Controls.Charting.dll to the following directories:
  • K2 Designer server: C:Program Files (x86)K2 blackpearlK2 SmartForms DesignerBin
  • K2 SmartForms Runtime server: C:Program Files (x86)K2 blackpearlK2 SmartForms RuntimeBin
  1. Register the control using controlutil.exe
  • The controlutil.exe can be found in C:Program Files (x86)K2 blackpearlBin
  • Syntax:

controlutil.exe register -assembly:”C:Program Files (x86)K2 blackpearlK2 SmartForms DesignerbinK2Field.K2Forms.Controls.Charting.dll”

After registering the control, you should be able to see the Charts controls in K2 SmartForms designer under K2Field.K2Forms.Controls.Charting section.

As of now, only five HighCharts controls are supported in K2 SmartForms. They are

  • Gauge
  • Pie
  • Bar
  • Line
  • Column

How to use the HighCharts control in K2 SmartForms

To fetch data from the database, SmartObjects must be generated from SQL service instance and ADO queries should be executed on the SmartObject.

Query Configuration
Query Configuration

  • To initialize the chart control and execution of SQL you must pass the word ‘GO’ into the control using transfer data
  • ADO Query must return at least two columns of data. The first column is varchar and the second column must be a number.
  • Data from the results can be filtered using ‘Append to SQL’ and ‘Filter Results’.
  • If some filter condition is appended in transfer data then there is no need to use the word ‘GO’ for chart Initialization.

3 Chart Config

3 Chart Config

Example Charts

We can also do customizations to the existing controls or create new high chart controls using the source code attached along with the file from K2 market. Below are the sample Highcharts

Line Chart

4 Line Chart4 Line Chart

Column Chart

5 Bar Chart5 Bar Chart

Bar Chart

6 Bar Chart

6 Bar Chart

Pie Chart

7 Pie Chart

7 Pie Chart

HighCharts Styling

Chart colours can be customised using the HighchartThemes XML File, For example new theme can be added to the XML file like as below

This style XML file must be placed into the below folders

  • K2 Designer server: C:Program Files (x86)K2 blackpearlK2 SmartForms DesignerBin
  • K2 SmartForms Runtime server: C:Program Files (x86)K2 blackpearlK2 SmartForms RuntimeBin