I'm trying to pull some time and temperature data into Amcharts. The data is regularly collected temperature data (every 10 minutes). The data displays but appears to be stacked on top of each other. See example image:
Example
The data format (from a php script) is:
[{"timestamp":"2015-10-26 04:44:33","temp":24.9,"ID":"AA"},{"timestamp":"2015-10-26 04:54:31","temp":25.1,"ID":"AA"},{"timestamp":"2015-10-26 05:04:30","temp":25.2,"ID":"AA"}.....
The script code I am using is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Indoor temperature</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/amstock.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js">
</script>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "/sensor-data.php?action=csv_data&id='AB'&period=24"
},
"pathToImages": "http://www.amcharts.com/lib/images/",
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:MM:SS",
"startDuration": 1,
"categoryAxis": {
"parseDates": true,
"autoGridCount": true,
"minPeriod" : "ss"
},
"graphs": [ {
"valueField": "temp",
"bullet": "round",
"bulletBorderColor": "#FFFFFF",
"bulletBorderThickness": 2,
"lineThickness ": 2,
"lineAlpha": 0.5
} ]
} );
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>
Can anybody point out what I am doing wrong to prevent the data from being displayed correctly?
So it turns out I had the dates not coming out of the PHP script as a date format AND I had the date being formatted wrong from a python script to the php to the javascript.
Thanks for looking at this.
Related
I have the below response on JMeter 5.2.1.
<!DOCTYPE html>
<html>
<head>
<script id="web.layout.odooscript" type="text/javascript">
var odoo = {
csrf_token: "123123..",
debug: "",
};
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<meta name="theme-color" content="#875A7B"/>
<script type="text/javascript">
xx.__session_info__ = {**"uid": 2,** "is_system": true, "is_admin": true, "user_context": {"lang": "en_US", "uid": 2}, "db": "test", "server_version_info": [1, 0, 0, "final", 0, "e"], "support_url": "https://www.test.com", "name": "admin", **"username": "admin"**, "partner_id": 1 };
</script>
<script type="text/javascript" ...></script>
<script type="text/javascript" ...></script>
</head>
<body class="o_web_client">
</body>
</html>
I want to retrieve the "uid" and "username" values and pass them to the next request as a variable dynamically(uid value is 2 and username is admin)
Kindly suggest how to retrieve these values.
In addition, the uid value is very small and it's too complicated to find and replace so kindly suggest how to replace the existing id with the newly found id.
I would suggest doing it in 2 steps:
Use Boundary Extractor to get the value of xx.__session_info__. Example configuration:
Use JSON Extractor to extract uid and name from the JMeter Variable generated by the Boundary Extractor:
End to end demo:
So I want to try to make a website that includes charts. I used chart.js for it. Now i try to make two charts so i copied the one i make before and changed its variable but it doesn't shown up on my html page. What i want to ask is, is it possible to make 2 charts using chart.js and I did it the wrong way or i only can make one chart? Thank you.
By the way, here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
You are using the same variable name for both of the charts that is massPopChart. You just need to change the variable name to massPopChart1 and massPopChart2.
Just check out the proper working here https://jsfiddle.net/4gdtujve/
I'm using AngularJs. I started to write simple controller that will output Hello world!
In my cribsControler.js code looked liked this:
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'hello world';
});
and it worked. Then I changed my code to display details that are shown in the example below.
app.js
angular.module('ngCribs', ['ui.bootstrap']);
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.cribs = [
{
"type": "condo",
"price": 22000,
"address": "nameOfStreet1",
"description": "description1"
},
{
"type": "hose",
"price": 54000,
"address": "nameOfStreet2",
"description": "description2"
},
{
"type": "cotage",
"price": 1000,
"address": "nameOfStreet3",
"description": "description3."
}
];
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<title></title>
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<pre>{{ cribs | json}}</pre>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</html>
When I edited, saved, and than ran it in a browser I got a blank page. When I clicked view page source and then when I clicked on my script link: <script src="scripts/cribsController.js"></script>, I can see that it didn't update from "Hello World" to the display details.
What can I do to actually update it? Or maybe there is error in my code?
I development phase you should have the development console up. Press f12 to open It. Somewhere in the console you will find a setting that says something like: clear cache whille console is open(depends on which browser you use). Browser cache JavaScript files by default
First of all, I have to say that is my first time posting on StackOverflow.. So if I post on the wrong area, sorry.
I'm beginning with angularjs, and I'm struggling into two points. 1st I've to create a connection with my mysql, witch i wasn't able until now.. 2nd I've to display the content into the HTML page.
I'm using the following code, witch includes the app.js, page.html and data.json (I'll change that later to php if I'm allowed to.)
The app.js seems to work fine, but the view (page.html) isn't display any data..
App.js
app.controller('PatientListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('patients.json').success(function (data) {
$scope.patients = data;
});
$scope.orderProp = 'id';
}]);
patients.json
[
{
"id": 0,
"first_name": "John",
"last_name": "Abruzzi"
},
{
"id": 1,
"first_name": "Peter",
"last_name": "Burk"
}
]
Page.html
<!DOCTYPE html>
<html class="no-js" ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
</head>
<body>
<div data-ng-repeat="patient in patients">
{{patient.id}}{{patient.last_name}}{{patient.first_name}}{{patient.SSN}}{{patient.DOB}}
<div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Thanks for your attention.
You have not define the controller in the view
<div ng-controller="PatientListCtrl" data-ng-repeat="patient in patients">
<li> {{patient.id}} </li>
<div>
Here is the working Fiddle
I have a NVD3 graph displaying simple data set. I just want to draw a line over that graph with a different color(it's like a cut-off value , that will be x=5)
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script src="js/angular.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="js/moment.js"></script>
<script src="../dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="stylesheets/nv.d3.css"/>
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
"key": "Github Api Mean Web Response Time",
"values": [[3,2],[4,6],[6,10],[2,6]]
}];
}
</script>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-line-chart
data="exampleData"
id="exampleId"
width="1000"
height="400"
showXAxis="true"
showYAxis="true"
margin="{left:50,top:50,bottom:50,right:50}"
>
<svg></svg>
</nvd3-line-chart>
</div>
</body>
Can anyone show me a way to add this vertical line to the graph I have now. It's better if we can add different color to that vertical line.
Note : this example I have is from here. It's lineChart.ticks.html
I found a way to do this like below.
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
"key": "Github Api Mean Web Response Time",
"values": [[3,2],[4,6],[6,10]]
},
{
"key": "aaa",
"values": [[5,0],[5,10]]
}];
}
</script>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-cumulative-line-chart
data="exampleData"
id="exampleId"
width="1000"
height="400"
showXAxis="true"
showYAxis="true"
margin="{left:50,top:50,bottom:50,right:50}"
>
<svg></svg>
</nvd3-cumulative-line-chart>
</div>
</body>