Generating Chart Dynamically In MVC Using Chart.js

Now run the application and it will look like as below in the browser.

Adding Jquery Reference To View

Now, to add a jQuery reference to your View, just add the below code in the View.

<script src="~/Scripts/jquery-1.10.2.js"></script>

Adding Chart.js Reference To View

To add the chart.js reference to the application, go to the site here and select the version of the chart.js from the dropdown as shown below. Now, include the link in your application in the script tag, as shown below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>

Adding Action To Controller

Now we need to add another action for getting the result into JSON format which we will assign to the chart datasource. Here, we will return the result into a JSON string containing.

[HttpPost]
public JsonResult NewChart(
    string strEducation, 
    string strLodging, 
    string strFooding, 
    string strTravelling, 
    string strCommunication, 
    string strOthers,
    decimal educationValue, 
    decimal lodgingValue, 
    decimal foodingValue, 
    decimal travellingValue, 
    decimal communicationValue, 
    decimal othersValue)
{
    educationValue = Math.Round(educationValue, 0);
    lodgingValue = Math.Round(lodgingValue, 0);
    foodingValue = Math.Round(foodingValue, 0);
    travellingValue = Math.Round(travellingValue, 0);
    communicationValue = Math.Round(communicationValue, 0);

    List<object> iData = new List<object>();
    
    // Creating sample data
    DataTable dt = new DataTable();
    dt.Columns.Add("Expense", System.Type.GetType("System.String"));
    dt.Columns.Add("ExpenseValues", System.Type.GetType("System.Int32"));

    // For Education
    DataRow dr = dt.NewRow();
    dr["Expense"] = strEducation;
    dr["ExpenseValues"] = educationValue;
    dt.Rows.Add(dr);

    // For Lodging
    dr = dt.NewRow();
    dr["Expense"] = strLodging;
    dr["ExpenseValues"] = lodgingValue;
    dt.Rows.Add(dr);

    // For Fooding
    dr = dt.NewRow();
    dr["Expense"] = strFooding;
    dr["ExpenseValues"] = foodingValue;
    dt.Rows.Add(dr);

    // For Travelling
    dr = dt.NewRow();
    dr["Expense"] = strTravelling;
    dr["ExpenseValues"] = travellingValue;
    dt.Rows.Add(dr);

    // For Communication
    dr = dt.NewRow();
    dr["Expense"] = strCommunication;
    dr["ExpenseValues"] = communicationValue;
    dt.Rows.Add(dr);

    // For Others
    dr = dt.NewRow();
    dr["Expense"] = strOthers;
    dr["ExpenseValues"] = othersValue;
    dt.Rows.Add(dr);

    // Looping and extracting each DataColumn to List<Object>
    foreach (DataColumn dc in dt.Columns)
    {
        List<object> x = new List<object>();
        x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
        iData.Add(x);
    }
    
    ViewBag.ChartData = iData;

    // Source data returned as JSON
    return Json(iData, JsonRequestBehavior.AllowGet);
}

Adding Function For Passing Data In Action And Generating Chart

Now, we need to add the below jQuery function which will pass data to the action and get the JSON value that we have assigned as a data source to the chart.

<script type="text/javascript">
    function GenerateRuntimeGraph() {
        var educationValue = $('#txtEducation').val();
        var lodgingValue = $('#txtLodging').val();
        var foodingValue = $('#txtFooding').val();
        var travellingValue = $('#txtTravelling').val();
        var communicationValue = $('#txtCommunication').val();
        var othersValue = $('#txtOthers').val();

        // Setting default values
        if (educationValue == "") {
            educationValue = 0;
        }
        if (lodgingValue == "") {
            lodgingValue = 0;
        }
        if (foodingValue == "") {
            foodingValue = 0;
        }
        if (travellingValue == "") {
            travellingValue = 0;
        }
        if (communicationValue == "") {
            communicationValue = 0;
        }
        if (othersValue == "") {
            othersValue = 0;
        }

        $.ajax({
            type: "POST",
            url: '@Url.Action("NewChart", "ChartInMVCRuntime")',
            data: JSON.stringify({
                "strEducation": "Education",
                "strLodging": "Lodging",
                "strFooding": "Fooding",
                "strTravelling": "Travelling",
                "strCommunication": "Communication",
                "strOthers": "Others",
                educationValue: educationValue,
                lodgingValue: lodgingValue,
                foodingValue: foodingValue,
                travellingValue: travellingValue,
                communicationValue: communicationValue,
                othersValue: othersValue
            }),
            contentType: "application/json",
            dataType: "json",
            success: function (chData) {
                var aData = chData;
                var aLabels = aData[0];
                var aDatasets1 = aData[1];

                // For Bar Chart
                var ctx = document.getElementById("myChart").getContext('2d');
                ctx.height = 900;
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    height: "230px",
                    width: "300px",
                    autoSkip: false,
                    responsive: false,
                    animation: false,
                    showDatapoints: true,
                    legend: { position: 'bottom' },
                    data: {
                        labels: ["Education", "Lodging", "Fooding", "Travelling", "Communication", "Others"],
                        datasets: [{
                            label: 'Monthly Expenses',
                            data: [educationValue, lodgingValue, foodingValue, travellingValue, communicationValue, othersValue],
                            backgroundColor: ["red", "blue", "green", "yellow", "pink", "brown"]
                        }]
                    },
                    options: {
                        events: ['click'],
                        scaleShowValues: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    autoSkip: false
                                }
                            }]
                        }
                    }
                });

                // For Pie Chart
                var ctx1 = document.getElementById("myChartPie").getContext('2d');
                var myChart = new Chart(ctx1, {
                    type: 'pie',
                    height: "230px",
                    width: "300px",
                    responsive: false,
                    animation: false,
                    legend: { position: 'bottom' },
                    data: {
                        labels: ["Education", "Lodging", "Fooding", "Travelling", "Communication", "Others"],
                        datasets: [{
                            label: 'Monthly Expenses',
                            data: [educationValue, lodgingValue, foodingValue, travellingValue, communicationValue, othersValue],
                            backgroundColor: ["red", "blue", "green", "yellow", "pink", "brown"]
                        }]
                    },
                    options: {
                        events: ['click']
                    }
                });

                // For Line Chart
                var ctx = document.getElementById("myChartLine").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    height: "230px",
                    width: "300px",
                    responsive: false,
                    animation: false,
                    legend: { position: 'bottom' },
                    data: {
                        labels: ["Education", "Lodging", "Fooding", "Travelling", "Communication", "Others"],
                        datasets: [{
                            label: 'Monthly Expenses',
                            data: [educationValue, lodgingValue, foodingValue, travellingValue, communicationValue, othersValue],
                            backgroundColor: "rgb(66, 134, 244)"
                        }]
                    },
                    options: {
                        events: ['click'],
                        scaleShowValues: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    autoSkip: false
                                }
                            }]
                        }
                    }
                });

            },
            "error": function (data) {
                alert("Some Error Occurred!");
            }
        });
    }
</script>

Adding Textbox Event

Now to add calling the action and passing textbox value to action we need to add the below events in jQuery into the view. All the events are on the key press event of the textbox.

// Calling Above Function On Key Press Event
$("#txtEducation").keyup(function() {
    GenerateRuntimeGraph();
});

$("#txtLodging").keyup(function() {
    GenerateRuntimeGraph();
});

$("#txtFooding").keyup(function() {
    GenerateRuntimeGraph();
});

$("#txtTravelling").keyup(function() {
    GenerateRuntimeGraph();
});

$("#txtCommunication").keyup(function() {
    GenerateRuntimeGraph();
});

$("#txtOthers").keyup(function() {
    GenerateRuntimeGraph();
});

Run The Application

Now we have almost completed the steps needed. So, run the application and it will show in the browser as shown below. Here you need to enter the value of expenses and the chart will be generated instantly as shown below.

Summary

In this article, we have seen how to create an MVC web application and learned to generate a chart in MVC dynamically using chart.js and jQuery. Apart from this, we have seen how to write a jQuery function and learned how to call a jQuery function on the keypress event of the textbox.

I hope you learned and enjoyed it. I look forward to seeing your feedback.