Chart with filters using HTML component

Ask the community
,
1

I am trying to create a dynamic chart using filters in the form of a dropdown menu and a database. I used the codes on ( https://www.wix.com/corvid/example/create-a-custom-chart ) and ( https://www.vorbly.com/Vorbly-Code/WIX-IFRAME-GRAPHS-%26-CHARTS-WITH-FILTERS ) to get my code.
My page is (https://parsheetaroy.wixsite.com/mysite-2) and my public and html codes are below. My chart is not getting scaled like the corvid example and its going out of the boundary. Please point out any mistake I might have made and suggest any possible solutions.

PAGE CODE

import wixData from ‘wix-data’;
import { monthSort } from ‘public/months’;
$w.onReady(() => {
$w(“#table1”).columns = [
{
“id”: “col1”,
“dataPath”: “month”,
“label”: “Month”,
“type”: “string”
},
{
“id”: “col2”,
“dataPath”: “total”,
“label”: “Total Expenses”,
“visible”: true ,
“type”: “number”
}
];
wixData.query(“Expenses”)
.ascending(“month”)
.limit(1000) // include a limit if you have more than 50 items
.find()
.then((result) => {
var i = 0;
const months = result.items.map(y => y.title);
const aggregated = months.map(x => {
return {
month: x,
total: result.items
.map(z => z.amount)
.slice(i, ++i)
};
});
$w(“#table1”).rows = aggregated;
let tableArr = ;
for (i = 0; i < $w(“#table1”).rows.length; i++) {
tableArr.push(
$w(“#table1”).rows[i][“total”]
)
}
console.log(tableArr);
$w(“#html1”).postMessage(tableArr);
$w(“#html1”).onMessage((event) => {
if (event.data.type === ‘ready’) {
$w(“#html1”).postMessage(tableArr);
}
if (event.data.type === ‘click’) {
$w(“#text1”).text = The expenses **in** ${months} is ${event.data.value} rupees.;
$w(“#text1”).show();
}
});
});
});
export function dropdown1_change(event) {
$w(“#table1”).columns = [
{
“id”: “col1”,
“dataPath”: “month”,
“label”: “Month”,
“type”: “string”
},
{
“id”: “col2”,
“dataPath”: “total”,
“label”: “Total Expenses”,
“visible”: true ,
“type”: “number”
}
];
wixData.query(“Expenses”)
.ascending(“month”)
.eq(“type”, $w(“#dropdown1”).value)
.limit(1000)
.find()
.then((result) => {
var i = 0;
const months = result.items.map(y => y.title);
const aggregated = months.map(x => {
return {
month: x,
total: result.items.map(z => z.amount)
.slice(i, ++i)
};
});
$w(“#table1”).rows = aggregated;
let tableArr = ;
for (i = 0; i < $w(“#table1”).rows.length; i++) {
tableArr.push(
$w(“#table1”).rows[i][“total”]
)
}
console.log(tableArr);
$w(“#html1”).postMessage(tableArr);
});
}
PUBLIC CODE (months.js)

const months = [“January”, “February”, “March”, “April”,
“May”, “June”, “July”, “August”,
“September”, “October”, “November”, “December”];
export function monthSort(a, b) {
return months.indexOf(a) - months.indexOf(b);
}

HTML CODE

Title
2

Hi Parsheeta,
From looking at your code I think that the iFrame element you used is too small to fit the content.
I’d suggest to do 1 of the following options:

  1. Increase the iFrame element height

or

  1. decrease the height of the canvas element you used inside.
    I see you used "height=“96%” on your code
<canvas id="myChart" width="100%" height="96%"></canvas>

Try instead this code and see if it fits.

<canvas id="myChart" width="100%" height="80%"></canvas>
3

1920×1440 641 KB

I tried changing the height of the iframe element itself and the canvas height to 80% but neither is making any difference

4

hey just one question why did you change these codes:

from this (Vorbly Original):

const months = result.items.map(x => x.month)
          .filter((obj, index, self) => index === self.indexOf(obj))
          .sort(monthSort);
      const aggregated = months.map(x => {
          return {
             month: x,
             total: result.items.filter(obj => obj.month === x)
                       .map(z => z.amount)
                       .reduce((sum, current) => sum + current)
                      };
                    });

to this:


 var i = 0;
const months = result.items.map(y => y.title);
const aggregated = months.map(x => {
return {
        month: x,
        total: result.items
          .map(z => z.amount)
          .slice(i, ++i)
      };
    });

maybe the problem is right there.

5

No when I was running the original code I wasn’t getting the output I needed, it was showing some big number (6893 I think) in the first row of the table and nothing else. That’s why I had to change it to this. I think the reduce function was to blame for that which is why I changed it.

6

@parsheetaroy ooo okay.

mmmmmm I think you will have to revisit your codes. I just tested the original vorbly graph and works just fine. I just changed one line of page code but everything else is the original code from Vorbly:

the code:

import wixData from 'wix-data';

import {monthSort} from 'public/months';

 

$w.onReady(function () {

    $w("#table1").columns = [

    {

 "id": "col1",

 "dataPath": "month",

 "label": "Month",

 "type": "string"

    },

    {

 "id": "col2",

 "dataPath": "total",

 "label": "Total Expenses",

 "visible": true,

 "type": "number"

    }

  ];

wixData.query("Expenses")

    .ascending("month")

    .limit(1000)  // Max limit of 1,000 //

    .find()

    .then( (result) => {
const months = result.items.map(x => x.month)

             .filter((obj, index, self) => index === self.indexOf(obj))

             .sort(monthSort);

 const aggregated = months.map(x => {

 return {

                month: x,

                total: result.items.filter(obj => obj.month === x)

                          .map(z => z.amount)

                          .reduce((sum, current) => sum + current)

             };

      });


     $w("#table1").rows = aggregated;


let tableArr = [];

for ( var i = 0; i < $w("#table1").rows.length; i++ ) {

        tableArr.push (

             $w("#table1").rows[i]["total"]

        )

}


       $w("#html1").postMessage(tableArr);

        });

});


export function dropdown1_change(event, $w) {

 

let product = $w("#dropdown1").value;

 

   $w("#table1").columns = [

       {

 "id": "col1",

 "dataPath": "month",

 "label": "Month",

 "type": "string"

       },

       {

 "id": "col2",

 "dataPath": "total",

 "label": "Total Expenses",

 "visible": true,

 "type": "number"

       }

   ];

 

   wixData.query("Expenses")

       .ascending("month")

       .eq("type", product)

       .limit(1000)

       .find()

       .then( (result) => {

 const months = result.items.map(x => x.month)

             .filter((obj, index, self) => index === self.indexOf(obj))

             .sort(monthSort);

 const aggregated = months.map(x => {

 return {

                month: x,

                total: result.items.filter(obj => obj.month === x)

                          .map(z => z.amount)

                          .reduce((sum, current) => sum + current)

             };

      });

 

$w("#table1").rows = aggregated;


let tableArr = [];

for ( var i = 0; i < $w("#table1").rows.length; i++ ) {

       tableArr.push (

            $w("#table1").rows[i]["total"]

       )

}

 

console.log(tableArr);

    $w("#html1").postMessage(tableArr);
 
 $w("#html1").onMessage((event) => {

if (event.data.type === 'ready') {

         $w("#html1").postMessage(tableArr);

       }

if (event.data.type === 'click') {

         $w("#text1").text = `The expenses in ${event.data.label} is ${event.data.value} rupees.`; // I use {event.data.label} instead of {months}

         $w("#text1").show();

        }


});
});
 

}

I hope this can help you. cheers!

873×703 47.2 KB

7

@t8311834 I used your code and I’m still not getting the right output (the chart is getting scaled properly now though). Also I noticed that the table is saying the expenses for November is 670.7 which is correct but the graph is placing that on March.

1892×770 36.7 KB

I am sure its some detail that I’m missing out in the editor so please send me a link so that I can check out your editor myself. Thanks!

8

@t8311834 hey please send me a link to your editor asap. It’s urgent and I tried your code again but I’m still getting the same output that I attached earlier.