javascript - chart.js renders outside div and canvas -


my charts rendering correctly, overlapping on same spot , change between depending on mouseover (both graphs in same position though canvas , div elements not). here images show div , canvas locations:

canvas 1 canvas 2

i not familiar css used tutorial snippets temporary layout before begin change style , colours, need on positioning these elements correctly.

here html code:

<div id="awp" class="tabcontent">     <div class="dropdown">         <button onclick="dropmenu(1)" class="dropbtn">choose dates</button>         <div id="mydropdown1" class="dropdown-content">             <a id="2016" onclick="adddata(mychart, 'check' , 2)">last 3 months</a>             <a id="5m" onclick="removedata(mychart)">test 3</a>             <a id="testnew">bye bye</a>             <a id = "2015" onclick="addmoredata(mychart)">does</a>         </div>     </div>     <h3>recreated in chart.js first graphs</h3>  <div class="contain1"> <canvas id="results-graph" class="cyo" width="600" height="500"></canvas> </div>  <div class="contain2"> <canvas id="results-graph2" class="oem" width="600" height="500"></canvas> </div>

here css:

.dropdown {     position: relative;     display: inline-block; }  .dropdown-content {     display: none;     position: absolute;     background-color: #f9f9f9;     min-width: 160px;     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);     z-index: 1; }  .dropdown-content {     color: black;     padding: 12px 16px;     text-decoration: none;     display: block; }  .dropdown-content a:hover {background-color: #f1f1f1}  .show {display:block;}   .contain1 {     width: 600px;     height: 500px;     float: left;     overflow: auto; }  .contain2 {     width: 600px;     height: 500px;     float: right;     overflow: auto; }  .cyo {     display: block; width: 600px;     height: 500px; }  .oem {     display: block; width: 600px;     height: 500px; }

here chart code:

<script> var data = [12, 19, 13, 5, 21, 13];  var ctx = document.getelementbyid("results-graph");   var mychart = new chart(ctx, {     type: 'bar',     data: {         labels: ["red", "red" , "yellow", "green", "purple", "orange"],         datasets: [ {             label: 'average watch sell price in usd',             data: data,             type: 'line',             yaxisid: 'b',             fill: false,             backgroundcolor: ['rgba(0,0,0,1)'],             bordercolor: ['rgba(0,0,0,1)']         },          {             label: 'amount of watches sold',             data: data,             yaxisid: 'a',             backgroundcolor: [                 '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)'             ],             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: {         responsive: true,         maintainaspectratio: false,         scales: {              yaxes: [{                 id: 'a',                 type: 'linear',                 position: 'left',                  ticks: {                      beginatzero:true                  },                  scalelabel:{                     display: true,                     labelstring: 'amount sold',                  }               }, {                 id: 'b',                 type: 'linear',                 position: 'right',                  ticks: {                     beginatzero:true                 },                 scalelabel:{                     display: true,                     labelstring: 'average price in usd',                  }             }]         }     } });   </script> <script> var data2 = [12, 19, 13, 5, 21, 13]; var ctx2 = document.getelementbyid("results-graph");  var mychart2 = new chart(ctx2, {     type: 'bar',     data: {         labels: ["red", "red" , "yellow", "green", "purple", "orange"],         datasets: [ {             label: 'average watch sell price in usd',             data: data2,             type: 'line',             yaxisid: 'b',             fill: false,             backgroundcolor: ['rgba(0,0,0,1)'],             bordercolor: ['rgba(0,0,0,1)']         },          {             label: 'amount of watches sold',             data: data2,             yaxisid: 'a',             backgroundcolor: [                 '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)'             ],             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: {         responsive: true,         maintainaspectratio: false,         scales: {              yaxes: [{                 id: 'a',                 type: 'linear',                 position: 'left',                  ticks: {                      beginatzero:true                  },                  scalelabel:{                     display: true,                     labelstring: 'amount sold',                  }               }, {                 id: 'b',                 type: 'linear',                 position: 'right',                  ticks: {                     beginatzero:true                 },                 scalelabel:{                     display: true,                     labelstring: 'average price in usd',                  }             }]         }     } });</script>

you did not change why second graph did not generate.

var ctx2 = document.getelementbyid("results-graph2");

also can provide background , border this.

            backgroundcolor: ['rgba(0,0,0,1)'],             bordercolor: ['rgba(0,0,0,1)']

jsfiddle: here


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more