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>
Related
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'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.
I'm working on a fairly complex form using Google Apps Script HtmlService and jquery. I'm trying to use the autocomplete feature from jquery, and its working somewhat. If I start typing in "ja", then using the down arrow key it will scroll through results. However what it should be doing is displaying them in a list dynamically like it does locally. There is an error in the console, but don't know what to make of it:
Error 4089105213-maestro_htmlapp_bin_maestro_htmlapp.js:55
pl 4089105213-maestro_htmlapp_bin_maestro_htmlapp.js:55
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</div><!-- End demo -->
</body>
</html>
If you load the Jquery resources (Javascript and CSS files) using HTTPS instead of HTTP it works inside google apps scripts.
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>