SHOW:
|
|
- or go back to the newest paste.
| 1 | <!-- | |
| 2 | This code demostrates how you can use jquery ajax to fetch xml data from | |
| 3 | the ecb sdw api and then draw the data onto a chart made with chart.js | |
| 4 | ||
| 5 | For example we draw the eurozone inflation per month for the year 2015 | |
| 6 | --> | |
| 7 | <!doctype html> | |
| 8 | <html> | |
| 9 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| 10 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> | |
| 11 | <body> | |
| 12 | <h1>Eurozone inflation chart 2015</h1> | |
| 13 | <canvas id="canvas" width="1024px" height="768px"></canvas> | |
| 14 | <script> | |
| 15 | $(document).ready(function() {
| |
| 16 | var chart = new Chart($("#canvas").get(0).getContext("2d")).Line({
| |
| 17 | responsive: true, | |
| 18 | maintainAspectRatio: false, | |
| 19 | labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], | |
| 20 | datasets: [{
| |
| 21 | - | label: "Inflation 2015", |
| 21 | + | label: "Inflation 2015", |
| 22 | - | fillColor: "rgba(220,220,220,0.2)", |
| 22 | + | fillColor: "rgba(220,220,220,0.2)", |
| 23 | - | strokeColor: "#069", |
| 23 | + | strokeColor: "#069", |
| 24 | - | pointColor: "#069", |
| 24 | + | pointColor: "#069", |
| 25 | - | pointStrokeColor: "#fff", |
| 25 | + | pointStrokeColor: "#fff", |
| 26 | - | pointHighlightFill: "#fff", |
| 26 | + | pointHighlightFill: "#fff", |
| 27 | - | pointHighlightStroke: "rgba(220,220,220,1)", |
| 27 | + | pointHighlightStroke: "rgba(220,220,220,1)", |
| 28 | - | data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
| 28 | + | data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
| 29 | - | }] |
| 29 | + | }] |
| 30 | },{
| |
| 31 | scaleOverride : true, | |
| 32 | scaleSteps : 10, | |
| 33 | scaleStepWidth : 0.25, | |
| 34 | scaleStartValue : -1 | |
| 35 | }); | |
| 36 | ||
| 37 | - | var i=0; |
| 37 | + | |
| 38 | - | $(xml).find("generic\\:Obs").each(function(){
|
| 38 | + | |
| 39 | - | chart.datasets[0].points[i++].value = $(this).find("generic\\:ObsValue").attr("value");
|
| 39 | + | |
| 40 | - | }); |
| 40 | + | |
| 41 | success: function(xml) {
| |
| 42 | try {
| |
| 43 | $(xml).find("generic\\:Obs").each(function(i){
| |
| 44 | chart.datasets[0].points[i].value = $(this).find("generic\\:ObsValue").attr("value");
| |
| 45 | }); | |
| 46 | } catch (e) {}
| |
| 47 | chart.update(); | |
| 48 | } | |
| 49 | }); | |
| 50 | }); | |
| 51 | </script> | |
| 52 | </body> | |
| 53 | </html> |
