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.



Script

<script src='http://code.jquery.com/jquery-1.5.1.min.js' type='text/javascript'></script>
<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='https://code.highcharts.com/modules/exporting.js'></script>
<script>
    $(function() {
                Highcharts.chart('container', {
                    title: {
                        text: 'Sample Chart'
                    },
                    xAxis: {
                        categories: ['A', 'B', 'C', 'D', 'E']
                    },
                    labels: {
                        items: [{
                            html: 'Total sample consumption',
                            style: {
                                left: '50px',
                                top: '18px',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        }]
                    },
                    series: [{
                        type: 'column',
                        name: 'aaa',
                        data: [3, 2, 1, 3, 4]
                    }, {
                        type: 'column',
                        name: 'bbb',
                        data: [2, 3, 5, 7, 6]
                    }, {
                        type: 'column',
                        name: 'ccc',
                        data: [4, 3, 3, 9, 0]
                    }, {
                        type: 'spline',
                        name: 'Average',
                        data: [3, 2.67, 3, 6.33, 3.33],
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3],
                            fillColor: 'white'
                        }
                    }, {
                        type: 'pie',
                        name: 'Pie Sample',
                        data: [{
                            name: 'aaa',
                            y: 13,
                            color: Highcharts.getOptions().colors[0] // Jane's color
                        }, {
                            name: 'bbb',
                            y: 23,
                            color: Highcharts.getOptions().colors[1] // John's color
                        }, {
                            name: 'ccc',
                            y: 19,
                            color: Highcharts.getOptions().colors[2] // Joe's color
                        }],
                        center: [100, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
                });
            );
</script>

HtmlPage

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Step 2

Create Windows application



Step3

Add WebBrowser Control to a form

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



This below code is used to read html page and bind to wbMap or wbColumnChart controls

private void Form1_Load(object sender, EventArgs e) {
    string appPath = Path.GetDirectoryName(Application.ExecutablePath).Replace(@ "\bin\Debug", "");
    this.wbMap.Url = new Uri(String.Format("file:///{0}/3dColumn.html", appPath));
    this.wbMap.AutoSize = true;
    this.wbColumnChart.Url = new Uri(String.Format("file:///{0}/DraggableBox.html", appPath));
    this.wbColumnChart.AutoSize = true;
}

Output



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