[GELÖST] Webapp mit Phonegap und Chart JS Problem

[Lukas308]

Moin Leute,

ich hab mich hier extra angemeldet, weil ich ein Problem habe und einfach nicht weiterkomme.
Ich habe keine Ahnung, ob ich hier an der richtigen Stelle bin, aber ich würde es dennoch gerne versuchen.

Mein Problem ist folgendes:
Ich habe einen mit Hilfe von Javascript erstellten Graph (ChartJS) der mir 10 Werte ausgibt.
Soweit so gut. Rufe ich diese Website am PC oder iPhone via Firefox, Chrome, Safari or whatelse auf, funktionierts einwandfrei.
Implementiere ich diese Website allerdings in Phonegap und starte die erstellte App auf meinem iPhone wird das Canvas total zusammengedrückt.

Hier ein paar Codezeilen und ein paar Bilder zum besseren Verständnis:

HTML:

<div id="temp_graph" style="display:none;">
<h2 id="tmp_label"></h2>
<canvas id="myChart"></canvas>

CSS:

#temp_graph {
margin-top: 5%;
width: 90%;
background-color: #fff;
display: inline-block;
padding: 2%;
box-shadow: 0 0 10px 0 rgba(0, 0, 58, 0.05);
}

JS:

var temp_graph_div = document.getElementById('temp_graph');

var canvas = document.getElementById('myChart'),
    ctx = canvas.getContext('2d'),
    startingData = {
        labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]],
        datasets: [{
              label: '°C',
              fill: false,
              lineTension: 0.1,
              backgroundColor: "rgba(255, 205, 200,0.4)",
              borderColor: "rgba(255, 205, 200,1)",
              borderCapStyle: 'butt',
              borderDash: [],
              borderDashOffset: 0.0,
              borderJoinStyle: 'miter',
              pointBorderColor: "rgba(75,192,192,1)",
              pointBackgroundColor: "#fff",
              pointBorderWidth: 1,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: "rgba(75,192,192,1)",
              pointHoverBorderColor: "rgba(220,220,220,1)",
              pointHoverBorderWidth: 2,
              pointRadius: 1,
              pointHitRadius: 10,
              responsive: true,
              maintainAspectRatio: true,
              data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]]
          }]
    };

var myChart = new Chart(ctx, {
    type: 'line',
    data: startingData,
});

Bild links: so sieht es in der App aus.
Bild rechts: so soll es aussehen und so sieht es auch aus, wenn ich lediglich die Website aufrufe ohne Phonegap.


Vielen Dank im Voraus

- - - Aktualisiert - - -

Ich konnte das Problem nach tagelanger Fehlersuche nun doch selbst beheben.
Es lag schlussendlich daran:

<div id="temp_graph" style="display:none;">

Ich habe erst am Ende meiner Javascript Funktion die DIV auf display = inherit gesetzt.
Jetzt setze ich die DIV direkt am Anfang der Funktion auf inherit und siehe da es funktioniert =)

Thread kann geschlossen werden, ich weiß nicht wie es funktioniert ^^

 

[mikdoe]

danke dass du die lösung noch gezeigt hast.
mit deiner konstellation scheint hier sonst keiner erfahrung zu haben.

gelöst setzen können user nicht, hab ich gemacht