Neue Objekte auf Basis anderer erstellen

[Chronos]

Hallo Forum,

ich brauche einen kleinen Denkanstoß beim Arbeiten mit Objekten.

Ich möchte mit Hilfe von http://www.chartjs.org/ dynamisch Diagramme erstellen.

Generell ein Diagramm zu erstellen ist ziemlich einfach:
Man braucht ein canvas und erstellt über dessen Kontext ein neues Chart Objekt
HTML:

<canvas id="canvas" height="450" width="600"></canvas>

JS: - ein Objekt mit den Daten und das erstellen des Diagramms.

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
var ctx = document.getElementById("canvas").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data);

Das wäre erst mal der Grundaufbau, ich wollte das ganze etwas dynamischer haben und habe mir daher ein Objekt mit mehreren Diagramm-Objekten erstellt:

var charts = {
    chartOne: {
        labels: ["Wert 1", "Wert 2", "Wert 3", "Wert 4"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81]
            }
        ]
    },
          
    chartTwo: {
        labels: ["Wert 1", "Wert 2", "Wert 3", "Wert 4"],
        datasets: [
            {
                label: "My Second dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [10, 15, 30, 60]
            }
        ]
    }
    creatChartCanvas(charts);
};

Jetzt kommt das eigentlich schwierige für mich,
ich brauche ja für jedes Canvas das ich erstelle den Kontext um über diesen ein Chart-Objekt zu erstellen.

Ein Canvas aufgrund des charts-Objekts zu erstellen war erst mal nicht schwer,
auch nicht von diesem dann neue Objekte mit Kontext zu erstellen.
Aber wie schaffe ich es nun, von diesem Kontext aus ein Chart-Objekt zu erzeugen?

Meine Funktion dazu sieht so aus:

function creatChartCanvas(obj) {
    for (var property in obj) {
        if (!obj.hasOwnProperty(property)) {
            // Die aktuelle Property ist keine des aktuellen Objekts
            continue;
        }
          
        // creates Canvas with ID from charts object
        $('body').append('<canvas id="' + property + '" width="400" height="400"></canvas>');
          
        var canvasContext = new Object();
        canvasContext.property = $('#' + property).get(0).getContext("2d");
        console.log(canvasContext.property);
    }
}

Über das console.log() sehe ich jedenfalls das jedem Canvas schon ein Kontext zugeordnet wurde, aber das was ich versuchte um von diesen nun ein Chart-Objet zu erstellen funktioniert nicht (weil es offensichtlich falsch ist aber meiner Logik nach macht es so Sinn^^?)

var cvs = new Object();
cvs.property = new Chart(canvasContext.property).Bar(property);

Dazu noch ein jsFiddle
http://jsfiddle.net/Chronos90/3bpe6vqb/

Danke schon mal für eure Hilfe und Erklärungen :)

 

[Chronos]

Okay ich hab's hinbekommen aber kann nicht genau sagen wieso bzw. was daran großartig anders ist:

function creatChartCanvas(obj) {
    for (var property in obj) {
        if (!obj.hasOwnProperty(property)) {
            // Die aktuelle Property ist keine des aktuellen Objekts
            continue;
        }
          
        // creates Canvas with ID from charts object
        $('body').append('<canvas id="' + property + '" width="400" height="400"></canvas>');
          
        var canvasContext = new Object();
        canvasContext.property = $('#' + property).get(0).getContext("2d");
        canvasContext.property = new Chart(canvasContext.property).Bar(obj[property]);
    }      
}