my json file looks like
{"items":[
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"},
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"},
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"},
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"},
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"}
]}
and my script is
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<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>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
alert('Document ready');
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]");
});
alert( 'Fetched ' + objArrayData.length + ' items!');
console.log('object Data ' + objArrayData);
objArray = ("[" + objArrayData + "]");
console.log('object Array' + objArray);
var plot = $.jqplot('chartCanvas', [objArray], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%#m/%y'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
I am getting uncaught exception- No data error
Before plotting the chart, I am printing the array and there are all the values that I need.
What is missing? Where am I doing wrong?
Thanks for your help.
I don't understand why you are feeding data to the objArrayData array in the way you are doing here. The data doesn't become an array just because there are square brackets surrounding them (it will only appear pretty and satisfying and confusing in the cosole.log).
Use array.push() instead of the way you are doing it here.
And also make sure you make the data.scoreAverage a number before parsing it to the array.
You can do it using parseFloat() function.
So finally you can feed the data to the array like this.
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
Here's the modified working code.
<!DOCTYPE html>
<html>
<head>
<title>Date Axes</title>
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
</head>
<body>
<h2>
Some Statistics</h2>
<div id="chartCanvas" style="height: 400px; width: 1000px; align">
</div>
<br />
<script type="text/javascript">
$(function(){
$(document).ready(function(){
var objArrayData=[];
var objArray = [];
$.getJSON("data.json",function(data){
$.each(data.items, function(i,data){
objArrayData.push([data.date,parseFloat(data.scoreAverage)]);
});
console.log('object Data ' + objArrayData);
var plot = $.jqplot('chartCanvas', [objArrayData], {
title:'Rubric Average Scores',
gridPadding:{right:35},
axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%Y-%m-%d'},
//tickOptions:{formatString:'%b-%y'},
min:'March 30, 2012',
tickInterval:'1 month',
angle: -30,
}},
yaxis:{label:'Average Score',
},
series:[{lineWidth:3, markerOptions:{style:'square'}}]
});
});
});
return false;
});
</script>
</body>
</html>
Hope this helps.
PS: Make sure you learn about arrays a little more.
Related
I am trying to learn how to use an API in Laravel and show json results in my view. This is a sample code I have made but nothing is showing. The API is with values because when I try it in Postman, it returns json results.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>${activity.text}</strong>${text.body}' +
'</li>'
});
});
}
});
</script>
</body>
</html>
I suspect it might have a problem with the key tags i am trying to call. I am trying to make the call from blade not needed from the controller.
json returned from the API:
{
"activity": "Write a list of things you are grateful for",
"type": "relaxation",
"participants": 1,
"price": 0,
"link": "",
"key": "2062010",
"accessibility": 0
}
Here is the completed code.
<html>
<head>
<meta charset="utf-8">
<title>Item Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul id="items" class="list-group">
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
getItems();
var output = '';
function getItems(){
$.ajax({
url:'https://www.boredapi.com/api/activity'
}).done(function (items){
let output = '';
$.each(items, function (key, activity){
output += '<li class="list-group-item">' +
'<strong>'+key+'</strong>' + activity +
'</li>'
});
$("#items").append(output);
});
}
});
</script>
</body>
</html>
try adding this:
$.ajax({
url:'https://www.boredapi.com/api/activity',
type: "GET",
},
Also console.log() your result might be helpful.
this is my code and csv file.
The c3js chart is not displaying properly when I have a date field in a CSV file. I have set the x axis as type timeseries. There are only two columns in CSV file. "Data" and "count",
html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
url: 'dates.csv'
}
});
</script>
</body>
</html>
data,count
120,80
140,50
170,100
150,70
180,120
<html>
<head>
<link rel="stylesheet" type="text/css" href="c3.css">
</head>
<body>
<div id="chart"></div>
<script src="d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'Date',
x_Format: '%Y-%m-%d',
url: 'dates.csv',
},
axis: {
x: {
type: 'timeseries',
}
}
});
</script>
</body>
</html>
this code is working now..
I have a kendo date picker in which only months are shown.Now i want to disable previous months of current month to disable so user will not be able to enter previous month.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="date"></div>
<script>
$(document).ready(function () {
var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date()); //This code line will hide previous date from date picker
});
</script>
</body>
</html>
Update 1:
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<style>
.disabledDay {
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor: default;
opacity: 0.5;
}
</style>
</head>
<body>
<input id="datepicker" style="width: 150px;" />
<script>
disabledDaysBefore = [
+new Date("10/20/2015")
];
$(document).ready(function () {
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
change: onChange,
month: {
content: '# if (data.date < data.dates) { #' +
'<div class="disabledDay">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
open: function (e) {
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
},
}).data("kendoDatePicker");
});
function onChange() {
var tillDate = new Date(disabledDaysBefore[0]);
var selectedDate = new Date(kendo.toString(this.value(), 'd'));
if (tillDate > selectedDate) {
tillDate = tillDate + parseInt(1);
$("#datepicker").data("kendoDatePicker").value(tillDate);
}
}
</script>
</body>
</html>
Let me know if any concern.
You can use the disableDates property and specify a function to check the date is before the current date, roughly along these lines:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "MMMM yyyy",
disableDates: function (date) {
var currentDate = new Date();
if (date.getFullYear() <= currentDate.getFullYear() && date.getMonth() < currentDate.getMonth()) {
return true;
} else {
return false;
}
}
});
I would like to combine the two JavaScript libraries/frameworks/scripts scriptaculous.js and validationEngine.jquery but I don’t have a clue how to do it.
My code is like this:
<head>
...
// auto complete
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
// validation
<script type="text/javascript" src="query-1.9.1.js"></script>
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-de.js"></script>
// auto complete
<script type="text/javascript">
Event.observe(window, 'load', function() {
new Ajax.Autocompleter('architect', 'suggestion', ‚'ArchitectQuery.php', {minChars: 3});
});
</script>
// validation
<script type="text/javascript">
$(document).ready(function(){
$("#form-validation").validationEngine();
});
</script>
...
</head>
<body>
...
<input type="text" name="architect" size="45" maxlength="100" id="architect" data-validation-engine="validate[required, minSize[3]]" />
<div id="suggestion"></div>
...
</body>
I guess I have to somehow add the ‚Event.observe‘ part to the validationEngine - but how?
Thanks
Kashuda
First of all, you have to use $.noConflict();, because prototypejs use also $.
<script type="text/javascript">
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#form-validation").validationEngine();
});
Domus71
I am facing some issues with the formatting of the y-axis with jqplot. The labels of the y-axis go behind the chart. I tried already a lot of things (adapting the css file but nothing really helped). I hope you can help me.
My html and java script code:
<html>
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.json2.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="./js/jquery.jqplot.css"/>
<script type="text/javascript">
$(document).ready(function(){
var sineRenderer = function() {
var data = [[]];
var jsonData = $.ajax({
url: "http://127.0.0.1/beaglemeter/getData.php",
dataType:"json",
async: false
}).responseText;
data = JSON.parse(jsonData);
return [data]; //brackets have to be added in order to fulfill the required data format
};
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $.jqplot('chart_div',[],{
title: 'BeagleMeter',
gridPadding:{left:75,right:25,top:35,bottom:35},
axes:{
xaxis:{
label:'Date/Time',
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{angle: -40, fontFamily: 'Arial', fontSize: '11pt',labelPosition:'middle'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis:{
label:'Power in W',
tickOptions:{fontFamily: 'Arial', fontSize: '11pt'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
cursor:{
show:true,
zoom:true,
showTooltip:false
},
dataRenderer: sineRenderer,
series:[{lineWidth:2, showMarker:false}]
});
});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<center>
<div id="chart_div" style="height:400px;width:80%"></div>
</center>
</body>
</html>
This is how it looks:
https://drive.google.com/file/d/0B6Nf7EU4lCsNLThESGJXVEZjQjA/edit?usp=sharing
Thanks,
Christoph
I figured it out (actually by a coincidence;-). The code line referring to the css file has a typo: hrf instead of href. Here the correct one:
<link rel="stylesheet" type="text/css" href="./js/jquery.jqplot.css"/>
Additionally I added here the getData.php file so someone else could recycle the code as a full working example:
<?php
header('Content-Type: application/json');
date_default_timezone_set('Europe/Berlin');
$channel = $_GET["channel"];
$period = $_GET["period"];
$begin = $_GET["begin"];
$beginUTS = strtotime($begin);
$endUTS = $beginUTS + 86400;
if ($db = new SQLite3('NameOfDatabaseFile')) {
$result = $db->query("SELECT * FROM 'table' LIMIT 0, 10000");
$rows = array();
while($row = $result->fetchArray(SQLITE3_ASSOC)) {
//$rows[] = array($row['timestamp'], $row['value']);
$rows[] = array(date("Y-m-d H:i", $row['timestamp']), $row['value']);
//date("H:i:s - m.d.y", $timestamp));
//$rows[] = $row;
}
} else {
die($sqliteerror);
}
print json_encode($rows);
?>