Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Lavacharts knihovna - zobrazeni grafu v Bootstrap modal boxu

Aktivity
Avatar
Richard
Inzerent nabídek práce
Avatar
Richard:4.1.2017 15:23

Ahoj,

řeším tento problém. Pomocí Lavachart knihovny vytvářím grafy (Google Charts) v rámci PHP aplikace. Ve view mám tlačítka, každé tlačítko by mělo otevřít Bootstrap Modal Popup s grafem. Ale neděje se mi to.

Ve zdrojáku stránky mám vygenerovaný modal takto

        <!-- Modal -->
                <div class="modal fade" id="myModal_next" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_next">
                        <div class="modal-dialog modal-lg" >
                        <div class="modal-content">
                                <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel_next">Trends Chart for NEXT</h4>
                                </div>
                                <div class="modal-body">
                                        <div id="temps_div_next"></div>

<script type="text/javascript">
        lava.events.on('jsapi:ready', function (google) {
            /**
             * If the object does not exist for a given chart type, initialize it.
             * This will prevent overriding keys when multiple charts of the same
             * type are being rendered on the same page.
             */
            if ( typeof lava.charts.LineChart == "undefined" ) {
                lava.charts.LineChart = {};
            }

            //Creating a new lavachart object
            lava.charts.LineChart["Tablespace_NEXT"] = new lava.Chart();

            //Checking if output div exists
            if (! document.getElementById("temps_div_next")) {
                throw new Error('[Lavacharts] No matching element was found with ID "temps_div_next"');
            }

            lava.charts.LineChart["Tablespace_NEXT"].render = function (data) {
                var $this = lava.charts.LineChart["Tablespace_NEXT"];

                $this.data = new google.visualization.DataTable({"cols":[{"type":"date","label":"Date"},{"type":"number","label":"USED_SPACE_MB"},{"type":"number","label":"FREE_SPACE_MB"},{"type":"number","label":"TOTAL_SPACE"}],"rows":[{"c":[{"v":"Date(2016,9,7,0,0,0)"},{"v":663},{"v":337},{"v":1000}]},{"c":[{"v":"Date(2016,9,8,0,0,0)"},{"v":828},{"v":172},{"v":1000}]},{"c":[{"v":"Date(2016,9,9,0,0,0)"},{"v":828},{"v":172},{"v":1000}]},{"c":[{"v":"Date(2016,9,10,0,0,0)"},{"v":828},{"v":172},{"v":1000}]},{"c":[{"v":"Date(2016,9,11,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,11,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,11,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,12,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,13,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,14,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,15,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,16,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,17,0,0,0)"},{"v":837},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,18,0,0,0)"},{"v":838},{"v":163},{"v":1000}]},{"c":[{"v":"Date(2016,9,19,0,0,0)"},{"v":838},{"v":162},{"v":1000}]},{"c":[{"v":"Date(2016,9,20,0,0,0)"},{"v":839},{"v":161},{"v":1000}]},{"c":[{"v":"Date(2016,9,21,0,0,0)"},{"v":839},{"v":161},{"v":1000}]},{"c":[{"v":"Date(2016,9,22,0,0,0)"},{"v":839},{"v":161},{"v":1000}]},{"c":[{"v":"Date(2016,9,23,0,0,0)"},{"v":839},{"v":161},{"v":1000}]},{"c":[{"v":"Date(2016,9,24,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,25,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,26,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,27,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,28,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,29,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,30,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,9,31,0,0,0)"},{"v":840},{"v":160},{"v":1000}]},{"c":[{"v":"Date(2016,10,1,0,0,0)"},{"v":841},{"v":159},{"v":1000}]},{"c":[{"v":"Date(2016,10,2,0,0,0)"},{"v":842},{"v":158},{"v":1000}]},{"c":[{"v":"Date(2016,10,3,0,0,0)"},{"v":843},{"v":158},{"v":1000}]},{"c":[{"v":"Date(2016,10,4,0,0,0)"},{"v":844},{"v":157},{"v":1000}]},{"c":[{"v":"Date(2016,10,5,0,0,0)"},{"v":848},{"v":152},{"v":1000}]},{"c":[{"v":"Date(2016,10,6,0,0,0)"},{"v":848},{"v":152},{"v":1000}]},{"c":[{"v":"Date(2016,10,7,0,0,0)"},{"v":848},{"v":152},{"v":1000}]},{"c":[{"v":"Date(2016,10,8,0,0,0)"},{"v":856},{"v":144},{"v":1000}]},{"c":[{"v":"Date(2016,10,9,0,0,0)"},{"v":858},{"v":142},{"v":1000}]},{"c":[{"v":"Date(2016,10,10,0,0,0)"},{"v":859},{"v":141},{"v":1000}]},{"c":[{"v":"Date(2016,10,11,0,0,0)"},{"v":863},{"v":138},{"v":1000}]},{"c":[{"v":"Date(2016,10,12,0,0,0)"},{"v":863},{"v":138},{"v":1000}]},{"c":[{"v":"Date(2016,10,13,0,0,0)"},{"v":863},{"v":138},{"v":1000}]},{"c":[{"v":"Date(2016,10,14,0,0,0)"},{"v":863},{"v":138},{"v":1000}]},{"c":[{"v":"Date(2016,10,15,0,0,0)"},{"v":868},{"v":132},{"v":1000}]},{"c":[{"v":"Date(2016,10,16,0,0,0)"},{"v":868},{"v":132},{"v":1000}]},{"c":[{"v":"Date(2016,10,17,0,0,0)"},{"v":868},{"v":132},{"v":1000}]},{"c":[{"v":"Date(2016,10,18,0,0,0)"},{"v":868},{"v":132},{"v":1000}]},{"c":[{"v":"Date(2016,10,19,0,0,0)"},{"v":871},{"v":129},{"v":1000}]},{"c":[{"v":"Date(2016,10,20,0,0,0)"},{"v":872},{"v":128},{"v":1000}]},{"c":[{"v":"Date(2016,10,21,0,0,0)"},{"v":872},{"v":128},{"v":1000}]},{"c":[{"v":"Date(2016,10,22,0,0,0)"},{"v":872},{"v":128},{"v":1000}]},{"c":[{"v":"Date(2016,10,23,0,0,0)"},{"v":873},{"v":128},{"v":1000}]},{"c":[{"v":"Date(2016,10,24,0,0,0)"},{"v":874},{"v":127},{"v":1000}]}]}, 0.6);

                $this.options = {"title":"Trends for NEXT","width":600};

                $this.chart = new google.visualization.LineChart(document.getElementById("temps_div_next"));





                $this.chart.draw($this.data, $this.options);
            };

            lava.charts.LineChart["Tablespace_NEXT"].setData = function (data) {
                var $this = lava.charts.LineChart["Tablespace_NEXT"];

                $this.data = new google.visualization.DataTable(data, 0.6);
            };

            lava.charts.LineChart["Tablespace_NEXT"].redraw = function () {
                var $this = lava.charts.LineChart["Tablespace_NEXT"];

                $this.chart.draw($this.data, $this.options);
            };

            lava.registerChart("LineChart", "Tablespace_NEXT");

            google.load('visualization', '1', {
                packages: ['corechart'],
                callback: function() {
                    lava.charts.LineChart["Tablespace_NEXT"].render();
                }
            });
        });
</script>                               </div>
                                <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                        </div>
                        </div>
                </div>

a na modal odkazuji tlačítkem vygenerovaným takto:

          <td>
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_next">
Launch Trends modal</button>
                                              </td>

těchto tlačítek mám na stránce několik, každé odkazuje na jiný modal popup kód.

Problém je že v Modal popup boxu se mi ten graf nezobrazí. Asi to souvisí nějak s vykreslením toho javascriptu, ale nevím jak na to - nejsem v JS moc kovaný.

Neporadíte někdo co by se dalo udělat?
Díky předem za tipy.
Richard

Odpovědět
4.1.2017 15:23
Udělej to teď - možná nebudeš mít už čas to udělat později
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.