RGraph-Class-Library

RGraph Class Library is Wrapper for RGraph Javascript library for ASP.NET.

How to use?

First install RGraph Class Library using Nuget Package Manager.

 Install-Package RGraph.classLibrary

On Server Side

Sample Webmethod which returns Chart Object,with some data.

using RGraph;
using System;
using System.Data;
using System.Web.Services;

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
       
       [WebMethod]
        public static Chart getChartData()
        {      //Returns JSON data to client

                    var returnData = new Chart();

                    var dataset = new DataSet();

                    //create dummy dataset 
                    var datatable = new DataTable();
                    datatable.Columns.AddRange(new DataColumn[]{
                        new DataColumn("Label",typeof(string)),
                        new DataColumn("Value",typeof(double))}
                     );
                    var datarow = datatable.NewRow();

                    //add data to dummy dataset
                    datarow[0] = "PHP";
                    datarow[1] = 100;
                    datatable.Rows.Add(datarow);
                    datarow = datatable.NewRow();
                    datarow[0] = "Ruby";
                    datarow[1] = 50;
                    datatable.Rows.Add(datarow);
                    datarow = datatable.NewRow();
                    datarow[0] = "CSharp";
                    datarow[1] = 40;
                    datatable.Rows.Add(datarow);
                    dataset.Tables.Add(datatable);

                   //specify custom color using config, if not specified default color will be used
                    var config = new GraphConfig();
                    config.Colors = new string[] { "Red", "Green", "Blue" };

                    var graph = new Graph(config);

                   //get dataset data in JSON format to be used by RGraph javascript to draw specified graph.
                    returnData = graph.getGraphData(dataset);
                    return returnData;


        }
    }

On Client Side

On Client side reference RGraph.custom.js from Script Folder,along with RGraph library depending on the graph you want(e.g RGraph.Pie.js for Pie Char).

<script src="Scripts/RGraph.custom.js"></script>

Add canvas element in HTML.

<canvas id="cvs"></canvas>

Now finally initialize rgraphclass constructor with specified parameters, which ultimately draws graph.

 <script>
 //catch some event here
  var g= new rgraphclass("url", "JSON data to send", "Type of chart", "Canvas HTML Id", "Title for graph", "True for 3d else false");
 <script>

That's it, above object creation will do all work, from ajax call to rendering graph.