Avatar billede mik28 Seniormester
04. september 2014 - 09:20 Der er 9 kommentarer og
1 løsning

charts

Hej Eksperter

Jeg anvender http://www.chartjs.org/chart.js til at generere forskellige charts. Det virker fint så længe jeg kun har en chart pr side. Jeg kunne imidlertid godt tænke mig at have flere på samme side http://www.chartjs.org/chart.js Hvorfor går det galt?
Avatar billede mik28 Seniormester
04. september 2014 - 09:20 #1
Avatar billede mik28 Seniormester
04. september 2014 - 09:23 #2
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 -->
Avatar billede welcor Nybegynder
04. september 2014 - 15:36 #3
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)
}
Avatar billede mik28 Seniormester
04. september 2014 - 17:51 #4
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);
});
Avatar billede mik28 Seniormester
04. september 2014 - 18:16 #5
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 :-)
Avatar billede welcor Nybegynder
04. september 2014 - 23:17 #6
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);

});
Avatar billede mik28 Seniormester
05. september 2014 - 01:41 #7
Mange tak for hjælpen?

Hvad betyder
var Grafer = Grafer || {};
Avatar billede welcor Nybegynder
05. september 2014 - 01:57 #8
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...
Avatar billede mik28 Seniormester
05. september 2014 - 02:06 #9
Super. Jeg opretter den i globalChartSettings.js
Avatar billede welcor Nybegynder
05. september 2014 - 08:36 #10
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.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester