How To Add HTML Page (highChart) In Windows Application

This blog explains how to add HTML page (highChart) in Winforms (Windows application).

Introduction

This article explains how to add HTML Page (highChart) in Winforms (Windows application).

WebBrowser Control

WebBrowser Control is used to implement Web browser functionality to our application. WebBrowser URL property is used to load browser page. Now, I will explain how to implement highChart in Winform by using this WebBrowser control.

Highchart

highChart is a pure jQuery and JavaScript based library. We can use highChart in different technologies, like ASP.NET, Java, and PHP.

highChart Features

  • Compatible with most of the browsers.
  • Supports Multi-touch platform.
  • Free for non-commercial application.
  • Light-weight ,so loading speed is high.
  • Supports Zoomablity.
  • Can set data Dynamically.
  • Supports Export option.

Different Types of Charts

  • Line Charts
  • Area Charts
  • Pie Charts
  • Scatter Charts
  • Bubble Charts
  • Dynamic Charts
  • 3D Charts,etc...

Implement Highchart in Winforms

Step 1 Add a html page.

I created an html page, 3dColumn.html,DraggableBox.html and added it to my application.

Winforms

Script

  1. <script src='http://code.jquery.com/jquery-1.5.1.min.js' type='text/javascript'></script>  
  2. <script src='https://code.highcharts.com/highcharts.js'></script>  
  3. <script src='https://code.highcharts.com/modules/exporting.js'></script>  
  4. <script>  
  5.     $(function() {  
  6.                 Highcharts.chart('container', {  
  7.                     title: {  
  8.                         text: 'Sample Chart'  
  9.                     },  
  10.                     xAxis: {  
  11.                         categories: ['A''B''C''D''E']  
  12.                     },  
  13.                     labels: {  
  14.                         items: [{  
  15.                             html: 'Total sample consumption',  
  16.                             style: {  
  17.                                 left: '50px',  
  18.                                 top: '18px',  
  19.                                 color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
  20.                             }  
  21.                         }]  
  22.                     },  
  23.                     series: [{  
  24.                         type: 'column',  
  25.                         name: 'aaa',  
  26.                         data: [3, 2, 1, 3, 4]  
  27.                     }, {  
  28.                         type: 'column',  
  29.                         name: 'bbb',  
  30.                         data: [2, 3, 5, 7, 6]  
  31.                     }, {  
  32.                         type: 'column',  
  33.                         name: 'ccc',  
  34.                         data: [4, 3, 3, 9, 0]  
  35.                     }, {  
  36.                         type: 'spline',  
  37.                         name: 'Average',  
  38.                         data: [3, 2.67, 3, 6.33, 3.33],  
  39.                         marker: {  
  40.                             lineWidth: 2,  
  41.                             lineColor: Highcharts.getOptions().colors[3],  
  42.                             fillColor: 'white'  
  43.                         }  
  44.                     }, {  
  45.                         type: 'pie',  
  46.                         name: 'Pie Sample',  
  47.                         data: [{  
  48.                             name: 'aaa',  
  49.                             y: 13,  
  50.                             color: Highcharts.getOptions().colors[0] // Jane's color   
  51.                         }, {  
  52.                             name: 'bbb',  
  53.                             y: 23,  
  54.                             color: Highcharts.getOptions().colors[1] // John's color   
  55.                         }, {  
  56.                             name: 'ccc',  
  57.                             y: 19,  
  58.                             color: Highcharts.getOptions().colors[2] // Joe's color   
  59.                         }],  
  60.                         center: [100, 80],  
  61.                         size: 100,  
  62.                         showInLegend: false,  
  63.                         dataLabels: {  
  64.                             enabled: false  
  65.                         }  
  66.                     }]  
  67.                 });  
  68.             );  
  69. </script>  
HtmlPage
  1. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
Step 2

Create Windows application

Winforms

Step3

Add WebBrowser Control to a form

I added some controls to Winforms, these are web browser and panel

Winforms

This below code is used to read html page and bind to wbMap or wbColumnChart controls
  1. private void Form1_Load(object sender, EventArgs e) {  
  2.     string appPath = Path.GetDirectoryName(Application.ExecutablePath).Replace(@ "\bin\Debug""");  
  3.     this.wbMap.Url = new Uri(String.Format("file:///{0}/3dColumn.html", appPath));  
  4.     this.wbMap.AutoSize = true;  
  5.     this.wbColumnChart.Url = new Uri(String.Format("file:///{0}/DraggableBox.html", appPath));  
  6.     this.wbColumnChart.AutoSize = true;  
  7. }  
Output

Winforms

I will add my sample application if it is useful to you.