How to add jqplot to custom Joomla (3.3) component?
Question
Before I started with Joomla I developed a html page that uses jqplot, and that pages worked/works fine.
Now I want to include jqplot in a custom joomla (3.3) component that I'm developing, but when calling the component (by means of main menu item) no chart is shown.
UPDATE DEFAULT.PHP (JOOMLA) CODE FURTHER TO COMMENT:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();
//add jqplot libraries
JHtml::_('jquery.framework');
$document->addScript(JPATH_ROOT.'/media/system/js/jquery.jqplot.min.js');
$document->addStyleSheet(JPATH_ROOT.'/media/system/js/jquery.jqplot.min.css');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.barRenderer.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.categoryAxisRenderer.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.pointLabels.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.enhancedLegendRenderer.js');
$document->addScript(JPATH_ROOT.'/media/system/js/weqlib.js');
?>
<head>
<script type="text/javascript">
jQuery(document).ready(function(){
var plot1 = jQuery.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); //copied from example at http://www.jqplot.com/tests/line-charts.php
}); //$(document).ready
</script>
</head>
<!--<h1><?php echo $this->msg; ?></h1>-->
<h1>Prosumer Dashboard </h1>
<div id="chart1" style="width:600px; height:250px;"> </div>
I think the way I call the libabries is wrong (I know for sure the jqplot function call is ok, as I also copied this from my old html file).
Any idea what I'm doing wrong and how to fix this?
1 answers
solution1
0 2014-06-22 14:36:14
You should add javascript to the head of the page in the following way...
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
Your script currently will be attempting to load the javascript in relation to the page's URL, not in relation to your component's URL, so it will not be finding them.
Also, Joomla 3 comes with JQuery - load it like this (possibly in your template rather than your component)...
JHtml::_('jquery.framework');
Note that this runs in no conflict mode, so you have to replace any '$' in your jquery scripts with the 'jQuery'. You can also make it run in conflict mode...
JHtml::_('jquery.framework', false);
However, this may cause problems if your site has any other libraries running.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.