I am using jqPlot to plot some data including dates and another user data identifier. I have it plotted correctly with this code (I'd post an image but I don't have the reputation yet!):
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var line1=<?php echo $jqPlotArray;?>;
var plot2 = $.jqplot('line_chart', [line1], {
axes:{
xaxis:{
renderer:$.jqplot.dateAxisRenderer,
tickOptions:{formatString:'%b %y'}
}
},
series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}]
});
});
</script>
But when I try to format BOTH the axis labels to WHITE and a 9pt font it plots incorrectly with this code (Again, I'd post an image but can't yet):
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var line1=<?php echo $jqPlotArray;?>;
var plot2 = $.jqplot('line_chart', [line1], {
axes:{
xaxis:{
renderer:$.jqplot.dateAxisRenderer,
renderer:$.jqplot.categoryAxisRenderer,
tickOptions:{formatString:'%b %y', textColor:'#FFFFFF', fontSize:'9pt'}
}
},
series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}]
});
});
</script>
In summary, my question is what renderers do I need and how to use them to simply format the x & y axis labels to a white font color (so the labels pop off my green background better) and also change the fontSize to 9pt.
Any help will be much appreciated.
Thanks
If your xaxis has dates, why are you trying to use the categoryAxisRenderer too?
I think the main problem is a missed capital letter:
renderer:$.jqplot.DateAxisRenderer //The D is Date is a capital
See fiddle here.
Related
I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
/////////////////////////////////CDN/////////////////////////////////////
<script src="https://kit.fontawesome.com/d6743b0f97.js" crossorigin="anonymous"></script>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
<link href="dist/css/tabulator.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modules/format.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>
This is what I am getting in my body: https://i.imgur.com/sC6og2Q.png
Nothing
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
On a separate note you are including a lot of files you dont need to, if you are including tabulator.js then you dont need to include any other files, as it bundles them all up.
If you are going to use tabulator_core.js then you only need to include it or the minified version once
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
How to pass the PHP value $sources to the value of progress bar? I am trying to add into session in the below code but fail. Any easy way to get the $sources? Please help.
......
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var score = '<%= session.getAttribute("sources") %>';
$( "#progressbar" ).progressbar({
value: score
});
});
</script>
</head>
<body>
<?php
session_start();
$sources=10;
......
echo '<td>Your answer was correct </td></tr>';
$sources+=1;
......
$_SESSION['sources']=$sources;
?>
<div id="progressbar"></div>
</body>
</html>
session_start() should be at the top of the page. after starting
then $_SESSION['sources'] should be set before calling it. otherwise you should check for it's value before printing to web page.
find below codes and rearrange your script.
<?php
session_start();
?>
......
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var score = <? echo (isset($_SESSION['sources'])) ? $_SESSION['sources'] : ""; ?>;
$( "#progressbar" ).progressbar({
value: score
});
});
</script>
</head>
<body>
<?php
$sources=10;
......
echo '<td>Your answer was correct </td></tr>';
$sources+=1;
......
$_SESSION['sources']=$sources;
?>
<div id="progressbar"></div>
</body>
</html>
var score = '<%= session.getAttribute("sources") %>';
The <%= %> is java syntax for scriplets ,
additionally it's wrapped in quotes so it is treated as a string literal from javascript.
Below is the syntactically right way (I don't know if you'll get the right value. That
depends on your program structure).
var sources = <?php echo $_SESSION['sources']; ?>;
This seems like a fairly simple question, but I've been searching through google and can't find a solution.
function showJQueryAlert() {
echo '<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert("INSERT MESSAGE HERE!", 120, false); }); </script>';
outputs the popup with the message "INSERT MESSAGE HERE!". But
function showJQueryAlert($message) {
echo '<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert('.$message.', 120, false); }); </script>';
where $message is "INSERT MESSAGE HERE!", fails to output the popup. I've tried all sorts of combinations. So what am I missing?
Looks like you forgot some quotes:
JQueryAlert("'.$message.'", 120, false);
<div id="banner">
<script type="text/javascript" src="gallery/js/jquery.js"></script>
<script type="text/javascript" src="gallery/js/swfobject.js"></script>
<script type="text/javascript" src="gallery/js/flashgallery.js"></script>
<script type="text/javascript">
jQuery.flashgallery('gallery/gallery.swf', 'gallery/config.xml',{ width:'100%', height:'100%', background: 'transparent'});
</script>
</div>
Can somebody help me to resize image in div tag it is displayed using jquery.flassgallery from last one day I am trying for this please if anybody gives me mail I will mail the code
try:
http://api.jquery.com/resize/
$(window).resize(function() {
$('#banner').width(/* do somthing */).height(/* do something */);
});