I am using a bootstrap admin theme within a theme and I am using amcharts. I reference them like so (btw once i finish debugging I combine them into one call):

<script src="{{ ['admin_options/js/amcharts/amcharts.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/serial.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/pie.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/plugins/export/export.min.js']|theme }}"></script>

Everything works well except that I get some reference errors on the last js file - it has several references inside it (Excerpt from export.min.js):

AmCharts[ "export" ] = function( chart, config ) {
    var _timer;
    var _this = {
        name: "export",
        version: "1.4.61",
        libs: {
            async: true,
            autoLoad: true,
            reload: false,
            resources: [ "fabric.js/fabric.min.js", "FileSaver.js/FileSaver.min.js", {
                "jszip/jszip.min.js": [ "xlsx/xlsx.min.js" ],
                "pdfmake/pdfmake.min.js": [ "pdfmake/vfs_fonts.js" ]
            } ],
            namespaces: {
                "pdfmake.min.js": "pdfMake",
                "jszip.min.js": "JSZip",
                "xlsx.min.js": "XLSX",
                "fabric.min.js": "fabric",
                "FileSaver.min.js": "saveAs"
            },
            loadTimeout: 10000
        },

When I do an inspect: these are the errors:

Scriptfabric.min.js 404 script 31db3d0…-1587144886:2 645 B 873 ms
ScriptFileSaver.min.js 404 script 31db3d0…-1587144886:2 642 B 745 ms
Scriptjszip.min.js 404 script 31db3d0…-1587144886:2 642 B 815 ms
Scriptpdfmake.min.js 404 script 31db3d0…-1587144886:2 644 B 786 ms
Imagedata:image/svg+xml;… 200 svg+xml Other (memory cache) 0 ms
31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/FileSaver.js/FileSaver.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/pdfmake/pdfmake.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/jszip/jszip.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/fabric.js/fabric.min.js net::ERR_ABORTED 404 (Not Found)

It tries to load the resources but can't find them. How do I handle references within the css - not sure why the rewrite doesnt work in this case. So the question is how do I correctly reference this -clearly I am doing something wrong.


 ​

Last updated 3 years ago

Where are the resources actually located within your theme structure?

Main theme: dev.mcx.test\public\themes\goeroe-semantic-october\

Admin Theme: dev.mcx.test\public\themes\goeroe-semantic-october\admin_options\

Export js: dev.mcx.test\public\themes\goeroe-semantic-october\admin_options\js\amcharts\plugins\export

Look at the sample reference that fails: dev.mcx.test/amcharts/ ????

http://dev.mcx.test/amcharts/plugins/export/libs/fabric.js/fabric.min.js net::ERR_ABORTED 404 (Not Found)

Last updated 3 years ago

Also: Reference errors happen after I include the chart function on the page:

      <script>
$(function(){
"use strict";

// chart
var chart = AmCharts.makeChart("production-chart", {
    "type": "serial",
    "theme": "light",
    "fontFamily": "Poppins",
    "marginTop":0,
    "marginRight": 30,
    "dataProvider": [  { "date": "2019-08-13", "value": 1352},

                                            { "date": "2019-08-14", "value": 1140},

                                            { "date": "2019-08-30", "value": 1140},

                                            { "date": "2019-10-08", "value": 3819},

                                            { "date": "2019-10-09", "value": 3819},

                                            { "date": "2019-10-10", "value": 3819},

                                            { "date": "2019-10-18", "value": 3269},

                                            { "date": "2019-10-19", "value": 3819},

                                            { "date": "2019-10-22", "value": 2598},

                                            { "date": "2019-11-22", "value": 236},

                                            { "date": "2019-11-27", "value": 2133},

                                            { "date": "2019-12-13", "value": 2945},

                                            { "date": "2019-12-20", "value": 160},

                                            { "date": "2019-12-23", "value": 461},

                                            { "date": "2019-12-24", "value": 3356},

                                            { "date": "2020-03-03", "value": 1405},

                                            { "date": "2020-03-07", "value": 699},

                                            { "date": "2020-03-18", "value": 281},

                                            { "date": "2020-03-21", "value": 994},

                                            { "date": "2020-03-22", "value": 2667},

                                            { "date": "2020-03-23", "value": 523},

                                            { "date": "2020-03-24", "value": 2892},

                                            { "date": "2020-03-25", "value": 523},

                                            { "date": "2020-03-26", "value": 2993},

                                            { "date": "2020-03-27", "value": 566},

                                            { "date": "2020-04-16", "value": 3819},

                { "date": "2020-04-17","value": 407}

    ],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
        "bullet": "round",
        "bulletSize": 8,
        "lineColor": "#27ae60",
        "lineThickness": 2,
        "negativeLineColor": "#e74c3c",
        "type": "smoothedLine",
        "valueField": "value"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#888888",
        "scrollbarHeight":55,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":0.2,
        "graphLineColor":"#c2c2c2",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1
    },
    "chartCursor": {
        "categoryBalloonDateFormat": "yyyy-MM-dd",
        "cursorAlpha": 0,
        "valueLineEnabled":true,
        "valueLineBalloonEnabled":true,
        "valueLineAlpha":0.5,
        "fullWidth":true
    },
    "dataDateFormat": "yyyy-MM-dd",
    "categoryField": "date",
    "categoryAxis": {
        "minPeriod": "yyyy-MM-dd",
        "parseDates": true,
        "minorGridAlpha": 0.1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    }

});
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
    chart.zoomChart();
}

function zoomChart(){
    chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}

}); </script>

I am not sure if the |theme filter will handle resources WITHIN an imported asset... not sure if this is possible in any case.

are the resources referenced in your export.min.js referenced/used somewhere in the js code ?

can you share this code?

Last updated 3 years ago

If this is the case this is a big problem because most themes now come with imported assets - referencing svg for example which look to be broken in my case as well, and also referencing fonts called from css.

What version of Ocober do you use?

CURRENT BUILD 461

I am not familiar with bootstrap admin themes, neither with amcharts.

Maybe try the support chat channel?

First thing I would try is to NOT use the public folder (I know this is for security purpose) for debugging purpose. I'm sure what you are trying can work, just not sure where the problem is.

Thanks for trying. I do think this is a generic issue as you stated with referencing imported assets. When the script runs it calls several resources which it can't find because the |theme rewrite won't work in that case.

I don't know. What if you only include the export.min.js and reference it directly, without using the "|theme" filter ?

What about putting a rewrite condition in the .htaccess file? Can I edit that file directly or is that done within config files?

I was just writing a post to suggest this... :)

You can edit directly

something like:

RewriteRule ^(amcharts/.+) /public/themes/goeroe-semantic-october/admin_options/js/$1 [L]

Let me know if you make this work.

I think that will fix it...most of my reference errors are cleared up - still have a few issues but I made the following changes: htaccess:

RewriteCond %{REQUEST_FILENAME} !/themes/./(assets|resources|amcharts)/.

RewriteCond %{REQUEST_FILENAME} !/amcharts/./(images|plugins)/.

Last updated 3 years ago

Yes that worked all references are now good!! Thanks for all your help!!

Nice! If you'd like to contribute documenting this, head to https://octobertricks.com, register and submit an entry.

Thanks!