K2 SmartForms

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.

[ihc-hide-content ihc_mb_type=”show” ihc_mb_who=”unreg” ihc_mb_template=”-1″ ]

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



K2 Automated Testing Software

BenchQA 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.


BenchQA Logo


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.Charting\K2Field.K2Forms.Controls.Charting\bin\Debug)

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

controlutil.exe register -assembly:”C:\Program Files (x86)\K2 blackpearl\K2 SmartForms Designer\bin\K2Field.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

[ihc-hide-content ihc_mb_type=”show” ihc_mb_who=”1,2,3,5″ ihc_mb_template=”1″]

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

1 Query Configuration

Query Configuration

2 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 Chart

4 Line Chart

Column Chart

5 Bar Chart

5 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

<ChartColors><Name>Custom Style Name</Name><IsSystem>true</IsSystem><Settings>#000000,#FFFFFF,#31859c,#2E8B57,#66CDAA,#4682B4,#008B8B,#5F9EA0,#38B16E,#48D1CC,#B0C4DE,#8FBC8B,#87CEEB</Settings></ChartColors>

This style XML file must be placed into the below folders

  • K2 Designer server: C:\Program Files (x86)\K2 blackpearl\K2 SmartForms Designer\Bin\
  • K2 SmartForms Runtime server: C:\Program Files (x86)\K2 blackpearl\K2 SmartForms Runtime\Bin\

Need further technical advice or support?

Contact Us


You may also like

Please complete the below form and a member of the Velocity IT team will call you back.