My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help

Discussion in 'Javascript' started by MBANS8A1, Dec 9, 2019.

  1. MBANS8A1

    MBANS8A1

    Joined:
    Dec 9, 2019
    Messages:
    1
    Likes Received:
    0
    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--

    Code (Text):
    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 (Text):
    <!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 (Text):
    *{
    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 (Text):
    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 (Text):
    function slideLeft(){
     $document.ready(function(){
      $("#btn2").click(function(){
        $(".app").hide("slide",{direction:"left"}, 1500);
           });//click
        });//documentReady
     }//function

    slideRight.js

    Code (Text):
    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
     
    MBANS8A1, Dec 9, 2019
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.