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:

Example 2: