|
1 | | -FusionCharts ASP.NET Wrapper |
2 | | -============================ |
| 1 | +# FusionCharts ASP.NET Wrapper |
| 2 | + |
| 3 | +### What is FusionCharts .NET wrapper? |
| 4 | + |
| 5 | +FusionCharts Suite XT uses JavaScript to generate charts in the browser. Where using these ASP.NET server side wrapper you can create charts in your ASP.NET website without writing any Javascript code. |
| 6 | + |
| 7 | +### How does the wrapper work? |
| 8 | +Charts are generated in the browsers with the help of JavaScript and the HTML code. |
| 9 | +Using this ASP.NET wrapper we can generate the required JavaScript and HTML code as a string in the server. We can put this strings in the page to generate charts. |
| 10 | + |
| 11 | +### Version |
| 12 | +1.0 |
| 13 | + |
| 14 | +### Requirements |
| 15 | +.NET Framework 3.5 or higher |
| 16 | + |
| 17 | +### Installation |
| 18 | + * Add a reference of the FusionCharts assembly in your project. |
| 19 | + * Start using methods and classes available under **"FusionCharts.Charts"** namespace to generate Charts in your project. |
| 20 | + * For a woking sample, the "asp-net-wrapper.zip" can be used. |
| 21 | + |
| 22 | +### Usage |
| 23 | +##### Chart Class (FusionCharts.Charts) |
| 24 | +Represent the FusionCharts class that can be initialized to create a chart. |
| 25 | +###### **Constructor parameters:** |
| 26 | +Following parameters can be used in the constructor in the order as they are described. All parameters are optional, we can configure them later. |
| 27 | + |
| 28 | +| Parameter | Type | Description | |
| 29 | +|:-------|:----------:| :------| |
| 30 | +| chartType | `String` | The type of chart that you intend to plot. e.g. `Column3D`, `Column2D`, `Pie2D` etc.| |
| 31 | +|chartId | `String` | Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.| |
| 32 | +|chartWidth | `String` | Intended width for the chart (in pixels). e.g. `400`| |
| 33 | +|chartHeight | `String` | Intended height for the chart (in pixels). e.g. `300`| |
| 34 | +|dataFormat | `String` | Type of the data that is given to the chart. e.g. `json`, `jsonurl`, `csv`, `xml`, `xmlurl`| |
| 35 | +|dataSource | `String` | Actual data for the chart. e.g. `{"chart":{},"data":[{"label":"Jan","value":"420000"}]}`| |
| 36 | +|bgColor | `String` | Background color of the chart container. e.g. `cccccc`| |
| 37 | +|bgOpacity | `String` | Background opacity of the chart container. e.g. `1`| |
| 38 | + |
| 39 | +##### Methods under Chart class |
| 40 | + |
| 41 | +###### **SetChartParameter** |
| 42 | +This method can be used to set or modified various chart paramerers like `chartType`, `chartWidth`, `chartHeight` etc. The method has following parameters: |
| 43 | + |
| 44 | +| Parameter | Type | Description | |
| 45 | +|:-------|:----------:| :------| |
| 46 | +| param | `enum` | Name of chart parameter. e.g. `Chart.ChartParameter.chartType`.| |
| 47 | +| value | `String` | Value of chart parameter. e.g. `column2d` | |
| 48 | + |
| 49 | +###### **GetChartParameter** |
| 50 | +This method can be used to get the value of any chart paramerer. The method has following parameter. This method returns the value of the parameter as a string. |
| 51 | + |
| 52 | +| Parameter | Type | Description | |
| 53 | +|:-------|:----------:| :------| |
| 54 | +| param | `enum` | Name of chart parameter. e.g. `Chart.ChartParameter.chartType`.| |
| 55 | + |
| 56 | +###### **SetData** |
| 57 | +This method can be used to set the data to the chart. The method has following argumets. |
| 58 | + |
| 59 | +| Parameter | Type | Description | |
| 60 | +|:-------|:----------:| :------| |
| 61 | +| dataSource | `String` | Data for the chart. e.g. `data/data.xml` | |
| 62 | +| format | `enum` | Optional. The format of the data. e.g. `Chart.DataFormat.xmlurl` | |
| 63 | + |
| 64 | +###### **Render** |
| 65 | +Public method to generate html code for rendering chart. This function assumes that you've already included the FusionCharts JavaScript class in your page. Optionaly, Following parameters can also be passed to the chart in the order as they are described. |
| 66 | + |
| 67 | +| Parameter | Type | Description | |
| 68 | +|:-------|:----------:| :------| |
| 69 | +| chartType | `String` | The type of chart that you intend to plot. e.g. `Column3D`.| |
| 70 | +|chartId | `String` | Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.| |
| 71 | +|chartWidth | `String` | Intended width for the chart (in pixels). e.g. `400`| |
| 72 | +|chartHeight | `String` | Intended height for the chart (in pixels). e.g. `300`| |
| 73 | +|dataFormat | `String` | Type of the data that is given to the chart. e.g. `json`, `jsonurl`, `csv`, `xml`, `xmlurl`| |
| 74 | +|dataSource | `String` | Data for the chart. e.g. `{"chart":{},"data":[{"label":"Jan","value":"420000"}]}`| |
| 75 | +|bgColor | `String` | Background color of the chart container. e.g. `cccccc`| |
| 76 | +|bgOpacity | `String` | Background opacity of the chart container. e.g. `1`| |
| 77 | + |
| 78 | +###### **Clone** |
| 79 | +Clone method can be used to clone an existing chart instance. All properties except the chartId of the parent chart instance will be cloned into the child instance. |
| 80 | +```cs |
| 81 | +Chart sales = new Chart("column3d", "myChart", "400", "300", "xmlurl", "data/data.xml"); |
| 82 | +//Render the column3D chart |
| 83 | +Literal1.Text = sales.Render(); |
| 84 | +Chart salesClone = sales.clone(); |
| 85 | +salesClone.SetChartParameter(Chart.ChartParameter.chartType, "column2d"); |
| 86 | +//Render the column2D chart |
| 87 | +Literal2.Text = salesClone.Render(); |
| 88 | +``` |
| 89 | + |
| 90 | +###License |
| 91 | + |
| 92 | +**FUSIONCHARTS:** |
| 93 | + |
| 94 | +Copyright (c) FusionCharts Technologies LLP |
| 95 | +License Information at [http://www.fusioncharts.com/license](http://www.fusioncharts.com/license) |
0 commit comments