ř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">×</span></button>
<h4 class="modal-title" id="myModalLabel_next">Trends Chart forNEXT</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 existsif (! document.getElementById("temps_div_next")) {
thrownew 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:
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
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.