Help creating a jscript to correctly display an array for a heatmap chart

[StevenM]

Calling all jscript wizards.

This is my dilemma, and I think this will prove useful to other bubblers looking for the same solution.

I am trying to work my way through jscript and absolute newby and can read the code and no what it does but not clear on syntax or how to make it work.

So this is the problem:

I have a solution which will allow for the implementation of heatmaps charts in my app https://apexcharts.com/docs/chart-types/heatmap-charts/

The solution works great using the example, so what I need to do now is create a script which writes an array in the correct format for the chart script to render the chart correctly.

Let’s look at an example provided by APEXCHARTS:

function generateData(count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
        var x = 'w' + (i + 1).toString();
        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

        series.push({
            x: x,
            y: y
        });
        i++;
    }
    return series;
}


var options = {
    chart: {
        height: 350,
        type: 'heatmap',
    },
    dataLabels: {
        enabled: false
    },
    colors: ["#008FFB"],
    series: [{
            name: 'Metric1',
            data: generateData(18, {
                min: 0,
                max: 90
            })
        },

This example code basically creates a random set of numbers for each series up to 18 columns, the full example has 9 series.

I understand what this does, but this is what I want to do:

For ‘x’ I have a list of unique names (string) in the database which I pull from using a bubble query.

y = Search for Feedback_round's date_month:unique elements (example: ["Jan", "Feb", "March", "April"])

For ‘y’ I have a list of numbers for each round in a month which is calculated like this:

Jan = Search for Activitys's Score:formatted as 1029 (example: [40, 15, 10, 10, 25]) 

I have have the same number series in each month:

series = Search for Feedback_round's title:unique elements (example: ["round 1", "round 2", "round 3", "round 4"])

             Jan    Feb       March    April
   Round 1    40     25         10       10
   Round 2    15     35         20       25
   Round 3    10     10         30       25
   Round 4    10     20         30       10
   Round 5    25     10         10       30

So what I need to be able to do is take the data and print it into the format which is correct.

For example:

  series: [
    {
      name: "Round 1",
      data: [{
        x: 'Jan',
        y: 40
      }, {
        x: 'Feb',
        y: 25
      }, {
        x: 'March',
        y: 10
      }, {
        x: 'April',
        y: 10
      }]
    },
    {
      name: "Round 2",
      data: [{
        x: 'Jan',
        y: 15
      }, {
        x: 'Feb',
        y: 35
      }, {
        x: 'March',
        y: 20
      }, {
        x: 'April',
        y: 25
      }]
    }
  ]
}

So that’s it I have tried, but like I said I am a newby and basically falling my way through this.

I think it would also be a great solution for other bubble users here looking to implement a similar style chart.

Can you help?

[Jici]

Currently creating a plugin.

[StevenM]

This may be the case but I would still like to understand and learn how to iterate through an array and print it in a particular format.

[Jici]

I mean that I was creating one.
There’ different way to iterate an array, one of it is using a for loop. You can search web for iterate array in javascript. There’s a lot of ressources about that

[Jici]

https://sandboxjc.bubbleapps.io/version-test/heatmap?debug_mode=true is a preview of the plugin. This is currently using Bubble DB to get value like it should.

Editor: https://bubble.io/page?type=page&name=heatmap&id=sandboxjc&test_plugin=1560175515094x816883788293865500_current&tab=tabs-1

Will add more option tomorrow

[StevenM]

looks good so far, if you can some how simplify the data layout to make it easier to specify and edit the data for each series.

[exception-rambler]

Hey @StevenM - just had a play with this and got the code below…
Although it’s probably a lot easier to view on CodePen here

Let me know if you need any help with making sense of it, or if something is wayward with my interpretation.

//FETCH YOUR DATA
  var xLabels = ['Jan','Feb','March','April'];
  var seriesNames = ["Round 1", "Round 2", "Round 3", "Round 4", "Round 5"];

  //easier to store your values in an array if you want to play with them later
  //I'm assuming from that you're manually loading these via dynamic Searches in your Toolbox JS
  var valuesArr = [];
  valuesArr[0] = [40, 15, 10, 10, 25];
  valuesArr[1] = [25, 35, 10, 20, 10];
  valuesArr[2] = [10, 20,30 ,30, 10];
  valuesArr[3] = [10, 25, 25, 10, 30];


//REARRANGE YOUR DATA
  var data = [];
  var dataSeries = [];

  //function that will take an xLabel e.g. Jan, and then add the corresponding value from each of the valuesArrays
  function dataSorter(names, valuesArray, position){
    let dataArr = [];
    
    //loop through each of the valuesArrays
    for (let c=0; c < valuesArray.length; c++) {
      //create a mini {x: something , y: something} object that can be pushed to the larger series object
      let dataObj = {
        x: names[c],
        y: valuesArray[c][position] //only pick out the correct value from the current valuesArray
      };
      dataArr.push(dataObj);
    }
    return dataArr;
  }

  //loop through each Series from Round 1 to Round 5
  for (var t=0; t < seriesNames.length; t++) {
    dataSeries[t] = {
      name: seriesNames[t],
      data: dataSorter(xLabels, valuesArr, t)
    };
  }

//I'm not totally sure how you need this presented at the end - your post suggested as an item in an array called 'series'
var series = [dataSeries];

console.log(series);

[Jici]

I need to think to different use case.
Yes we can use a script similar that what @exception-rambler suggest that will make easier but we will need to choose to count, average or sum. Using the way I have done it, we can use all three.

This is not really complicated to change the data series and it only take me a few min to do it with copy paste (copy the expression for the first series and after, copy everything and add after. Just need to add coma, | and modify expression. I can record a video if you need to see how I have done this part in a few min.

[StevenM]

Thanks @exception-rambler nice job! I will give this a try and understand most, but will try and work this out.

[StevenM]

@Jici what you could do for each series on the plugin is have an input field for each series say up to 10 would be enough for most. This would make it a lot easier for those non coders who are used to working this way, rather than adding all in the same field. It probably a mater of usability rather than functionality.

[StevenM]

Hi @exception-rambler so I am using code pen to work through it and i can see the result in console.

Had to edit my comment as I figured out was was going on while I was writing up my comment.

I see it is looping but is missing the first series name “round 1” seems to jump the first loop. “Round 1” is showing at position which should be round 2 and also puts the last round 5 without a array so is one position out. I tried playing with the code but couldn’t figure it out but assume it has something to do with the array starting at [0] - actually no it wouldn’t, so not sure.

name: seriesNames[t],

In terms of context as an example (using just two rounds) the rendering of the data should looks like the below. I am not sure what the extra brackets showing in in code-pen or the “Object”, which I assume is not really there but codepen showing you where the object starts?

  series: [
    {
      name: "Round 1",
      data: [{
        x: 'Jan',
        y: 40
      }, {
        x: 'Feb',
        y: 25
      }, {
        x: 'Mar',
        y: 10
      }, {
        x: 'Apr,
        y:10
      }]
    },
    {
      name: "Round 2",
      data: [{
        x: 'Jan',
        y: 15
      }, {
        x: 'Feb',
        y: 35
      }, {
        x: 'Mar',
        y: 20
      }, {
        x: 'Apr',
        y: 25
      }]
    }
  ]

[yuliia.yashchuk]

Thanks! Very informative, well done.

[exception-rambler]

On context, I now get it after re-reading your OP.
The data object is a property of an options object - have updated that on CodePen.

I think that I’m getting a different output if I understand you correctly. Attaching below a screenshot of the object that I output to console.

That shows an object sat at positions [0] - [4] of an array, with a name property going from ‘Round 1’ at position [0] to ‘Round 5’ at position [4]. And there is a (I think correctly) corresponding set of values at each position too.

But this may be explained by my own understanding being a bit out

Take a look at see what you think.
Edit: Have just added in the Apex code so you can visually check-out whether the data presents as you would expect too.

[StevenM]

Hi @exception-rambler yep works great, sorry seeing a different output in console (new to codepen so maybe missing something), maybe doing something different, just running the code in code pen.

The result is as it should be though, but just trying to understand the console output

[exception-rambler]

@StevenM that is so strange
I see why that is confusing!

I actually don’t use the CodePen console but stick with the Chrome console - see how it looks on there

[StevenM]

@exception-rambler aha ha! so much better thanks!

[StevenM]

Thanks @exception-rambler great job and hopefully help others looking for a heatmap solution - of course not as easy as Chart Tools, but a great accompaniment.

Thanks Again!

[Jici]

Upcoming plugin: https://sandboxjc.bubbleapps.io/heatmap