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>
Rachmat PutraPosted May 21, 2021, 6:46 AM
How to get data from database sql using ajax?
Urvashi LadPosted Jan 8, 2020, 11:19 PM
Showing Script error.. Any solution ???
Akash kjbdfPosted Oct 10, 2018, 2:28 AM
Script Error and not even showing charts. Waste of time
Salvo LiraPosted Oct 4, 2018, 9:22 AM
Hi I got a scrip error, some body Knows the way how to figure out the issue, regards
ChanikyaGupthaPosted Oct 4, 2018, 4:39 AM
Script Error and not even showing charts. Waste of time
Rodolfo LopezPosted Aug 9, 2018, 1:34 AM
I put in all sides and nothing. Dont function
Rodolfo LopezPosted Aug 9, 2018, 1:25 AM
Script Error https://code.highcharts.com/maps/modules/data.js
Rodolfo LopezPosted Aug 9, 2018, 1:25 AM
Script Error
Mohamed HarishPosted Jul 23, 2018, 10:18 PM
How to bind the database values in this highcharts?
Chris KosikPosted Jun 28, 2018, 10:55 AM
Script error
Muhammad Kashif IqbalPosted Jan 13, 2018, 2:10 PM
I got jquery script error