Skip to content
This repository was archived by the owner on Jan 10, 2023. It is now read-only.
This repository was archived by the owner on Jan 10, 2023. It is now read-only.

Uncaught TypeError: Ei is not a function #29

@radu-andrei-28

Description

@radu-andrei-28

Hello,

Since few weeks I decided to localize my website based on the the browser culture and since that decision i start to face the following error. Uncaught TypeError: Ei is not a function.

The weird thing is that when i change the language of my chrome(Version 47.0.2526.106 m) to English US and i set up the APIversion to 1 (google.load('visualization', '1', { packages: ['controls'], callback: createCpuRamChart });) my charts are shown.

When i change the browser language to Danish i am getting the error i mentioned before.

I have tried also to use the API version 1.1. The result was that with the browser language set up to English US, the charts are not shown but when i change to Danish the chart works..

I have even changed the way how i load the data like:

var cpuData = new google.visualization.DataTable();

             cpuData.addColumn('date', 'Date');
             cpuData.addColumn('number', 'CPU');
             cpuData.addRow([new Date(1252152000000),4])
             cpuData.addRow([new Date(1252152000123),5])
             cpuData.addRow([new Date(1252152000456),6])

But unfortunate I am getting the same error....

My code looks like:

google.load('visualization', '1.1', { packages: ['controls'], callback: createCpuRamChart });

function createCpuRamChart() {

    // A. Create new instance of DataTable to add our data to
    var cpuData = new google.visualization.DataTable();

    cpuData.addColumn('date', 'Date');
    cpuData.addColumn('number', '@Resources.Administration.ServerStatistics_CPU_ChartLabel');

    @if (Model.cpuUsage != null)
    {
        DateTime d1 = new DateTime(1970, 1, 1);
        foreach (var item in Model.cpuUsage)
        {
            var dateTime = (DateTime)item.GetValue(0); 
            DateTime d2 = dateTime.ToUniversalTime();
            TimeSpan ts = new TimeSpan(d2.Ticks - d1.Ticks);
            @: cpuData.addRow([new Date(@ts.TotalMilliseconds),@item.GetValue(1).ToString().Replace(",", ".")])
                }
    };

    //B. RAM data instance

    var ramData = new google.visualization.DataTable();

    // B. Create three columns with DataTable.addColumn(type, label)
    ramData.addColumn('date', 'Date');
    ramData.addColumn('number', '@Resources.Administration.ServerStatistics_RAM_ChartLabel');

    @if (Model.memUsage != null)
    {
        DateTime d1 = new DateTime(1970, 1, 1);
        foreach (var item in Model.memUsage)
        {
            var dateTime = (DateTime)item.GetValue(0);
            DateTime d2 = dateTime.ToUniversalTime();
            TimeSpan ts = new TimeSpan(d2.Ticks - d1.Ticks);
            @: ramData.addRow([new Date(@ts.TotalMilliseconds),@item.GetValue(1).ToString().Replace(",", ".")])
        }
    };


    // Create the main Chart
    var cpuChart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'cpuUsageLineChart',
        options: {
            hAxis: {
                title: 'Period'
            },
            vAxis: {
                title: 'Percentage'
            },
            width: 800,
            height: 400,
            chartArea: { left: 70, top: 20, bottom: 30, width: "80%", height: "80%" }
        }
    });


    var ramChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'ramUsageLineChart',
        options: {
            //legend:'none',
            hAxis: {
                title: 'Period'
            },
            vAxis: {
                title: 'GB'
            },
            width: 800,
            height: 400,
            chartArea: { left: 70, top: 20, bottom: 30, width: "80%", height: "80%" },
        }
    });

    // Create a date range slider
    var cpuDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'cpuUsageDateRange',
        'options': {

            height: 150,
            // Filter by the date axis.
            filterColumnLabel: 'Date',
            backgroundColor: '#f1f8e9',
            ui: {
                //minRangeSize: 1800000,//not needed. You can set the range under the master dashboard
                chartOptions: {
                    chartArea: { width: '95%', height: '100' },
                },
            }
        },

    });

    var ramDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'ramUsageDateRange',
        'options': {
            // Filter by the date axis.
            filterColumnLabel: 'Date',
            backgroundColor: '#f1f8e9',
            ui: {
                //minRangeSize: 1800000, //not needed. You can set the range under the master dashboard
                chartOptions: {
                    chartArea: { width: '95%', height: '100' },
                },
            }
        },

    });
    var formatDate = new google.visualization.DateFormat(
       { prefix: 'Time: ', pattern: "dd MMM HH:mm", });
        //{ prefix: 'Time: ', formatType: 'medium', });

    formatDate.format(cpuData, 0);
    formatDate.format(ramData, 0);
    // Create a dashboard.
    var dash_container = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash_container.bind(cpuDateSlider, cpuChart);

    var dash_container2 = new google.visualization.Dashboard(document.getElementById('dashboard2'));
    dash_container2.bind(ramDateSlider, ramChart);

    dash_container.draw(cpuData);
    dash_container2.draw(ramData);

    // create the master control
    var controlMaster = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_master2',
        dataTable: cpuData,
        options: {

            // Filter by the date axis.
            filterColumnLabel: 'Date',
            backgroundColor: '#f1f8e9',
            ui: {
                // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
                minRangeSize: 1800000,// 30 min
                //chartView: {columns: [0, 1]},
                chartOptions: {
                    chartArea: { width: '95%', height: '80' },
                },
            }
        },
    });
    google.visualization.events.addListener(controlMaster, 'statechange', function () {
        var state = controlMaster.getState();
        cpuDateSlider.setState(state);
        ramDateSlider.setState(state);
        dash_container.draw(cpuData);
        dash_container2.draw(ramData);
    });

    controlMaster.draw();
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions