Multiple charts, high memory usage

[clnt]

Hi,

I thought I would create an issue for this then you can decide if you wish to do anything with it :)

The app I have been writing needs to sometimes render up to 100 charts, this causes the browser to use up a huge amount of memory (5-6GB area). Unfortunately most of this is down to the Google Charts library itself, however it can be alleviated a bit by handling them all from a single component which stops the loadGoogleChart() function being called multiple times.

I have a working multiple chart version in my fork: https://github.com/clnt/vue-google-charts/tree/multi-chart

When the multiple prop is true it will accept an array of groups of charts. This is the data I am feeding it:

[
    {
        "name": "Group Name",
        "classes": ["class1", "class2"],
        "data": [
            {
                "name": "Chart Name",
                "ref": "custom-ref1",
                "data": [
                    ["Year", "Sales", "Expenses", "Profit"],
                    ["2014", 1000, 400, 200],
                    ["2015", 1170, 460, 250],
                    ["2016", 660, 1120, 300],
                    ["2017", 1030, 540, 350]
                ]
            },
            {
                "name": "Chart Name",
                "ref": "custom-ref2",
                "data": {
                    "cols": [],
                    "rows": []
                }
            }
        ]
    }
]

Unfortunately I will probably have to switch from Google Charts to a different library to handle more than 100 charts, however with the above changes the performance increase has made it manageable for now.