charts

hov http://mikbis.dk/testsite/allcharts.html

Radar til venstre og pie til højre, men det er kun pie som bliver vist

<div class="large-5 columns text-center small-only-text-left">
      <br>
            <center>
                <canvas id="radar-chart" width="300" height="300">
                </canvas>
            </center>
      </div><!-- end large-5 --> 
      <div class="large-5 columns text-left">
      <br>
            <center>
                <canvas id="pie-chart" width="300" height="300">
                </canvas>
            </center>
      </div><!-- end large-5 -->

http://stackoverflow.com/questions/12213234/using-window-onload-more-than-1-times

Du kan kun bruge window.onload en gang. Brug evt. en enkelt funktion til at gøre begge dele:

window.onload=function() {
  var a=document.getElementById("radar-chart").getContext("2d");
  window.myRadar=new Chart(a).Radar(radarChartData,radarOptions);
 
  var e=document.getElementById("pie-chart").getContext("2d");
  window.myPie=new Chart(e).Pie(pieData,pieOptions)
}

http://mikbis.dk/testsite/allcharts.html

Super tak for hjælpen. Der er dog lige en ting til jeg gerne vil vide. Hvorfor kan jeg ikke skrive:

$(document).ready(function(){

var ctxRadar = $("#radar-chart").getContext("2d");
window.myRadar = new Chart(ctxRadar).Radar(radarChartData, radarOptions);

var ctxPie = $("#pie-chart").getContext("2d");
window.myPie = new Chart(ctxPie).Pie(pieData, pieOptions);
});

Man kan åbenbart godt skrive:

<script>
$(window).load(function() {
    var ctxRadar = document.getElementById("radar-chart").getContext("2d");
    window.myRadar = new Chart(ctxRadar).Radar(radarChartData, radarOptions);
});
$(window).load(function() {   
    var ctxPie = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(ctxPie).Pie(pieData, pieOptions);
});
</script>

Har du et bud på hvordan det skal se ud i JQuery eller endnu bedre CoffeeScript? Læg endelig et svar så jeg kan lukke :-)

Grunden til at man kan bruge $(window).load() og ikke window.load er at jquery allerede har lavet et forarbejde så flere funktioner kan køres på samme event.

Jeg er ikke så vant til coffeescript, men den løsning du selv skriver i #5 er jo en måde man kan gøre det i jquery (bortset fra at $(..) er et jquery objekt og vi har brug for elementet).

Jeg ville nok også bruge et andet scope end window:

var Grafer = Grafer || {};
$(window).load(function() {

  var radarChartData = ...
  var pieData = ...
  var radarOptions = ...
  var pieOptions = ...


  var ctxRadar = $("#radar-chart")[0].getContext("2d");
  Grafer.radar = new Chart(ctxRadar).Radar(radarChartData, radarOptions);

  var ctxPie = $("#pie-chart")[0].getContext("2d");
  Grafer.pie = new Chart(ctxPie).Pie(pieData, pieOptions);

});

Mange tak for hjælpen?

Hvad betyder
var Grafer = Grafer || {};

Lav en variabel ved navn "Grafer".
Dersom den findes allerede, fortsæt med den.
Ellers lav det til et nyt objekt (nærmere bestemt et tomt map).

Grunden til at man vil skrive det på den måde er at hvis man inkluderer den linie i to forskellige javascriptfiler, vil det virke ligemeget hvilken der kommer først.

Og så undgår man at "forurene" window med alt for mange variabler med spændende navne...

Super. Jeg opretter den i globalChartSettings.js

hov! grunden til at man gør det sådan er at man lægger den linie med alle steder hvor man bruger Grafer-objektet. Sådan kan man altid sikre sig at men ikke bruger objektet uden at det er defined.