0

I am working on a webmapping application with interactive data from maps and charts associated in templates, built with Chart.js. The template (mustache) is linked to a shapefile map layer containing data for several cities. The charts are supposed to show more data linked to each city if we click on them. So far, I managed to build bar and doughnut charts, but I have trouble creating line charts. The one I am supposed to create shows evolution of prices for houses and appartments from 2016 to 2018 (which I call from the shapefile with the var at the beginning).

I cannot figure out how to call the data properly: here is the code.

var app2016 = [];
    {{#features}}
       app2016.push('{{app2016}}');
    {{/features}}

var app2017 = [];
    {{#features}}
        app2017.push('{{app2017}}');
    {{/features}}

var app2018 = [];
    {{#features}}
        app2018.push('{{app2018}}');
    {{/features}}
var log2016 = [];
    {{#features}}
        log2016.push('{{log2016}}');
    {{/features}}
var log2017 = [];
    {{#features}}
        log2017.push('{{log2017}}');
    {{/features}}
var log2018 = [];
    {{#features}}
        log2018.push('{{log2018}}');
    {{/features}}

   var chartColors = {
  red: 'rgb(220,20,60)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(50,205,50)',
  blue: 'rgb(0,191,255)',
  purple: 'rgb(128,0,128)',
  grey: 'rgb(231,233,237)'
  };


  var year= ["2016","2017","2018"];
  var data = {ConstChart2: { data: {datasets:[[log2016,log2017,log2018]]}}};
  var data2 = {ConstChart2: { data: {datasets:[[app2016,app2017,app2018]]}}};
  var config = {
     type: 'line',
     data: {
     labels: year,
     datasets: [{
       label: "Maison",
       backgroundColor: chartColors.red,
       borderColor: chartColors.red,
       data: data.ConstChart2.data.datasets[0],
       fill: false,
       }, 
       {
       label: "Appartement",
       fill: false,
       backgroundColor: chartColors.blue,
       borderColor: chartColors.blue,
       data: data2.ConstChart2.data.datasets[0],
       }]
    },
    options: {
            legend:{
                display: true, 
                labels:{
                    fontFamily:'Open Sans',
                    fontSize:11,
                    boxWidth:1,
                    padding:5,
                }
            },
responsive: false,
title: {
  display: true,
  text: 'Evolution du prix médian au m²',
  fontSize:14
},

tooltips: {
 enabled: true,
            mode: 'single',
            callbacks: {
                label: function(tooltipItems, data) { 
                    return tooltipItems.yLabel + ' €';
                }
            }
},
hover: {
  mode: 'nearest',
  intersect: true
},
scales: {
  xAxes: [{
    display: true,
    scaleLabel: {
      display: true
    }
  }],
  yAxes: [{
    display: true,
    scaleLabel: {
      display: true,
      labelString: 'Valeur au m²'
     }
    }]
   }
  }
   };


var ctx = document.getElementById("ConstChart2_").getContext("2d");
window.myLine = new Chart(ctx, config);

The result is there: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.