Hello experts, I am basically trying to render (using React JS, HTML5 and Jquery) a screen/view that shows two buttons (slideRight and slideLeft) in a div that will float to the right side; when I click slide right a panel is to be made and then it should slide right to to about half the width of the browser and then render 6 graphs (I then will add code in order to speed up the rendering of the graphs later according to the user's computer specs. I am using Chart Js for the graph code and I have installed Chart Js and Jquery on my Node Js npm. I have my code for my files below. I need help to make it work and display. I want to use this with MapBox API later so the left half of the browser will have the panel with data and graphs and the right half will have a map from MapBox (if you know how Google maps has the map on the right and the details of the directions on the left panel, that is the kind of think I am looking for to do later). But for now I need this issue solved; thank you.
Code below
--Index.js--
--Index.html--
--Index.css--
--Main.js--
slideLeft.js
slideRight.js
Code below
--Index.js--
Code:
import React from 'react';
import './index.css';
const Play =(
<div>
<div class="one"><canvas id="bar1"></canvas></div>
<div class="two"><canvas id="line1"></canvas></div>
<div class="three"><canvas id="pie1"></canvas></div>
<div class="four"><canvas id="donut1"></canvas></div>
<div class="five"><canvas id="scatter1"></canvas></div>
<div class="six"><canvas id="radar1"></canvas></div>
<script src="C:\Users\PMbanugo\Desktop\my-app\node_modules\chart.js\dist"></script>
<script>
var ctx1 = document.getElementById("bar1").getContext('2d');
var myChart1 = new Chart(ctx1,{
{type:'bar'},
{data:{
labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets:[{
label: '# of Marbles Selected',
data:[4,12,8,5,1,2],
backgroundColor:[
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor:['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'],
borderWidth: 1
}]
}
},
{options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
}
}
}
});
var ctx2 = document.getElementById("line1").getContext('2d');
var myChart2 = new Chart(ctx2,{
{type:'line'},
{data:{
labels:['January','February','March','April','May','June'],
datasets:[{
data:[11, 19, 25, 37, 45, 56]
}]
}
},
{options:{
scales:{
xAxes:[{
ticks:{
min: 'March'
}
}]
}
}
}
});
var ctx3 = document.getElementById("pie1").getContext('2d');
var myChart3 = new Chart(ctx3,{
{type:'pie'},
{data:{
labels:['Red','Green','Blue'],
datasets:[{
data:[30,60,10]
}],
}
}
});
var ctx4 = document.getElementById("donut1").getContext('2d');
var myChart4 = new Chart(ctx4,{
{type:'doughnut'},
{data:{
labels:['Orange','Yellow','Green'],
datasets:[{
data:[260,45,20]}]
}
},
{options:{
animateRotate:true
}
}
});
var ctx5 = document.getElementById("scatter1").getContext('2d');
var myChart5 = new Chart(ctx5,{
{type:'scatter'},
{data:{
datasets:[{
label:'Scatter datapile',
data:[{
x:-10,
y:0
}, {
x:0,
y:15
}, {
x:10,
y:11
},{
x:20,
y:17
}]
}]
}
},
{options:{
scales:{
xAxes:[{
type:'linear',
position:'bottom'}]
}
}
}
});
var ctx6= document.getElementById("radar1").getContext("2d");
var myChart6 = new Chart(ctx6,{
{type:'radar'},
{data: {
labels:['Programming','Drinking','Sleeping','Eating','Running'],
datasets:[{
data: [44,33,14,50,25]
}]
}
},
{options:{
scale:{
angleLines:{
display:false
},
ticks:{
suggestedMin:10,
suggestedMax:100
}
}
}
}
});
</script>
</div>
);//Play
export default Play;--Index.html--
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="slideRight.js"></script>
<script type="text/javascript" src="slideLeft.js"></script>
<title>React App</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div class="app"></div>
<div id="rootButton"><input type="button" id="btn1" onclick="slideRight()" value="show"/><input type="button" id="btn2" onclick="slideLeft()"/> </div>
//for the button
</body>
</html>--Index.css--
Code:
*{
box-sizing:border-box;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
html, body{
height:100%;
}
.one{
height:16.67%;
}
.two{
height:16.67%;
}
.three{
height:16.67%;
}
.four{
height:16.67%;
}
.five{
height:16.67%;
}
.six{
height:16.67%;
}
canvas{
position:relative;
}
#rootButton{
float:right;
width:40px;
height:20px;
}
#btn1{
float:inherit;
width:40px;
height:10px;
border: 1px solid black;
}
#btn2{
float:inherit;
width:40px;
height:10px;
border: 1px solid black;
}--Main.js--
Code:
import ReactDOM from 'react-dom';
import Play from './components/index.js';
class App extends React.Component{
render(){
return(
<Play/>
);
}
}
const mainNode = document.getElementById("app");
ReactDOM.render(<App/>, mainNode);slideLeft.js
Code:
function slideLeft(){
$document.ready(function(){
$("#btn2").click(function(){
$(".app").hide("slide",{direction:"left"}, 1500);
});//click
});//documentReady
}//functionslideRight.js
Code:
function slideRight(){
$document.ready(function(){
$("#btn1").click(function(){
$(".app").show("slide", {direction:"right", width:50%, height: 100%, margin-top: 0px, margin-bottom: 0px, margin-left: 0px, display:flex,background-color:orange, flex-direction:column}, 1500);
});//click
});//documentReady
}//function