web-dev-qa-db-fra.com

Utilisation de Google Graph Api avec WordPress

J'essaye de mettre en application un graphique simple sur une page wordpress simple.

J'utilise cette page depuis le guide Google - https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs

Pour implémenter cela dans wordpress, j'ai essayé de suivre l'utilisation de javascript wordpress guide- codex.wordpress.org/Using_Javascript

L'API dit -

Pour utiliser JavaScript dans les publications dans WordPress, vous devez prendre quelques mesures supplémentaires. Les chances sont que cette utilisation est pour une ou quelques instances, donc l'ajout du script à l'en-tête serait inutile.

Pour une utilisation occasionnelle ou unique de JavaScript, vous devez placer le script dans un fichier JavaScript, puis l'appeler à partir de la publication. Assurez-vous que chaque script est défini par son nom de fonction, tel que:

function updatepage () {var m = "page mise à jour" + document.lastMo .......}

pour inclure du Javascript dans une publication, vous devez combiner l'appel du fichier script avec l'appel du JavaScript lui-même.

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

Alors j'ai ajouté le code javascript donné sur google guide, et je l'ai enveloppé dans une fonction comme celle-ci-

function updatepage(){    // this line added by me

// Load the Visualization API and the piechart package. //copy-paste starts
....
....
chart.draw(data, options);
}                                                       //copy-paste ends

}                       // this line added by me

Ensuite, j'ai enregistré ce fichier sous le nom updatepage.js et l'a ajouté au dossier my-scripts (que j'ai créé) sous mon dossier de thème.

Enfin, j'ai ajouté ce qui suit à ma page -

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/my-scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
Graph should be here
<div id="chart_div" style="width:400; height:300"></div>
end

Lien de page: ablueheart.com/js-test

Mais ça ne fonctionne pas. Toute aide appréciée.

Des questions:

  1. ma référence "src ="/my-scripts/updatepage.js " à updatepage.js est-elle correcte?

Si je mets l'exemple donné sur la page de Google dans un fichier/html et que je l'ouvre avec firefox, il s'affiche correctement.

javascriptgoogle
1
rents

Vous devez exécuter la fonction updatepage() après avoir chargé le script google jsapi.

essayez jquery ready dans updatepage comme ceci:

function updatepage(){    // this line added by me
    jQuery(document).ready(function ($) {

        // Load the Visualization API and the piechart package.
        ....
        ....
        chart.draw(data, options);
    }       
}

ou vous pouvez voir ce plugin code abrégé pour le générateur de graphique simple utilisant google jsapi sur lequel je travaille.

2
Quartet