How to integrate Memberstack member JSON with Chart.js to display user analytics and action data? Answered

• 

  Dana Spano

  • June 17, 2024 14:45

  This might come in handy for me— how did you accomplish this?

  0
• 

  Manuel Ogomigo

  • June 17, 2024 14:45

  components.json

  {
    "upvotes": [
      "6594903cb3ac6eb18b149cbb"
    ],
    "components": [
      {
        "name": "Component A",
        "views": 200,
        "copied": 100,
        "shares": 50,
        "followed": 30,
        "following": 20
      },
      {
        "name": "Component B",
        "views": 150,
        "copied": 80,
        "shares": 40,
        "followed": 20,
        "following": 15
      },
      {
        "name": "Component C",
        "views": 180,
        "copied": 120,
        "shares": 60,
        "followed": 40,
        "following": 25
      }
    ]
  }

  Yeah sure, FIrst I set up my json.

  And then use memberstack dom to get the current member json, and parsed that data to Chart js.

   

  Above is how my test Json is structured.

   

  And below is the chart js code to map and render each.
  Where each one is the label and the content is the data.

   

  I can create a video later this week to explain how it works.
  You can share your usecase and I'll use that as an example too.

   

  You can also paste your json to Rey Memberstack and tell it to connect it to chart js, works wonders too 😅

   

  Memberstack Json & Chart js

  <!-- here is chart js script -->
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
  
  
  
  <script>
  
  const memberstack = window.$memberstackDom;
  
  
  
  
  //this get the current member json
  
  memberstack.getCurrentMember().then(async ({ data: member }) => {
  
    if(member) {
  
      let memberJson = await memberstack.getMemberJSON();
  
      console.log(memberJson);
  
  
  
  
      // Assuming memberJson.data contains the components array
  
  // This is useful if you just want to map a certain json object
  
      const components = memberJson.data.components;
  
  
  
  
      // Extract component names and metrics
  
      const componentNames = components.map(component => component.name);
  
      const copiedData = components.map(component => component.copied);
  
      const sharesData = components.map(component => component.shares);
  
      const followedData = components.map(component => component.followed);
  
      const followingData = components.map(component => component.following);
  
      const viewsData = components.map(component => component.views);
  
  
  
  
      // Chart configuration
  
      const config = {
  
        type: 'bar',
  
        data: {
  
          labels: componentNames,
  
          datasets: [
  
            {
  
              label: 'Copied',
  
              data: copiedData,
  
              backgroundColor: 'rgba(255, 99, 132, 0.5)',
  
              borderColor: 'rgba(255, 99, 132, 1)',
  
              borderWidth: 1
  
            },
  
            {
  
              label: 'Shares',
  
              data: sharesData,
  
              backgroundColor: 'rgba(54, 162, 235, 0.5)',
  
              borderColor: 'rgba(54, 162, 235, 1)',
  
              borderWidth: 1
  
            },
  
            {
  
              label: 'Followed',
  
              data: followedData,
  
              backgroundColor: 'rgba(255, 205, 86, 0.5)',
  
              borderColor: 'rgba(255, 205, 86, 1)',
  
              borderWidth: 1
  
            },
  
            {
  
              label: 'Following',
  
              data: followingData,
  
              backgroundColor: 'rgba(75, 192, 192, 0.5)',
  
              borderColor: 'rgba(75, 192, 192, 1)',
  
              borderWidth: 1
  
            },
  
            {
  
              label: 'Views',
  
              data: viewsData,
  
              backgroundColor: 'rgba(153, 102, 255, 0.5)',
  
              borderColor: 'rgba(153, 102, 255, 1)',
  
              borderWidth: 1
  
            }
  
          ]
  
        },
  
        options: {
  
          scales: {
  
            y: {
  
              beginAtZero: true,
  
              title: {
  
                display: true,
  
                text: 'Metrics'
  
              }
  
            },
  
            x: {
  
              title: {
  
                display: true,
  
                text: 'Components'
  
              }
  
            }
  
          }
  
        }
  
      };
  
  
  
  
      // Create chart
  
      const canvas = document.createElement('canvas');
  
      const ctx = canvas.getContext('2d');
  
      document.body.appendChild(canvas);
  
  // Target the existing canvas instead of creating a new one
  
      // Replace 'myChart' with the ID of your canvas element
  
      // const ctx = document.getElementById('myChart').getContext('2d');
  
  
  
  
      new Chart(ctx, config);
  
    }
  
  });
  
  </script>

   
  0

Please sign in to leave a comment.