I'm a new employee at a company and also new to php and jqplot. :$
I'm trying to create a simple graph using jqplot.
I followed all the instructions at http://www.jqplot.com/tests/line-charts.php
but nothing is displayed in my div :(
can someone help?
I think the problem might that its not loading the jqplot files :,(
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Capacity Report</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../../jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css"/>
<link rel="stylesheet" href="../../../css/style.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../../../jqplot/jquery.jqplot.css"/>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.js"></script>
<script type="text/javascript" src="../../../jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../../../jqplot/plugins/jqplot.trendline.js"></script>
</head>
<body>
<div id="chartdiv" style="height:400px;width:300px; ">graph1</div>
<div id="chart1" style="height:400px;width:300px; ">graph2</div>
</body>
</html>
<script> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
Hello everyone i solved my error!
the problem was in the file path! after many hours of playing around i realized i was trying to open jqplot file with a wrong path!!! :P
hope this will help someone else with the same problem
this is my final working code 100% bullet proof :)
<html>
<head>
<title>Working plots functions</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jqplot/jquery.jqplot.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
$(document).ready(function(){
console.log("It works!!!");
var plot1 = $.jqplot ('chart2', [[3,7,9,1,5,6,8,2,5]]);
});
</script>
Here is the start of the page...<br>
<div id="chart1" style="height:400px;width:300px;">graph1</div>
<div id="chart2" style="height:400px;width:300px;">graph2</div>
</body>
</html>
Related
I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
I'm using the following javascript code to help me draw an output screen in a .erb file which doesn't render properly. The canvas tag is unhelpful.
There is no output screen. The linking is proper and I am able to get output "hello" when I add a testing line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming++! Build Your Own Blocks</title>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript" src="blocks.js"></script>
<script type="text/javascript" src="threads.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="lists.js"></script>
<script type="text/javascript" src="byob.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(document.getElementById('world'));
world.worldCanvas.focus();
new IDE_Morph().openIn(world);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
}
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" style="position: absolute;" />
</body>
</html>
Any help please ?
any ideas how to change the chart proportions relative to its parent chart div?
Currently it looks like this
... and it should look something like this
The code used as a base for this example can be found here
http://support.softwarefx.com/jChartFX/article/2501235#27182674-0690-e211-84a5-0019b9e6b500
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customized Tooltips</title>
<link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
<link rel="stylesheet" type="text/css" href="sample.css"/>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
</body>
</html>
var chart1;
function onLoadDoc() {
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAnimations().getLoad().setEnabled(true);
var pie = chart1.getGalleryAttributes();
pie.setExplodingMode(cfx.ExplodingMode.First);
chart1.getView3D().setEnabled(true);
chart1.getLegendBox().setVisible(true);
//...
}
You can use the margin properties:
chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);
im trying to call
.bind("click")
from an external .js file (js1.js).
here is the code:
js1.js:
$(function() {
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
page.html:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
</head>
<body>
<p>Click me!</p>
</body>
this code does not work in my files.
i found it from w3scools and it is working in their site:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
how can i make it running from my external .js? any ideas?
thanks.
By the looks of it, you haven't added jQuery on your page yet. Add jQuery prior to your script.
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
If you forget to add this line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
so add it in your <head> </head> section first. Otherwise your script could not work.
Bellow the complete code which working for me..
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#p').bind('click', function(){
alert('The paragraph was clicked.');
});
});
</script>
<style>
#p{cursor:pointer;}
</style>
</head>
<body>
<p id="p">Click me!</p>
</body>
</html>
Hi
I have created a web app that uses ical. When I run it locally it works like a charm. However when I upload it to my server via ftp so as to test it online the ical script doesn't show up.
My safari inspector gives me an error--->
TypeError: Result of expression '$('#any_id').getCalendar' [undefined] is not a function.
This is my code:
<style type="text/css" media="screen">#import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">#import "themes/artspot/theme.css";</style>
<style type="text/css" media="screen">#import "jqt.calendar.css";</style>
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.calendar/jqt.calendar.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">#import "../../extensions/jqt.listIndex/jqt.listIndex.css";</style>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({});
$(function() {
$('#any_id').getCalendar();
});
</script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Calendar</h1>
</div>
<div id="any_id">
<ul>
<li><time datetime="2011-01-26T14:30Z">210 mg/dl</time></li>
<li><time datetime="2011-01-26T14:30Z">100 mg/dl</time></li>
</ul>
</div>
</div>
</div>
</body>
my problematic web app is --->web app ical
Error: $("#any_id").getCalendar is not a function
Source File: http://webstore.web44.net/
Line: 20
You are loading everything twice
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>