multiple charts

[renalpha]

When using multiple charts on a single page an error will be thrown up.

Uncaught TypeError: Cannot set property 'data' of undefined.

(when removing one of the charts, the chart does work)

[renalpha]

There may be conflicts with the line below.

$this.data = new google.visualization.DataTable

[renalpha]

fixed it

'; /** * Closing javascript tag. * * @var string */ private $jsC = '</script>'; /** * Javscript block with a link to Google's Chart API. * * @var string */ private $jsAPI = '<script type="text/javascript" src="//google.com/jsapi"></script>'; /** * Google's DataTable Version * * @var string */ private $googleDataTableVer = '0.6'; /** * Checks the Chart for DataTable and builds the Javascript code block * * Build the script block for the actual chart and passes it back to * output function of the calling chart object. If there are any * events defined, they will be automatically be attached to the chart and * pulled from the callbacks folder. * * @access public * * @uses Chart * @param Chart $chart Chart object to render. * @param string $elementId HTML element id to output the chart into. * @throws DataTableNotFound * @throws InvalidElementId * * @return string Javascript code block. */ public function getChartJs(Chart $chart, $elementId = null) { if (isset($chart->datatable) && h::isDataTable($chart->datatable)) { $this->chart = $chart; } else { throw new DataTableNotFound($chart); } if (h::nonEmptyString($elementId)) { $this->elementId = $elementId; } else { throw new InvalidElementId($elementId); } return $this->buildChartJs(); } /** * Builds the Javascript code block * * Build the script block for the chart. If there are any events defined, * they will be automatically be attached to the chart and * pulled from the callbacks folder. * * @access private * * @return string Javascript code block. */ private function buildChartJs() { $uniqueid = $this->getrandid(); $out = $this->jsAPI; $out .= $this->jsO; $out .= <<jsC; $out .= $this->jsO; //Creating new chart js object $out .= sprintf( 'lava'.$uniqueid.'.charts.%s = {"%s":{chart:null,draw:null,data:null,options:null,formats:[]}};', $this->chart->type, $this->chart->label ).PHP_EOL.PHP_EOL; ``` //Checking if output div exists $out .= sprintf( "if (!document.getElementById('%s'))" . "{console.error('[Lavaharts] No matching element was found with ID \"%s\"');}", $this->elementId, $this->elementId ).PHP_EOL.PHP_EOL; $out .= sprintf( "lava$uniqueid.charts.%s.%s.draw = function() {", $this->chart->type, $this->chart->label ).PHP_EOL; $out .= sprintf( 'var $this = lava'.$uniqueid.'.charts.%s.%s;', $this->chart->type, $this->chart->label ).PHP_EOL.PHP_EOL; $out .= sprintf( '$this.data = new google.visualization.DataTable(%s, %s);', $this->chart->datatable->toJson(), $this->googleDataTableVer ).PHP_EOL.PHP_EOL; $out .= sprintf( '$this.options = %s;', $this->chart->optionsToJson() ).PHP_EOL.PHP_EOL; $out .= sprintf( '$this.chart = new google.visualization.%s', ($this->chart->type == 'DonutChart' ? 'PieChart' : $this->chart->type) ); $out .= sprintf("(document.getElementById('%s'));", $this->elementId).PHP_EOL.PHP_EOL; if ($this->chart->datatable->hasFormats()) { $out .= $this->buildFormatters(); } $out .= '$this.chart.draw($this.data, $this.options);'.PHP_EOL; if ($this->chart->hasEvents()) { $out .= $this->buildEventCallbacks(); } $out .= "};".PHP_EOL.PHP_EOL; switch ($this->chart->type) { case 'AnnotatedTimeLine': $vizType = 'annotatedtimeline'; break; case 'GeoChart': $vizType = 'geochart'; break; default: $vizType = 'corechart'; break; } $out .= sprintf( "google.load('visualization', '1', {'packages':['%s']});", $vizType ).PHP_EOL; $out .= sprintf( "google.setOnLoadCallback(lava$uniqueid.charts.%s.%s.draw);", $this->chart->type, $this->chart->label ).PHP_EOL; $out .= sprintf( "lava$uniqueid.register('%s', '%s');", $this->chart->type, $this->chart->label ).PHP_EOL; if (self::DEBUG) { $out .='console.debug(lava);'; } $out .= $this->jsC.PHP_EOL; return $out; } /** * Builds the javascript object of event callbacks. * * @access private * * @return string Javascript code block. */ private function buildEventCallbacks() { $out = ''; foreach ($this->chart->getEvents() as $event) { $cb = sprintf( 'function (event) { return lava.event(event, $this.chart, %s); }', $event->callback ); $out .= sprintf( 'google.visualization.events.addListener($this.chart, "%s", %s);', $event::TYPE, $cb ).PHP_EOL.PHP_EOL; } return $out; } /** * Builds the javascript for the datatable column formatters. * * @access private * * @return string Javascript code block. */ private function buildFormatters() { $out = ''; foreach ($this->chart->datatable->getFormats() as $index => $format) { $out .= sprintf( '$this.formats["col%s"] = new google.visualization.%s(%s);', $index, $format::TYPE, $format->toJson() ).PHP_EOL; $out .= sprintf( '$this.formats["col%s"].format($this.data, %s);', $index, $index ).PHP_EOL.PHP_EOL; } return $out; } /** * True if the lava object and jsapi have been added to the page. * * @access private * * @return bool */ public function coreJsRendered($stat = false) { if ($stat === false) { return $this->coreJsRendered; } else { return $this->coreJsRendered = $stat; } } /** * Builds the javascript lava object for chart interation. * * @access public * * @return string Javascript code block. */ public function getCoreJs() { $uniqueid = $this->getrandid(); $out = ''; return $out; } public function getrandid(){ return rand(5000,6000000); } ``` } //{prefix: '$', negativeColor: 'red', negativeParens: true}

[kevinkhill]

Can you create a gist for me so I can run your code and see what was going on?
During my tests I had 3 charts on one page no problem.

The lava JS core object isn't intended to be random, it's intended to be a unified holder of all the chart data.

[kevinkhill]

I'm closing this issue because in my testing of multiple charts on one page, I do not get any errors