Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- This code demostrates how you can use jquery ajax to fetch xml data from
- the ecb sdw api and then draw the data onto a chart made with chart.js
- For example we draw the eurozone inflation per month for the year 2015
- -->
- <!doctype html>
- <html>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
- <body>
- <h1>Eurozone inflation chart 2015</h1>
- <canvas id="canvas" width="1024px" height="768px"></canvas>
- <script>
- $(document).ready(function() {
- var chart = new Chart($("#canvas").get(0).getContext("2d")).Line({
- responsive: true,
- maintainAspectRatio: false,
- labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
- datasets: [{
- label: "Inflation 2015",
- fillColor: "rgba(220,220,220,0.2)",
- strokeColor: "#069",
- pointColor: "#069",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(220,220,220,1)",
- data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
- }]
- },{
- scaleOverride : true,
- scaleSteps : 10,
- scaleStepWidth : 0.25,
- scaleStartValue : -1
- });
- $.ajax({
- type: "GET",
- url: "https://sdw-wsrest.ecb.europa.eu/service/data/ICP/M.U2.N.000000.4.ANR/?startPeriod=2015",
- dataType: "xml",
- success: function(xml) {
- try {
- $(xml).find("generic\\:Obs").each(function(i){
- chart.datasets[0].points[i].value = $(this).find("generic\\:ObsValue").attr("value");
- });
- } catch (e) {}
- chart.update();
- }
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
