I try run justgage example using asp net, but i get error: "No element with id: gauge found ". ID is correct, so what is wrong.
<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gauge" class="200x160px"></div>
</form>
</body>
</html>
We ran into the same issue. The problem is that the script is being executed before the page is loaded. There are two possible solutions to that:
1.) Put the script below the <div>
...
<body>
<form id="form1" runat="server">
<div id="gauge" class="200x160px"></div>
</form>
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>
</body>
2.) Tell the script to load after the window finished loading using window.onload
<script src="/js/justgage.1.0.1.min.js"></script>
<script src="/js/raphael.2.1.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
window.onload= function(){
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
};
</script>
</head>
...
Either should do the trick.
Related
I have a jqplot bar chart and I am trying to get when i click the from bar chart i want one alert statement which contains tick label name and series name.i tried to get but i failed .Please help me..
The below code giving present or absent when click the bar. I want along with tick label name also like a,present.
enter code here
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="te/jquery.jqplot.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.json2.js"></script>
<link rel="stylesheet" type="text/css" href="te/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="te/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.json2.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.cursor.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="te/plugins/jqplot.dateAxisRenderer.js"></script>
<script>
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var ticks = ['a', 'b', 'c', 'd'];
plot2 = $.jqplot('chart2', [s1, s2], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
legend: {
show: true,
location: 'e',
//marginTop : "1620px",
placement: 'outside'
} ,
series:[{label:'Present'}, {label:'Absent'} ],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
});
$('#chart2').bind('jqplotClick', function(ev, seriesIndex, pointIndex, data,plot) {
alert('Plot Label: '+plot2.series[data.seriesIndex].label);
});
});
</script>
</head>
<body>
<div id="chart2" style="height:400px;width:95%; "></div>
<p id='info2'></p>
</body>
</html>
I'm trying to apply both a table class and columns styling properties to a DataTable. However, none of the attributes actually do something.
I have written // doesn't do anything where something doesn't seem to work like I want it to.
The table data is added dynamically shortly after the table is created.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="example" ></table>');
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
Try adding 'https' in the begenning of these two links and then execute the code.
1- link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"
2- script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"
Try the below Solution, Load Contents from CDN correctly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$("#demo").html("<table cellpadding='0' cellspacing='0' border='0' class='stripe' id='example'></table>");
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
The example usage of countdown of gieson as below. It is ok.
<body>
<script src="countdown.js" type="text/javascript"></script>
<script type="application/javascript">
var myCountdown2 = new Countdown({time: 30000, width:200, height:80, rangeHi:"hour"});
</script>
</body>
I would like to start countdown when button onclick. But it not ok.
<body>
<script src="countdown.js" type="text/javascript"></script>
<script type="application/javascript">
var myCountdown2;
function startCount() {
myCountdown2 = new Countdown({time: 30000, width:200, height:80, rangeHi:"hour"});
}
</script>
<input type="button" value="start" onclick="startCount();"/>
</body>
How can I solve it? I don't have javascript experience.
Error :
Error in parsing value for 'size'. Declaration dropped.
Try to save myCountDown2 in global scope.
I tested it and it works fine
<body style="background-color:#EDEDED">
<p onClick="return countIt();">Example 1 - Time until April 1, 2016</p>
<!-- START COUNTDOWN -->
<script src="countdown.js" type="text/javascript"></script>
<script type="application/javascript">
function countIt(){
var myCountdownTest = new Countdown({
time: 30000, width:200, height:80, rangeHi:"hour"
});
}
</script>
I am using jqplot i want following answer.when i drag points then automatically change graph.any one have solution????
i want display only two points
But i get following output
this is my code anyone having solution
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<style>
#chart1{
margin-top:5em;
margin-left:1.5em;
}
</style>
</head>
<body>
<div class="example-plot" id="chart1"></div>
<div id="d1"></div>
<div id="d2"></div>
<script type="text/javascript">
var chartNumberTicks=8;
var s1;
$(document).ready(function () {
s1 = [['2014',1000000],['2015', 968526],['2016', 933905],['2017',895822],['2018', 853930],['2019', 807849],['2020', 757161],['2021', 701403],['2022', 640069],['2023', 572603],['2024', 498389],['2025',416754],['2026',326956],['2027',228178],['2028',119522],['2029',0]];
plotpoints();
$('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data) {
s1 = [['2014-02-04',900000],['2015-01-02', 858526],['2016-01-03', 833905],['2017-01-04',795822],['2018-01-01', 753930],['2019-01-02', 607849],['2020-01-03', 557161],['2021-01-04', 501403],['2022-01-01', 440069],['2023-01-02', 372603],['2024-01-03', 358389],['2025-01-03',316754],['2026-01-03',229996],['2027-01-03',208178],['2028-01-03',108178],['2029-01-03',0]];
plotpoints();
}
);
});
function plotpoints(){
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart1',[s1],{
title: '',
axes: {enter code here
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
numberTicks:chartNumberTicks
},
yaxis: {
tickOptions: {
formatString: '%d'
}, tickInterval: 100000,max:1200000,min:-100000
}
}
});
}
</script>
</body>
</html>
I am successful in showing data graphically using flot charts API. I have built around 30 bar charts and now i am showing them all in one page and displaying the graph based on the value selected in the dropdown list. I am able to get the graphs individually but when all the graphs put together in one page , I am getting the above error i am not able to crack this.Please help me in this regard.
<select id="zones" name="zones" onchange="getgraph()">
<option value="overall">Overall</option>
<option value="sea">SEA</option>
<option value="india">INDIA</option>
<option value="nea">NEA</option>
<option value="pz">PZ</option>
</select>
<a onClick="change()" href="#">Click Here</a>
<div id="one">
<?php include "barchart.php";?>
</div>
<div id="two" style="display:none">
<?php include "barchart1.php";?>
</div>
JavaScript
function change()
{alert("hi");
document.getElementById('two').style.display='block';
document.getElementById('one').style.display='none';
}
barchart.php
<?php
/* Your Database Name */
$dbname = 'finalCMS';
/* Your Database User Name and Passowrd */
$username = 'root';
$password = 'password1!';
try {
/* Establish the database connection */
$conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result = $conn->query("SELECT `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory`");
$rows = array();
foreach($result as $r) {
$rows[] = array( $r['EquipmentMainCatagory'],(int)$r['count(`EquipmentMainCatagory`)']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
//print_r($jsonTable);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
//mysql_close($conn);
$conn=null;
?>
<div id="placeholder" style="width:900px;height:450px;"></div>
<script type="text/javascript">
//******* 2012 Average Temperature - BAR CHART
var data =<?php echo $jsonTable;?>;
//alert(data);
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push([i,data[i][0]]);
data[i][0] = i;
}
//alert(ticks);
//var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
var dataset = [{ data: data, color: "#5482FF" }];
//var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];
var options = {
series: {
lineWidth: 5,
bars: {
show: true,
barWidth: 0.5,
align:"center"
}
},
xaxis: {
axisLabel: "EquipmentMainCatagory",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
//rotateTicks:90
labelAngle: 90
},
yaxis: {
axisLabel: "# Assets",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
},
grid: {
hoverable: true,
borderWidth: 0,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
//jQuery(document).ready(function() {
function plot1(){
$.plot($("#placeholder"), dataset, options);
$("#placeholder").UseTooltip();
}
// });
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
// "<strong>" + y + "</strong>");
item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y ,
left: x,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
</script>
<Script>plot1()</Script>
my javascript order
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
<!--[if lt IE 9]>
<script src="assets/plugins/excanvas.min.js"></script>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS tree -->
<script src="assets/plugins/bootstrap-tree/bootstrap-tree/js/bootstrap-tree.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS tree-->
<script src="assets/scripts/ui-tree.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN PAGE LEVEL PLUGINS view assets -->
<script type="text/javascript" src="assets/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/plugins/data-tables/DT_bootstrap.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- page level plugins for edit page-->
<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="assets/plugins/moment.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-editable/inputs-ext/address/address.js"></script>
<!-- just -->
<script type="text/javascript" src="assets/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script>
<script type="text/javascript" src="assets/plugins/chosen-bootstrap/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>
<script type="text/javascript" src="assets/plugins/clockface/js/clockface.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/date.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-multi-select/js/jquery.multi-select.js"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript" ></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript" ></script>
<script src="assets/plugins/jquery.pwstrength.bootstrap/src/pwstrength.js" type="text/javascript" ></script>
<script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript" ></script>
<script src="assets/plugins/jquery-tags-input/jquery.tagsinput.min.js" type="text/javascript" ></script>
<!--page level plugin for edit page ends here-->
<script src="assets/scripts/app.js"></script>
<script src="js/index_js.js"></script>
<!-- for notifications -->
<script src="js/ournotification.js"></script>
<!-- <script src="js/filterdashboard.js"></script>-->
<script src="js/viewpage_js.js"></script>
<script src="js/allvalidate.js"></script>
<script src="js/uprofile.js"></script>
<script src="js/custom.js"></script>
<!--<script src="js/rightclick.js"></script>
<script src="js/f12.js"></script>-->
<!-- for jqplot graphs -->
<!--<script src="js/jqplot.js"> </script>
<script src="assets/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/graphs.css">-->
<!-- end of jqplot graphs js -->
<!-- <script src="js/filter_assets.js"></script>-->
<!--<script src="js/filter_view.js"></script>-->
<script src="assets/plugins/bootstrap-tag/js/bootstrap-tag.js" type="text/javascript" ></script>
<script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript" ></script>
<script src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript" ></script>
<!-- BEGIN:File Upload Plugin JS files-->
<script src="assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="assets/plugins/jquery-file-upload/js/vendor/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload file processing plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-fp.js"></script>
<!-- The File Upload user interface plugin -->
<script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script><![endif]-->
<!-- END:File Upload Plugin JS files-->
<!-- END PAGE LEVEL PLUGINS -->
<script src="assets/scripts/inbox.js"></script>
<script src="assets/scripts/table-managed.js"></script>
<script src="assets/scripts/form-components.js"></script>
<script src="assets/scripts/jquery.colorbox.js"></script>
<script src="js/inbox_related.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.labelangle.min.js"></script>
TL;DR
Make sure there is only one version of jQuery on your page
I'll bet any money that you're including more than one version of jQuery on your page. To be more specific, it probably looks (at minimum) like this:
<script src="some.jquery.version.js"></script>
<script src="flotcharts.js"></script>
...
...
...
<script src="some.jquery.version.js"></script>
Now, the flotcharts API has been attached to the prototype (or fn) of the first jQuery script on the page, but unfortunately, the second jQuery version has it's own prototype (or fn) and renders flotcharts inaccessible when it overwrites the first jQuery prototype.