Maken van een chart

[SamaraFellaDina]

Maken van een chart

Ik ga kijken hoe je precies een chart bouwt en hierbij de juiste data kan ophalen die vanuit de Google API komt,

Ik heb nu tot nu toe dit gemaakt, waarbij er dmv de google api er word gekeken naar welke landen de website hebben bezocht.

de code

<div>
  <canvas id="countryChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('countryChart');
  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: [
      <% data.rows.forEach(function(row, index) { %>
        '<%= row.dimensionValues[0].value %>'<% if (index < data.rows.length - 1) { %>,<% } %>
      <% }); %>
    ],      
    datasets: [{
        label: 'Aantal keer bezocht',
        data: [
      <% data.rows.forEach(function(row, index) { %>
        '<%= row.metricValues[0].value %>'<% if (index < data.rows.length - 1) { %>,<% } %>
      <% }); %>
    ],          borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

</script>

Wat wil ik met deze data doen?

Het is een best intenst grafiek, ik wil eigenlijk zo doen dat als een land minder dan 20 bezoekers heeft, er een vakje komt met 'Overig'.

[SamaraFellaDina]

<script>
  const ctx = document.getElementById('countryChart');

  // Arrays to store filtered labels and data
  const filteredLabels = [];
  const filteredData = [];

  // Variables to accumulate "Other" category data
  let otherCount = 0;
  let otherValue = 0;

  // Iterate through the data rows
  <% data.rows.forEach(function(row) { 
    const value = parseInt(row.metricValues[0].value); %>

    if (<%= value %> < 10) {
      // Accumulate data for "Other" category
      otherCount++;
      otherValue += <%= value %>;
    } else {
      // Add to filtered arrays
      filteredLabels.push('<%= row.dimensionValues[0].value %>');
      filteredData.push(<%= value %>);
    }

  <% }); %>

  // Check if there are any "Other" values to add
  if (otherCount > 0) {
    filteredLabels.push('Other');
    filteredData.push(otherValue);
  }

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: filteredLabels,      
      datasets: [{
        label: 'Aantal keer bezocht',
        data: filteredData,          
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Door deze code komt de chart er goed uit te zien.

[SamaraFellaDina]

Ik wil verder ook een chart maken met andere data, ik wou daarvoor de gender gebruiken van de gebruiker

[SamaraFellaDina]

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const country = document.getElementById('countryChart');
const browser = document.getElementById('browserChart');

function createCountryChart() {
  const countryData = <%- JSON.stringify(country.rows) %>;
  // Initialize variables for "Other" group
  let otherValue = 0;

  // Arrays to store labels and data
  const labels = [];
  const data = [];

  // Iterate through the data rows
  countryData.forEach(function(row) {
    const value = parseInt(row.metricValues[0].value);
    const label = row.dimensionValues[0].value;

    if (value < 13) {
      // Aggregate values for "Other" group
      otherValue += value;
    } else {
      // Add label and value to respective arrays
      labels.push(label);
      data.push(value);
    }
  });

  // Add "Other" group if it has data
  if (otherValue > 0) {
    labels.push('Other');
    data.push(otherValue);
  }

  // Create the chart
  new Chart(country, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        label: 'Aantal keer bezocht',
        data: data,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

function createBrowserChart() {
  const browserData = <%- JSON.stringify(browser.rows) %>;

// Initialize variables for "Other" group
let otherValue = 0;

// Arrays to store labels and data
const labels = [];
const data = [];

// Iterate through the data rows
browserData.forEach(function(row) {
  const value = parseInt(row.metricValues[0].value);
  const label = row.dimensionValues[0].value;

  if (value < 13) {
    // Aggregate values for "Other" group
    otherValue += value;
  } else {
    // Add label and value to respective arrays
    labels.push(label);
    data.push(value);
  }
});

// Add "Other" group if it has data
if (otherValue > 0) {
  labels.push('Other');
  data.push(otherValue);
}

// Create the chart
new Chart(browser, {
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      label: 'Aantal keer bezocht',
      data: data,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
}

createCountryChart();
createBrowserChart();

</script>

[SamaraFellaDina]

Hoe haal ik de data op vanuit de google analytics?

app.get('/', async (request, response) => {
  const [apiDataCountries] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '2024-01-01',
        endDate: 'today',
      },
    ],
    dimensions: [
      {
        name: 'country',
      },
    ],
    metrics: [
      {
        name: 'activeUsers',
      },
    ],
  });

  const [apiDataBrowser] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '2020-01-01',
        endDate: 'today',
      },
    ],
    dimensions: [
      {
        name: 'browser',
      },
    ],
    metrics: [
      {
        name: 'activeUsers',
      },
    ],
  });
  response.render('home.ejs', 
    {country: apiDataCountries,
      browser : apiDataBrowser
  })
})

[SamaraFellaDina]

Stijling van de chart

Stijling van de chart gaat net wat anders, omdat je alle properties in js moet aanroepen. Wel heb ik het voor elkaar gekregen om de kleuren van de chart te veranderen, ik moet er alleen nog een kleur aan definieren.

    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        label: 'Aantal keer bezocht',
        data: data,
        backgroundColor: [],
        borderWidth: 1
      }]

[SamaraFellaDina]

je kan blijkbaar dmv een plugin een chart leuk stijlen met patronen

Met patternomaly, kan je patronen verwerken in de grafieken. Erg leuk en toegankelijk!!!!

[SamaraFellaDina]

Het geven van een kleur in de grafiek

Na eventjes te hebben gekeken is het mij ook gelukt om de grafieken een eigen kleur mee te geven in de vormgeving, daarnaast heb ik ook gekeken naar de lijndiktes, en de kleur van de border.

Wat heb ik precies gedaan?

Ik heb even gekeken naar de guide van chartjs. Hierin las ik al snel dat je op verschillende properties de stijling kan aanpassen. Dit moet overgens wel in de script gebeuren. Ik wou meerdere grafieken tegelijk stijlen, dus heb ik variabelen aangemaakt die deze stijlen toepassen.

const colourTheme = [
  '#B9FFB7',
  '#FF7535',
  '#5E43FF'
];

const borderColour = ['#302A2F;'];
const borderWidth = 1.5;

Hier maak ik de variabelen aan die de waardes presenteren.

        backgroundColor: colourTheme,
        borderWidth: borderWidth,
        borderColor: borderColour

Dus bij elke grafiek staan nu deze waardes, waardoor ze allemaal een huisstijl meekrijgen.

Ik heb wel nog gekeken om het nog makkelijk te maken, waarbij ik alles al invul en bij elke grafiek alleen de variabelen neer te zetten, maar dat lukt nog niet helemaal

[SamaraFellaDina]

Template voor het maken van een nieuwe grafiek

Wanneer je een nieuwe grafiek wilt maken, kan je de vorige niet zomaar kopieren. De naamgeving moet anders zijn en moeten gekoppeld zijn aan de variabelen van de server.js. Ik ga een makkelijke template maken zodat je een symbool hoeft te selecteren om alles te kunnen vervangen.

• 🦀: Staat voor de variabelen die uit de server.js komen, dus die moeten overeen komen met de render die je hebt gemaakt vanuit daar. Daarnaast heeft elke chart een unieke ID nodig, anders worden ze allebei niet apart laten zien.

Deze code staat in je html

      <canvas id="🦀Chart" class="chart" width="400" height=""></canvas>

Deze code staat in het script

const 🦀 = document.getElementById('🦀Chart');
function create🦀Chart() {
  const 🦀Data = <%- JSON.stringify(🦀.rows) %>;

// Initialize variables for "Other" group
let otherValue = 0;

// Arrays to store labels and data
const labels = [];
const data = [];

// Iterate through the data rows
🦀Data.forEach(function(row) {
  const value = parseInt(row.metricValues[0].value);
  const label = row.dimensionValues[0].value;

  if (value < 15) {
    // Aggregate values for "Other" group
    otherValue += value;
  } else {
    // Add label and value to respective arrays
    labels.push(label);
    data.push(value);
  }
});

// Add "Other" group if it has data
if (otherValue > 0) {
  labels.push('Other');
  data.push(otherValue);
}

// Create the chart
new Chart(🦀, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Aantal keer bezocht',
      data: data,
      backgroundColor: colourTheme,
      borderWidth: borderWidth,
      borderColor: borderColour

    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
}
create🦀Chart();

[SamaraFellaDina]

documentatie afmaken