Trying to input 2d array in data in jsChart

Question

I am trying to input my 2d array into a js data input Chart to basically display views per month per day on the chart.

My Data is classified per city on the toggle of the chart but that is not my issue.

My Data: 6 main inputs representing 6 cities (6) [Array(12), Array(12), Array(12), Array(12), Array(12), Array(12)]

each city /Array(12) is the data per city per 12 months

Each Array(12) contains Array(31) per days My chart Code:

var ctx = jQuery("#LineChart").get(0).getContext("2d");

    var options = {
        animation: false,
        bezierCurve: false,
        pointDot: false,
        datasetFill: false,
        responsive: true,
        scaleGridLineColor: "yellow",
        scaleLabel: "<%=value + '.00%' %>",
        scaleFontFamily: "'Open Sans', sans-serif",
        scaleFontColor: "#fff",
        scaleOverride: true,
        scaleSteps: 8,
        scaleStepWidth: 10,
        scaleStartValue: -40,
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=value + '%' %>",
        tooltipCornerRadius: 3,
        multiTooltipTemplate: "<%=value + '%' %>",
        tooltipTitleFontFamily: "'Open Sans', sans-serif",
        legend: {
            display: false,
            labels: {
                fontColor: '#BABABA',
                boxWidth: 1,
                // boxHeight: 1,
                // usePointStyle: true,
            }
        }
    };

    var chartlabel = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    var enableCheck = function () {
        SPOn = jQuery('.sp').hasClass('enabled');
        NCOn = jQuery('.nc').hasClass('enabled');
        SPAOn = jQuery('.sp-avg').hasClass('enabled');
        NCAOn = jQuery('.nc-avg').hasClass('enabled');
        SPYOn = jQuery('.spy-avg').hasClass('enabled');
        NCYOn = jQuery('.ncy-avg').hasClass('enabled');

        if (!(SPOn)) {
            SP = {};
        } else {
            SP = {
                label: cities[0].name,
                strokeColor: "#4EAEC4",
                pointColor: "#4EAEC4",
                borderColor: '#4EAEC4',
                data: generalData[0],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCOn)) {
            NC = {};
        } else {
            NC = {
                label: cities[1].name,
                strokeColor: "#EA3223",
                pointColor: "#EA3223",
                borderColor: '#EA3223',
                data: generalData[1],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(SPAOn)) {
            SPA = {};
        } else {
            SPA = {
                label: cities[2].name,
                strokeColor: "#1341BF",
                pointColor: "#1341BF",
                borderColor: '#1341BF',
                data: generalData[3],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCAOn)) {
            NCA = {};
        } else {
            // I had to switch series for the values to be right!!!!!!!
            NCA = {
                label: cities[3].name,
                strokeColor: "#CC5490",
                pointColor: "#CC5490",
                borderColor: '#CC5490',
                data: generalData[2],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(SPYOn)) {
            SPY = {};
        } else {
            SPY = {
                label: cities[4].name,
                strokeColor: "#707070",
                pointColor: "#707070",
                borderColor: '#707070',
                data: generalData[4],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCYOn)) {
            NCY = {};
        } else {
            NCY = {
                label: cities[5].name,
                strokeColor: "greenyellow",
                pointColor: "greenyellow",
                borderColor: 'greenyellow',
                data: generalData[5],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
    };

    enableCheck();
    data = {
        labels: chartlabel,
        datasets: [SPA, NCA, SP, NC, SPY, NCY]
    };
    baseChart = newChart = new Chart(ctx, {
        type: "line",
        data: data,
        options: options
    });
    currentChart = baseChart;


    jQuery('.chart-toggles a').click(function () {
        currentChart.destroy();
        jQuery(this).toggleClass('enabled');
        enableCheck();
        data = {
            labels: chartlabel,
            datasets: [SPA, NCA, SP, NC, SPY, NCY]
        };
        newChart = new Chart(ctx, {
            type: "line",
            data: data,
            options: options
        });
        currentChart = newChart;
    });

I am trying to acheive somthing similar to the picture below

EDIT I also tried making the data input look like this :

  SP = {
                    label: cities[0].name,
                    strokeColor: "#4EAEC4",
                    pointColor: "#4EAEC4",
                    borderColor: '#4EAEC4',
                    data: {
                        labels: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17',
                        '18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        dataset:[generalData[0][1],generalData[0][2],generalData[0][3],generalData[0][4],generalData[0][5],generalData[0][6],generalData[0][7],generalData[0][8],generalData[0][9],generalData[0][10],generalData[0][11],generalData[0][12]  ]
                    },
                    fill: false,
                    pointRadius: 0,
                    borderWidth: 2
                };

But it still didn't Work.