I'm using PHPChart for creating charts, now i want to have an option for exporting charts to pdf and images.
Bellow is my code:
<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/js/src/jquery.jqplot.css" />
<!--<link rel="stylesheet" type="text/css" href="/phpChart_Enterprise/examples/examples.css" />-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flot/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../explorercanvas/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="/phpChart_Enterprise/js/src/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="../../flashcanvas/src/flashcanvas.js"></script>
<![endif]-->
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.js"></script>
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasAxisTickRenderer.js"> </script>
<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/plugins/jqplot.canvasTextRenderer.js"></script>
<!--<script language="javascript" type="text/javascript" src="/phpChart_Enterprise/js/src/canvasHack2.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
if (!$.jqplot.use_excanvas) {
$('div.jqplot-target').each(function(){
// Add a view image button
var btn = $(document.createElement('button'));
btn.text('View as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotViewImage();
});
$(this).after(btn);
// add a save image button
btn = $(document.createElement('button'));
btn.text('Save as PNG');
btn.bind('click', {chart: $(this)}, function(evt) {
evt.data.chart.jqplotSaveImage();
});
$(this).after(btn);
btn = null;
});
}
$('#stackChart1').CanvasHack();
});
</script>
But when i click on generated buttons Save as PNG and View AS PNG browser goes to loading and down.
For any help and guid thanks.
Did you check out the image export example? It's all done in Javascript.
http://phpchart.com/phpChart/examples/export_image.php
Not sure about PDF export, but I believe it would require some server side script. See example below.
https://phpchart.uservoice.com/knowledgebase/articles/443666-how-to-export-my-chart-on-the-server-side-in-php
Related
It doesn't show output <option>. It shows only the select with no element inside. I'm using bootstrap-select library. What's the problem?
$(function () {
$('select').selectpicker();
});
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/timeline.css">
<!-- ICONE -->
<script src="https://kit.fontawesome.com/6b765b0f40.js" crossorigin="anonymous"></script>
<!-- SELECT WITH SEARCH BAR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
You don't have any problem: It's working here:
Try to set the function like this (inside script tag):
<script type="text/javascript">
$(function () {
$('select').selectpicker();
});
</script>
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 installed the plugin layeredpopups. But it does not work for me
I’ve tested the plugin on other sites, but it does not work on my site!
My site: artawp.com
Is js,jquery a problem?
Now I have the following js
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
tag head :
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title><?php wp_title(''); ?></title>
<!-- Bootstrap CSS -->
<?php wp_head(); ?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Before closing body
This code is located in the footer
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
</body>
Ok, I've searched google and all over this site and am not finding the solution.
I have a php file with a button. I have all the included bootstrap/jquery-ui css files at the top and the corresponding .js files at the bottom. I also have a custom .js file that has ONE function which defines a custom dialog box. When I try to call it from the php file I get:
ReferenceError: $myDialog is not defined.
The included js file is called dialog.js and IS in the js folder.
Here are the php and js files:
$(function() {
/**
* $myDialog Custom Dialog Function
*
* Example Usage:
* var theTitle = "CUSTOM TITLE GOES HERE!";
* var msg = 'Your message goes here...';
* $myDialog.dialog("option", "title", theTitle);
* $myDialog.html(msg + '</div>');
* $myDialog.dialog('open');
*
* Filename: dialog.js
**/
var $myDialog = $('<div id="dialog-message">')
.dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
width: 400,
dialogClass: 'dialog-message ui-dialog-osx',
title: "Important Message!",
autoOpen: false,
show: 'fade',
hide: 'fade',
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}
],
});
});
<?php
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<title>Rental Application</title>
<!-- CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/html5reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/drwebguy.css" media="all" />
</head>
<body>
<div id="home" class="container-fluid main_content">
<div class="row">
<div class="col-md-4"><a id="btnMyDialog" class="btn btn-primary" role="button">myDialog</a></div>
<div class="col-md-4">
<p>This is just some text...</p>
</div>
<div class="col-md-4"></div>
</div><!-- row -->
</div><!-- class="container-fluid" -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/js.cookie.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<!--<script type="text/javascript" src="js/drwebguy.js">--></script>
<script type="text/javascript">
$(function() {
$('#btnMyDialog').on('click', function(){
var theTitle = "CUSTOM TITLE GOES HERE!";
var msg = 'Your message goes here...';
$myDialog.dialog("option", "title", theTitle);
$myDialog.html(msg + '</div>');
$myDialog.dialog('open');
});
});
</script>
</body>
</html>
And, obviously, if I put that var function at the bottom of my file instead of including an external js file it works fine...but, also obviously, that defeats the purpose of oop :/
use all script like this :
(function($) {
$(document).ready(function(){
// .. script what you want
});
})(jQuery);
I am very inexperienced with PHP and I've having trouble calling a mootools function.
Here's my code:
echo '<script language="JavaScript">';
echo "Sexy.error('Test!');";
echo '</script>';
When viewing source code looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bath Solutions</title>
<link xmlns="" href="html_includes/css/main.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<link xmlns="" href="html_includes/mootools/Autocompleter.css?version=10.03.05" rel="stylesheet" type="text/css" media="screen" />
<link xmlns="" href="html_includes/css/print.css?version=10.03.05" rel="stylesheet" type="text/css" media="print" /><link xmlns="" href="html_includes/css/schedule.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="html_includes/mootools.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/main.js.php?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/datepicker.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Observer.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.Request.js?version=10.03.05"></script>
<script type="text/javascript" src="html_includes/mootools/sexyalert/sexyalertbox.v1.2.moo.js?version=10.03.05"></script>
<link rel="stylesheet" type="text/css" media="all" href="html_includes/mootools/sexyalert/sexyalertbox.css?version=10.03.05"/>
<script type="text/javascript" src="html_includes/fckeditor/fckeditor.js?version=10.03.05"></script>
</head>
<body>
<script language="JavaScript">Sexy.error('Test!');</script>
...
When I try it with a simple alert('test') it works just fine.. I'm confused?!?
UPDATE: I tried a calling the Sexy.error() onClick in an anchor tag and it works fine:
click to test
wrap the call into a domready
<script type="text/javascript">
window.addEvent("domready", function() {
Sexy.error('test');
});
</script>
if the class depends on any part of the dom, like <div id='sexy'></div> being 'there', it won't work as is--at the time of running of the script block, the target div won't be available for DOM manipulations yet.
You haven't specified your version of mootools, but according to this there is not error method. Try changing your code to:
echo '<script language="JavaScript">';
echo "Sexy.alert('Test!');";
echo '</script>';
instead.
and remember to add this to your html too:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.moo.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>
You have to learn how to use FireBug - will help you greatly in such cases.