Chart.js is not working on live site.

Ask the community
,
1

I followed chart.js custom element example [ https://www.wix.com/velo/example/chart.js-custom-element ]. I installed " v2.9.4 chart.js"

I added my chart in a light box page and it’s working fine in editor.

However chart is not showing on live site which has premium plan. Can anybody give me an advice?

Thanks in advance.

2

URL?

3

So sorry I have to remove the chart from site.
Also I don’t have permission to edit live site… sorry…

This is a screenshot from editor.

1380×768 83 KB

And this is a screenshot from live site.

1089×795 32.2 KB

And this is code…

Again Thanks a lot in advance.

import { ChartJSAPI } from ‘public/chart-api’ ;
import { chartCustomization } from ‘public/chart-customization’ ;
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

$w.onReady( async function () {
let productData = wixWindow.lightbox.getContext();
let todayDate = new Date();
let lastYearString = (todayDate.getFullYear() - 1 ) + “-” + ( “0” + (todayDate.getMonth() + 1 )).slice(- 2 ) + “-” + ( “0” + todayDate.getDate()).slice(- 2 );

//productData = {“_productName”: “토마토”, “_weight”: 5, “_grade”: “1등”};

$w( '#textName' ).text = productData[ "_productName" ] +  " / "  + productData[ "_weight" ].toString() +  " / "  + productData[ "_grade" ]; 

wixData.query( "Sise" ) 
    .eq( "_productName" , productData[ "_productName" ]) 
    .eq( "_grade" , productData[ "_grade" ]) 
    .eq( "_weight" , productData[ "_weight" ]) 
    .ge( "_date" , lastYearString) 
    .ascending( "_date" ) 
    .limit( 1000 ) 
    .find() 
    .then(results => {

var priceData = {
“_productName” : productData[ “_productName” ],
“_weight” : productData[ “_weight” ],
“_grade” : productData[ “_grade” ],
“_date” :,
“_minmax” :,
“_avg” :
};

for(var i = 0 ; i < results.items.length; i++){
var item = results.items[i];
var date = new Date(item[ “_date” ])

var currentYear;

if (currentYear === date.getFullYear().toString()){
priceData[ “_date” ].push((date.getMonth() + 1 ) + “/” + date.getDate());
} else {
currentYear = date.getFullYear().toString();
priceData[ “_date” ].push(currentYear + “/” + (date.getMonth() + 1 ) + “/” + date.getDate());
}

            priceData[ "_minmax" ].push([item[ "_min" ], item[ "_max" ]]); 
            priceData[ "_avg" ].push(item[ "_avg" ]); 
        } 
        loadChart(priceData); 
});

});

function loadChart(priceData){
let chart = new ChartJSAPI($w( ‘#priceChart’ ));
chart.customization = chartCustomization;

chart.data = { 
    labels: priceData[ "_date" ], 
    datasets: [{ 
        data: priceData[ "_avg" ],  
        label:  "평균가격" ,  
        borderColor:  '#194A8D ' , 
        backgroundColor:  'transparent' , 
        type:  "line" , 
        borderWidth:  2 , 
        pointRadius:  2 , 
        pointBackgroundColor:  '#194A8D ' , 
        pointHoverBorderColor:  '#194A8D ' , 
        pointHoverBackgroundColor:  '#194A8D ' , 
        lineTension:  0 

    },{ 
        data: priceData[ "_minmax" ],  
        label:  "최고,최저가격" , 
        backgroundColor:  'lightblue' , 
        type:  'bar' 
    }] 
}; 

$w( '#imgLoading' ).hide(); 
$w( '#boxAlert' ).hide()

}