Trying to use charts type table and charts type line in the same page.

[Javi Vendrell]

Hi everybody,

I'm trying to display 6 charts, 3 charts should be displayed using line charts and 3 otherones using tables. Both groups have the same data.

The point is that I can't charge both libraries at same time.

Table charts uses:    

 google.charts.load('current', {'packages': ['table']});

Line charts uses: 

google.charts.load('current', {'packages': ['corechart']});

The issue comes when I'm trying to get both, seems like once one is charged in the page the other one can't be charged. I tried in some methods like:

 google.charts.load('current', {'packages': ['table']});

google.charts.load('current', {'packages': ['corechart']});

OR

google.charts.load('current', {'packages': ['corechart']}, {'packages': ['table']});

How that does not look to work I just tryied to use jQuery to display one type or other one depending of a selection on a radio button like this:

           

$(document).ready(function () {
                $('#option-2').change(function () {
                    if ($(this).is(':checked')) {
                        alert("Table");
                       
                        google.charts.load('current', {'packages': ['table']});


                        google.charts.setOnLoadCallback(TableTemps);
                        google.charts.setOnLoadCallback(TableWatts);
                        google.charts.setOnLoadCallback(TableAmps);
                       
                    }
                });
                $('#option-1').change(function () {
                    if ($(this).is(':checked')) {
                        alert("line");
                       
                        google.charts.load('current', {'packages': ['corechart']}, {'packages': ['table']});


                        google.charts.setOnLoadCallback(Temps);
                        google.charts.setOnLoadCallback(Watts);
                        google.charts.setOnLoadCallback(Amps);
                       
                    }
                });
            });

But as I said, once one of the libraries is charged the other one can't be charged so neither used.

Does anyone know how could I display both types of charts at the same time or at least use the second solution I did to just select a kind of chart?

Appreciate your help.

Javier Vendrell

[Javi Vendrell]

Okay, I just saw something in Google charts documentation (pretty hidden by the way) that says you can't use google.charts.load() more than once, but there also says that you can list all the packages you'll need in one call as you can see is the second thing I tried on my post up, but still not working.

Documentation says:  

There are three minor but important limitations with loading Google Charts that we expect to resolve in the near future:

1. You can only call google.charts.load() once. But you can list all the packages that you'll need in one call, so there's no need to make separate calls.

1. You can't autoload the library.

1. If you're using a ChartWrapper, you must explicitly load all the packages you'll need, rather than relying on the ChartWrapper to automatically load them for you.

1. For Geochart and Map Chart, you must load both the old library loader and the new library loader.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/9BfnY-emyA0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6cd48650-c174-40e0-9ab5-873cfbc5441b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Javier Vendrell Møller

[Daniel LaLiberte]

Hi Javi,

Do it like this instead:

google.charts.load('current', {'packages': ['corechart', 'table']});

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFEEN0bhe6LAqNE6zM4nLdfnSYcDDmeckaGW78ao%3DESerNR4KQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Javi Vendrell]

Hi Daniel,
Just tryied like that and it is not working neither.
But thanks for your response:)

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMtOLDSf8R18OsvO0tT9DhXmdvPWuws_VVBcXzHJMj9Vw%40mail.gmail.com.

[Daniel LaLiberte]

It is necessary to do what I said, but you may need more changes than that.  In fact, it looks like your code still calls google.charts.load() more than once.  Just move the load call outside of your document ready handler, and only make one call.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFEEN0Zhd2Rqs63uWDjcx8pgKE3pa0BkSPrVw0gJsdTr5-8LKA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Javi Vendrell]

Okai now I'm able to be back to this code I'll answer, thanks for all your answers but I think we didn't find the correct mistake. 

Look I'll put some of my code in order to be able to resolve it easier:

 google.charts.load('current', {'packages': ['corechart']}, {'packages': ['table','line']});

            function Watts() {
                var jsonData = $.ajax({
                    url: "GetWattsData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Watts SC1 Datacenter',
                    width: 500,
                    height: 400,
                    vAxis: {
                        title: 'Power in Watts'
                    },
                    hAxis: {
                        title: 'Day of month'
                    }
                }
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
            function Amps() {
                var jsonData = $.ajax({
                    url: "GetAmpsData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Ampers SC1 Datacenter',
                    width: 500,
                    height: 400,
                    vAxis: {
                        title: 'Current in Ampers'
                    },
                    hAxis: {
                        title: 'Day of month'
                    }
                }
                var chart = new google.visualization.LineChart(document.getElementById('Amps'));
                chart.draw(data, options);
            }
            function Temps() {
                var jsonData = $.ajax({
                    url: "GetTempData.php",
                    dataType: "json",
                    async: false
                }).responseText;


                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Temperatures SC1 Datacenter',
                    width: 500,
                    height: 400,
                    vAxis: {
                        title: 'Temperatures Celsius'
                    },
                    hAxis: {
                        title: 'Day of month'
                    }
                }
                var chart = new google.visualization.LineChart(document.getElementById('Temps'));
                chart.draw(data, options);


            }


            function TableWatts() {
                var jsonData = $.ajax({
                    url: "GetWattsData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Watts SC1 Datacenter',
                    width: 150,
                    height: 200,
                }
                var chart = new google.visualization.Table(document.getElementById('TableWatts'));
                chart.draw(data, options);
            }
            function TableAmps() {
                var jsonData = $.ajax({
                    url: "GetAmpsData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Ampers SC1 Datacenter',
                    width: 150,
                    height: 200,
                }
                var chart = new google.visualization.Table(document.getElementById('TableAmps'));
                chart.draw(data, options);
            }
            function TableTemps() {
                var jsonData = $.ajax({
                    url: "GetTempData.php",
                    dataType: "json",
                    async: false
                }).responseText;
                var data = new google.visualization.DataTable(jsonData);
                var options = {title: 'Average Temperatures SC1 Datacenter',
                    width: 150,
                    height: 200,
                }
                var chart = new google.visualization.Table(document.getElementById('TableTemps'));
                chart.draw(data, options);
            }

El dimarts, 24 maig de 2016 17:03:47 UTC+2, Javi Vendrell va escriure:

[Javi Vendrell]

Ok, didn't said anything, can't believe how stupid I'm sometimes.... That hapends when you are programming 12h a day... but the problem that I was doing and that I was missing is as simple how I was charging unexisting typecharts

instead using 'corechart' I was trying to load 'line' so the solution is as simple as writting:

google.charts.load('current', {'packages': ['table', 'corechart']});

instead;

google.charts.load('current', {'packages': ['table', 'line']});

El dimarts, 24 maig de 2016 17:03:47 UTC+2, Javi Vendrell va escriure:

Hi everybody,

[Daniel LaLiberte]

Yes, LineChart is actually a corechart.  The 'line' package is for the Material Line chart which you are not using.   We should make the documentation less subtle about this distinction.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/fd2da2a8-5875-481e-9a85-fa110e472242%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.