Iterating over an IEnumerable in Javascript for Chartjs

Question

I have hit upon a problem where by I have an IEnumerable<string> of labels and an IEnumerable<double[]> of data in my MVC model object, and I would like to plot these values using Chartjs.

I pass both of in to my javascript function, which I trying to make plot the chart.

The Chartjs syntax is such that I want, in effect:

var data = {
               ... chart info e.g. colors, etc.
               datasets: [
                   {
                       label: labels[0], // My first label
                       data: datas[0]    // My first double[]
                   },
                   // Repeat for each data/label combo
                   {
                       label: labels[n], // My n-th label
                       data: datas[n]    // My n-th double[]
                   }
               ]
           };

Given my two collections, how can I extract the information within them appropriately? Clearly the lengths of these collections need to be the same, as there is a one-to-one association. I did try combing them in to a Tuple but I think that will make it more complicated on the js side.

Or does anyone know an easier way to achieve the same end result with ChartJS?

I'm comfortable with C# but Javascript is new to me.

Answer 1

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.