Using HighCharts in K2 Smartforms

Example_ChartThemes.png

 

High Charts are the customizable Out of the Box charts that we can integrate with Smartforms and are useful to improve the Visual Experience of data. These are available in K2 Market and doesn’t need any license to use. Below is the link from where we can download these controls

http://community.k2.com/t5/K2-blackpearl/HighCharts/bc-p/101072#M865

A zip file gets downloaded which needs to be extracted. Once you extract the file you will get 2 folders, an installer folder (V2.1 K2Field.K2Forms.Controls.Charting Installer) and the other one is the VisualStudio Solution folder(K2Field.K2Forms.Controls.Charting) with all the project files. Along with folders you will get some images and a document explaining about the usage of various HighCharts and its available customizations.

Now copy the folder V2.1 K2Field.K2Forms.Controls.Charting Installer to the K2 Server and run the RegisterCustomControl.bat bat file as administrator which will register the controls in K2 Smartforms. Once the bat file running completes restart K2 Blackpearl Service Instance. Now open Smart forms desinger and see the controls section and scroll down to see these Custom Controls available for use in SmartForms.

1Designer.jpg

 

Now let’s see how we can use these charts to show the data.

I have a Student’s SMO which gives list of student details. Now I will use these details to create a BarChart.

Create a new view and drag and drop Bar/Column/Line Chart control to the canvas. In Properties Section give chart Control a name and select the chart type that you wish to create. Now scroll down to DataSource Section and click the elliptical button to write an ADO Query using the Smartobject which gives the data.

2DesignerCharts.jpg

Write the Query similar to SQL Query but instead of table name use the smartobject name that gives you the data.

** You may not have all the Query options similar to SQL but most of them will work.

Here in my case SMO name is Students_SMO and the columns that I need to use are Name & Percentage so my query will be “SELECT Name, Percentage FROM Students_SMO”.

Once you write the query just click test Query to see the Chart preview on left and if everything looks good then click ok.

3ADOQuery.jpg

Now go to the Rules section and from Events tab select When the view Executes a method and select initialize and then from actions tab select transfer data rule and transfer text GO to bar chart control.

4Rules

Now we are done Just save the view add it in a form and run the form to see the result.

Final.jpg

That’s it this is how we can install and use the Custom Chart controls.

Thanks for Watching!!

 

Advertisements

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

4 thoughts on “Using HighCharts in K2 Smartforms”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s