Making Plotly JS Choropleth Map dynamic - javascript

I am trying to make plotly JS Choropleth map dynamic based on selected year.
so far i have the following function to populate the drop down, and use the value of the drop down to put into a function to create a different visualization, therefore rendering it dynamic
function initannumdropdown() {
// Use D3 to select the dropdown menu
var dropdownMenu = d3.select("#select-year");
var annum = ["2011","2012","2013","2014","2015","2016","2017","2018","2019"];
dropdownMenu.html("");
//populate drop down menu
annum.forEach((name) => {
dropdownMenu
.append('option')
.text(name) // text showed in the menu
.property("value", name);
// console.log(name);
});
//get the graph to display the first participant's data when the page initially loads
// var uponLoadingpage = annum[0];
// console.log(uponLoadingpage);
// createBarcharts(uponLoadingpage);
chartEarth(annum[0]);
}
initannumdropdown();
function chartEarth(yearof) {
d3.json("https://world-internet-access.herokuapp.com/api/dashboard", function(err, rows) {
console.log(rows);
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var yearstr = `Internet_Use_Perc_${yearof}` ;
console.log(yearstr)
var data = [{
type: 'choropleth',
locationmode: 'country codes',
locations: unpack(rows, 'Abbr'),
z: unpack(rows, yearstr),
text: unpack(rows, 'Country'),
autocolorscale: false,
reversescale: true,
marker: {
line: {
color: 'rgb(0,191,255)',
width: 0.5
}
},
tick0: 0,
zmin: 0,
dtick: 1000,
colorbar: {
autotic: false,
tickprefix: '%',
title: '% Population of the Country Using Internet'
}
}];
var layout = {
title: '2019 World Internet Use',
geo: {
projection: {
type: 'orthographic'
}
}
};
Plotly.newPlot("myDiv", data, layout, {showLink: false});
});
};
//handle selected option
function optionChanged(newVariable) {
console.log(newVariable);
chartEarth(newVariable);
}
and in my index.html i have the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bellybutton Biodiversity</title>
<link rel="stylesheet" href="anime.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'></div>
<script src="app.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron text-center">
<h1 class="ml2">World Internet Access</h1>
<p>Use this interactive dashboard to explore the dataset</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="well">
<h5>Select Year</h5>
<select id="select-year" onchange="optionChanged(this.value)"></select>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Demographic Info</h3>
</div>
<div id="sample-metadata" class="panel-body"></div>
</div>
</div>
<div class="col-md-5">
<div id="bar"></div>
</div>
<div class="col-md-5">
<div id="gauge"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="bubble">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="app.js"></script>
<script src="anime.js"></script>
</body>
</html>
any help is appreciated thanks

Related

Google chart HTML page integration in my existing project not working

I have a google chart HTML page and it draws chart fine whenever I rut it individually.
the code of page is following
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Value IQ</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<script type='text/javascript'>
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
</script>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>
Now when I to put the content between and in particular of my existing project page, chart is not drawn and in encounter following error in chrome's console
VM410:7 Uncaught (in promise) TypeError: google.visualization.DataTable is not a constructor at drawElement3Dashboard (eval at (jquery-1.7.2.js:614), :7:13)
I already included
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
in my project.
JSfiddle link is here
Guys, what could be the cause of of this?

Could you add this to your code.
you can place the callback directly in the load statement and you can depend on the callback to know when the page is ready.
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});

Check this by separating javascript and html
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Value IQ</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>

jQuery not defined when using IIFE

I'm trying to implement a Livesearch list onto a page where it takes an array and its objects and by using the search box, will filter matches and only show match of the search term,
The issue I'm having is that when looping through the array items using a forEach and trying to append the results to the DOM,
jQuery is Not defined
Essentially the code should grab the array, loop through the array, grab the building names and append each to the .list DIV as h4 items.
//testItemsArray
//array will contain objects used in the mockup for a livesearch function on the map pages.
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
(function($) {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
}(jQuery));
<html lang="en">
<head>
<script src="./js/list.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

You should place this line of code before closing the body tag. Instead of using IIFE, use document.ready
In your code, you put your list.js before jquery.min.js, that's why you get jQuery is undefined error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
$(document).ready(function() {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
</html>

Put your js reference that is
<!-- listJS cdn link-->
<script src="./js/list.js"></script>
After Jquery library reference that is below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You should have a reference to your Jquery library.
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
Check here for references

Plot Historical Flot chart between two custom date range

I am trying to plot historical flot chart between two custom date range, user will select date range and based on selection I will retrieve data from my database and going to plot flot chart. Retrieving data from database based on selection is completed but plotting that data in flot chart is not resulting result. Below is my code I am trying to plot
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), [data], {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot Examples: Real-time updates</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), data, {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height:300px;"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>

Cycling through angular objects onclick

I'm trying to use jquery to hide the opacity of the first 3 products by clicking the left arrow and then I want the next 3 products to fade into view. I can get the first 3 to fade out without moving the arrows by hiding opacity. So when they are invisible the products will change and then I will fade into view the next 3 products.
I can't seem to figure out how to change out the first 3 images on click with the next 3 images. Can anyone help me with this?
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a></div>
<div class="bikesandtitles">
<div id="bikeTitle" class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
<div class="col-md-1" id="rightArrow"><a ng-href="#"><img ng-src="images/rightarrow.png" class="img-responsive"></a></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
bikeimageslider.js
$( document ).ready(function() {
$('#leftArrow').click(function (event) {
event.preventDefault();
$('.bikesandtitles').fadeTo(800, 0);
});
});
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
},
{
manufacturer: "Windsor",
image: 'images/bike6.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);

Fitting images all on the same row in grid

I'm using angularjs to output the bicycles in same row using ng-repeat.
I can't seem to get left arrow stay on the same row no matter how I mess with the col-3-md/col-4-md or whatever I set it too. It currently looks like the image attached.
How can It get it all on one line. I'm trying to build a carousel to cycle through the images.
index.html
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3" ng-repeat="product in products | limitTo:-4">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);

Categories