Chart control using MVC and chart.js

Question

0.00/5 (No votes)

See more:

, +

I am using chart.js for display chart in my MVC application dashboard.
now i am binding data through jquery. Is there any possibility to bind data from controller.

JavaScript

function IncomeExpenseChart(aData, from) {

    if (from == "s") {
        $('#incomeExpense strong').html("Income-Expense: "+start+" - "+end);
    }
    document.getElementById("expensechart").innerHTML = ' ';
    document.getElementById("expensechart").innerHTML = '';

    $('.netincome').html(aData.Net);
    $('.expense').html(aData.Expense);
    $('.income').html(aData.Income);

    var aLabels = aData.data.Label;
    var aDatasets1 = aData.data.X;
    var aDatasets2 = aData.data.Y;
    //  var aDatasets3 = aData[3];
    //var aDatasets4 = aData[4];

    // Get context with jQuery - using jQuery's .get() method.
    var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
    // This will get the first returned node in the jQuery collection.
    var salesChart = new Chart(salesChartCanvas);

    var data = {
        labels: aLabels,
        datasets: [
            {
                label: "Income",
                fillColor: "rgb(210, 214, 222)",
                strokeColor: "rgb(210, 214, 222)",
                pointColor: "rgb(210, 214, 222)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgb(220,220,220)",
                data: aDatasets1
            },
        {
            label: "Expense",
            fillColor: "rgba(60,141,188,0.9)",
            strokeColor: "rgba(60,141,188,0.8)",
            pointColor: "#3b8bba",
            pointStrokeColor: "rgba(60,141,188,1)",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(60,141,188,1)",
            data: aDatasets2
        }
        ]
    };


    //Create the line chart
    salesChart.Line(data, {
        responsive: true,
        animation: true,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
        tooltipFillColor: "rgba(0,0,0,0.8)",
        multiTooltipTemplate: " - ",
        pointDot: false,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
    });


    //---------------------------
    //- END MONTHLY SALES CHART -
    //---------------------------
}

What I have tried:

i saw some mvc chart controls which create chart and convert it to image and pushing to div. i want to make the same using chart.js

C#

// Save the chart to a MemoryStream
  var imgStream = new MemoryStream();
  salesChart.SaveImage(imgStream, ChartImageFormat.Png);
  imgStream.Seek(0, SeekOrigin.Begin);

  // Return the contents of the Stream to the client
  return File(imgStream, "image/png");

Posted 17-Jan-17 1:40am

Member 10212775

Updated 19-Feb-17 21:27pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ajay-Systematix · Answer 1 · 2017-02-19T21:27:00

View Code:

 $(document).ready(function () {
        // Load graph
        LoadGraph("Year");
 });

var lType;
    //Load graphs
    function LoadGraph(Period) {
        lType = Period;
        $.ajax({
            type: "POST",
            url: "../Admin/GetApplicationGraphData?label=" + Period,
            success: OnSuccess_
        });
    }


function OnSuccess_(response) {

        var aData = response;
        var aLabels = aData[0];
        var idArray = new Array();
        var idArray2 = new Array();
        var idArray3 = new Array();
        var AppCompleteCountForBar = 0;
        var InterviewCountForBar = 0;
        var OfferCountForBar = 0;

        if (lType == "Year") {

            aLabels = ["August", "September", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"];

            idArray = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];

            idArray2 = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];

            idArray3 = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
        }
        
        else if (lType == "Week") {

            aLabels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

            idArray = ["0", "0", "0", "0", "0", "0", "0"];

            idArray2 = ["0", "0", "0", "0", "0", "0", "0"];

            idArray3 = ["0", "0", "0", "0", "0", "0", "0"];

        }

        for (var i = 0; i < aLabels.length; i++) {
            var k = aLabels.indexOf(aData[0][i]);
            if (k != -1) {
                idArray[k] = aData[1][i];
                AppCompleteCountForBar = AppCompleteCountForBar == 0 ? aData[1][i] : AppCompleteCountForBar + aData[1][i];
            }
        }

        for (var i = 0; i < aLabels.length; i++) {
            var k = aLabels.indexOf(aData[2][i]);
            if (k != -1) {
                idArray2[k] = aData[3][i];
                InterviewCountForBar = InterviewCountForBar == 0 ? aData[3][i] : InterviewCountForBar + aData[3][i];
            }
        }

        for (var i = 0; i < aLabels.length; i++) {
            var k = aLabels.indexOf(aData[4][i]);
            if (k != -1) {
                idArray3[k] = aData[5][i];
                OfferCountForBar = OfferCountForBar == 0 ? aData[5][i] : OfferCountForBar + aData[5][i];
            }
        }

        var aDatasets1 = idArray;
        var aDatasets2 = idArray2;
        var aDatasets3 = idArray3;

        var lineData = {
            name: "Application Chart",
            labels: aLabels,
            datasets: [
                {
                    label: "Application",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: aDatasets1
                    //data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "Interview",
                    fillColor: "rgba(26,179,148,0.5)",
                    strokeColor: "rgba(26,179,148,0.7)",
                    pointColor: "rgba(26,179,148,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(26,179,148,1)",
                    data: aDatasets2
                    //data: [28, 48, 40, 19, 86, 27, 90]
                },
                {
                    label: "Offers",
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: aDatasets3
                    //data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };
    }

Controller Code:

[HttpPost]
        public JsonResult GetApplicationGraphData(string label)
        { 
            // Load chart by stored procedure
            var ChartData = objIAdminService.GetDashboardGraphDataBySP(label);

            return Json(ChartData, JsonRequestBehavior.AllowGet);
        }