[Chartjs]-Iterating over an IEnumerable in Javascript for Chartjs

by

0👍

You can certainly send a tuple to the client side and split it up easily with java-script. You could do a simple ajax call to get your tuple as a Json object and then split it up into two arrays. Those arrays could then be used in the chart.js label and data spots. 

$.ajax({
    url: 'AjaxCall/getChartObjects',
    dataType: 'json',
    data: {},
    success: function (data) { //data here being the tuple recieved from server
        //receive the tuple as a single Json object and split it up easily with some seperate arrays
        dblArray= [] 
        $.each(data.Item1, function (index, value) {
            dblArray.push(value.text); //label array
        }
        descArray= []
        $.each(data.Item2, function (index, value) {
            descArray.push(value.dblTxt); //data array
        }
    },
    error: function (xhr, status, error) {
        console.log('Error: ' + error.message);
    }
});

Sending the tuple from the controller would be something like:

//tuple sends two objects together- both job arrays will be seperated 
//and used in observables on client side
var chartObjects = Tuple.Create(chartData, chartLabel);

return Json(chartObjects, JsonRequestBehavior.AllowGet);

You would then have the arrays that you need to place in the chart properties:

var barChartData = {
                labels: descArray, //array labels
                datasets: [
                    {
                        type: "Bar",
                        strokeColor: "black",
                        pointColor: "rgba(220,220,220,1)",
                        pointstrokeColor: "white",
                        data: dblArray,

                    }
                ]
            }

I guess I’m not entirely sure if this is what you were looking for. Let me know if you have questions.

Leave a comment