<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
$(document).ready(function(){
var receivedData = [];
var category = [];
var value = [];
var i;
var chart;
var data;
var options;
$("#firstDate,#secondDate").datepicker({
maxDate: 0
});
$("#chartButton").click(function(){
var processed_json = new Array();
var chart_data;
var x = new Object();
x.fromDate = $('#firstDate').val();
x.toDate = $('#secondDate').val();
var chart = JSON.stringify(x);
$.ajax({
url: 'http://localhost:4862/BillTracker/ControllerServlet/chart',
method: 'POST',
data: chart,
dataType: 'json',
success: function(data){
$.each(data.jsonArray, function(index) {
$.each(data.jsonArray[index], function(key, value) {
var point = [];
point.push(value);
receivedData.push(point);
})
}); //end of array
alert(receivedData);
alert(receivedData.length);
google.setOnLoadCallback(drawChart);
function drawchart(){
alert("load");
for(i=0;i<receivedData.length;i+=2){
var a = receivedData[i];
var b = receivedData[i+1];
value.push(b);
category.push(a);
}
alert(category[0]);
alert(value[0]);
var options = {
title: 'Expense View',
hAxis: {title: 'Category', titleTextStyle: {color: 'red'}},
vAxis: {title: 'Expense', titleTextStyle: {color: 'red'}}
};
data = new google.visualization.DataTable();
data.addColumn('string', 'category');
data.addColumn('number', 'value');
for(i = 0; i < category.length; i++){
data.addRow([category[i], value[i]]);
}
new google.visualization.BarChart(document.getElementById('chart_div')).
draw(data, options);
}
} //end of success func
}); // end of ajax call
}); //end of click function
});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div data-role="fieldcontain">
<label for="firstDate">Date</label>
<input type="text" name="firstDate" id="firstDate" placeholder="Date..." data-clear-btn="true">
</div>
<div data-role="fieldcontain">
<label for="secondDate">Date</label>
<input type="text" name="secondDate" id="secondDate" placeholder="Date..." data-clear-btn="true">
</div>
<div>
<input type="button" value="Save" id="chartButton" data-icon="check" data-iconpos="right" ></div>
<div id="container" style="width:400; height:300"></div>
</body>
</html>
I am new to the google visualization. I have got some value from the database through ajax call. The problem is google.setOnLoadCallBack is not calling. I think the function should be placed at different position I may be wrong too.
Anyone help.
Try moving around google.setOnLoadCallback(drawChart);, as you said yourself.
I would suggest putting it right below google.load("visualization", "1", {packages:["corechart"]});.
Related
I have a project made in angularjs. i need click the botton prueba and send one parameter to the phpfile to validate if its a number xxxx, return some information, if its other number, return other information.
I have to receive the number in the file php and code a if structure but I couldn't receive the parameter en the php file.
Here is my code
HTML
<!DOCTYPE html>
<html ng-app="AppUts">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta charset='utf-8'>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body ng-controller="EstudiantesController as estCtrl">
<input ng-model="info" class="form-control" id="identificacion" type="text" placeholder="Nro Identificación" />
<button ng-click="estCtrl.traer()" class="btn btn-success" id="boton">seguir</button>
<button ng-click="estCtrl.traer2()" class="btn btn-success" id="boton">prueba</button>
<div class="list-group">
<div id="destino_datos_estudiante">
</div>
<div class="list-group-item" id="jsones" ng-show="estCtrl.datos[0].isError">
nombre de estudiante
<h3>{{estCtrl.datos[0].nombreEstudiante}}</h3>
programa
<h3>{{estCtrl.datos[0].nombrePrograma}}</h3>
</div>
</div>
</body>
</html>
JS
(function() {
var app = angular.module('AppUts', []);
app.controller('EstudiantesController', ['$http', function($http){
var estudiante = this;
estudiante.datos = [];
estudiante.traer = function(){
$http.get("datos_estudiante.php").success(function(data){
estudiante.datos = data;
});
}
estudiante.traer2 = function(){
estudiante.jsonData = {num: 1, num: "manzana"}
$envio = $http({
url: "datos_estudiante.php",
method: "POST",
data: {val: 3}
}).success(function(){
console.log($envio);
});
}
}]);
})();
PHP
<?php
$data = file_get_contents("php://input");
$objData = json_decode($data);
$datosEstudiante[] = ["nombreEstudiante" => "Andres Mogollon",
"nombrePrograma" => "Tecnologia Desarrollo Sistemas Informaticos",
"progId" => 1,
"estudianteId" => 1,
"msg" => "vacio",
"isError" => true
];
echo json_encode($datosEstudiante);
?>
Thank you
i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
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 using TouchSwipe in my code. I have an #myimageflow div which contains 12 images and one div.
when I swipe I want only the images to swipe, the div should not move.
$("#myImageFlow").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == 'left') {
my.MouseWheel.handle(-1);
} else if (direction == 'right') {
my.MouseWheel.handle(1);
}
}
});
HTML code::
iSlider
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/iSlider.css" type="text/css" />
<!-- JS -->
<!--<script type="text/javascript" src="js/iSlider.js"></script> -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.1.js"></script>-->
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/rotate3Di.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript">
var imgArr = new Array();
var imgFront=new Array();
var i = 1;
var n=0;
var backimg=new Array();
var frontimg=new Array();
var clickEnabled = true;
$(document).ready(function () {
/* Reading the data from XML file*/
$.ajax({
type: "GET",
url: "photos.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var path = $(this).attr('path');
var width = $(this).attr('width');
var height = $(this).attr('height');
var id = $(this).attr('id');
var alt = $(this).attr('alt');
var longdesc = $(this).find('longdesc').text();
var description = $(this).find('desc').text();
$('#myImageFlow').append('<img src="'+path+'" id='+id+' height="'+height+'" width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
imgArr[i] = description;
imgFront[i]=longdesc;
backimg[i]=longdesc;
frontimg[i]=path;
i = i+1;
});
}
});
/* ===================================== */
//$("#myImageFlow").show();
$.getScript('js/iSlider.js');
$.getScript('js/code.photoswipe.jquery-3.0.5.js');
$.getScript('js/touchSwipe.js');
});
</head>
<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
<h1>iSlider</h1>
<div id="header">
</div>
<div id="container">
<div id="center" class="column">
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<div id="front">Initialy This is Front </div>
</div>
</div>
<div id="left" class="column">
</div>
<div id="right" class="column">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>