> For the complete documentation index, see [llms.txt](https://aeudoc.gitbook.io/developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aeudoc.gitbook.io/developer/presentation/jquery-plugin/chart.md).

# Chart

## General information

jqPlot is a JavaScript plotting library for creating charts and graphs with jQuery. It provides a simple way to produce common types of graphics in a browser using JavaScript and HTML5 canvas. It is designed to be flexible, easy to use, and integrate well with other libraries.

## Installation

1. Open the following link: <http://www.jqplot.com/download/>
2. Download the latest zip-file
3. Extract the files to the folder "Plugins" > "jqplot" (Create the file if it does not exist yet)
4. Add the following lines of code in the "Layout.cshtml" file of the project:

```
<link rel="stylesheet" href="~/Plugins/jqplot/jquery.jqplot.css" />
```

```
<script type="text/javascript" src="~/Plugins/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.canvasOverlay.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.cursor.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.enhancedLegendRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.enhancedPieLegendRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.highlighter.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.logAxisRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.ohlcRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="~/Plugins/jqplot/jqplot.pointLabels.js"></script>
```

## Examples

### Example 1: Pie Chart

A pie chart is implemented in the following way:

```
<script type="text/javascript">

    var configPie = {
        gridPadding: { top: 0, right: 10, bottom: 0, left: 10 },
        grid: { drawBorder: false, drawGridlines: false, backgroundColor: 'transparent', shadow: false },
        seriesColors: ['#ff5252', '#e6f7ff', '#ffca57', '#a1d490'], // Series including active
        seriesDefaults: { renderer: $.jqplot.PieRenderer, rendererOptions: { shadow: false, padding: 0, showDataLabels: true, dataLabels: 'value', sliceMargin: 5, startAngle: -90 } }
    };

    $(document).ready(function () {
        scalePie();
    });

    function scalePie() {
        var plot1 = $.jqplot('pieStarted', [[['Completed', 20], ['Active', 14], ['In Process', 7], ['Open', 44]]], configPie);
        plot1.replot({ resetAxes: true });
    }
    
</script>
```

The above code creates the following chart:

<figure><img src="https://4150968783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE2jCdhU9OpCbUJl0tqSd%2Fuploads%2Fvd4NsR1CLg0nL07DaQYy%2Fimage.png?alt=media&amp;token=c3b4f2e2-eae0-42e1-9b68-9242fda428ff" alt=""><figcaption></figcaption></figure>

### Example 2: