Google chart HTML page integration in my existing project not working - javascript

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>

Related

Making Plotly JS Choropleth Map dynamic

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

Can't Get Packery Library To Work (Uncaught TypeError: $(...).packery is not a function)

I have installed both draggabilly and packery with npm and also included a direct link to each in both my charts.php file and c_head.php (which is loaded on all pages) but I keep getting an error message . . . Uncaught TypeError: $(...).packery is not a function. I have tried also with the vanilla JS code (new Packery() instead of .packery) but this simply gives the error that Packery() is not defined. Any suggestions?
https://packery.metafizzy.co/draggable.html
(js code from here gives ".packery is not a function" error)
https://codepen.io/desandro/pen/aGvIq
(js code from here gives "Packery not defined" error)
https://codepen.io/desandro/pen/ciAdD
c_head.php
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Factor Viewer"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!--
nlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- <link class='responsive_css'
<link rel='stylesheet' type='text/css' media='only screen and (min-width:737px) and (max-width:880px)' href='css/screen_layout_medium.css'/>
<link rel='stylesheet' type='text/css' media='only screen and (min-width:50px) and (max-width:736px)' href='css/screen_layout_small.css'/>
<link rel='stylesheet' type='text/css' media='only screen and (max-height:440px)' href='css/screen_layout_small.css'/>
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href='css/style.css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript' src='js/scripts.js'></script>
<script src="https://unpkg.com/draggabilly#2/dist/draggabilly.pkgd.min.js"></script>
<script src="https://unpkg.com/packery#2/dist/packery.pkgd.min.js"></script>
charts.php
<?php
include_once("c_session.php");
include_once("c_connection.php");
//echo "HERE" . "\n";
//echo $connection->host_info . "</br>\n";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<?php include_once("c_head.php"); ?>
<!--All page specific code goes below this line -->
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="https://unpkg.com/draggabilly#2/dist/draggabilly.pkgd.min.js"></script>
<script src="https://unpkg.com/packery#2/dist/packery.pkgd.min.js"></script>
</head>
<?php
// start check if queries are needed
// if ($_SESSION['didQueries']) {
// $doQueries = 0;
// echo "NO queries";
// } else {
// $doQueries = 1;
// $_SESSION['didQueries'] = true;
// echo "need queries";
// }
// session_destroy();
// end check if queries are needed
?>
<body>
<div id="page">
<?php include_once("c_navigation.php"); ?>
<?php
// start query 1: get 6 sets of prices
if ($doQueries) {
$sqlPriceData = "SELECT lid, `date`, price from fv_price where lid in (412, 413, 1247, 5001, 531, 5002) order by lid, `date`;";
$resPriceData = $connection->query($sqlPriceData);
while ($row = mysqli_fetch_array($resPriceData)) {
$priceData[] = $row;
}
$_SESSION['$FundPriceData'] = $priceData;
} else {
$priceData = $_SESSION['$FundPriceData'];
} // end if
// initialize php arrays to populate and use for chart
$dates = array_column($priceData, 'date');
$Prices = array_column($priceData, 'price');
// arrays used for chart must be reversed and json_encoded
$chart_dates = json_encode(array_reverse($dates));
$chart_Prices = json_encode(array_reverse($Prices));
?>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>
<div id="charts_div" class="border"> <!-- start charts div -->
<div id="chart1" class="border draggable mini_chart"> <!-- start chart1 -->
</div> <!-- end chart1 -->
<div id="chart2" class="border draggable mini_chart"> <!-- start chart2 -->
</div> <!-- end chart2 -->
<div id="chart3" class="border draggable mini_chart"> <!-- start chart3 -->
</div> <!-- end chart3 -->
<div id="chart4" class="border draggable mini_chart"> <!-- start chart4 -->
</div> <!-- end chart4 -->
<div id="chart5" class="border draggable mini_chart"> <!-- start chart5 -->
</div> <!-- end chart5 -->
<div id="chart6" class="border draggable mini_chart"> <!-- start chart6 -->
</div> <!-- end chart6 -->
</div> <!-- end charts div -->
<!-- start call drawChart functions -->
<script>
drawChart('chart1', 'Fund', '<?= $code ?>', '<?= $lid ?>', <?= $chart_dates ?>, <?= $chart_Prices ?>)
</script> <!-- end call drawChart functions -->
</div> <!-- page -->
</body>
</html>
scripts.js
//********** START DRAGGABLE SCRIPTS **********
//#region
// https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/
// this plain jQuery works for dragging elements
// $( function() {
// $( ".draggable" ).draggable({ containment: "#charts_div" });
// } );
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem );
// bind drag events to Packery
$grid.packery( 'bindDraggabillyEvents', draggie );
});
//#endregion
//********** END DRAGGABLE SCRIPTS **********

parseTime and functions in D3 have errors

I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html
You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki

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