javascript - Add element to existing Canvas -

-

i have this canvas, using chartjs , make legend merge in graphic canvas.

see code:

var radarchartdata = {  		labels: ["item1", "item2", "item3", "item4"],            datasets: [  			{  				label: "linha1",  				fillcolor: "rgba(220,220,220,0)",  				strokecolor: "rgba(220,220,220,1)",  				pointcolor: "rgba(220,220,220,1)",  				pointstrokecolor: "#fff",  				pointhighlightfill: "#fff",  				pointhighlightstroke: "rgba(220,220,220,1)",  				data: [2,2,2,2]  			},  			{  				label: "linha2",  				fillcolor: "rgba(151,187,205,0)",  				strokecolor: "rgba(151,187,205,1)",  				pointcolor: "rgba(151,187,205,1)",  				pointstrokecolor: "#fff",  				pointhighlightfill: "#fff",  				pointhighlightstroke: "rgba(151,187,205,1)",  				data: [8,8,8,8]  			}  		]  	};    	window.myradar = new chart(document.getelementbyid("canvas").getcontext("2d")).radar(radarchartdata, {              responsive: true,          //scaleshowlabels : true,          animationsteps: 80,          animationeasing: "easeoutquart",          scaleoverride: true,          scalesteps: 10,          scalestepwidth: 1,          scalestartvalue: 0,          angleshowlineout : false,          scalelinecolor: "rgba(0, 0, 0, 1)",                    legendtemplate : '<% (var i=0; i<datasets.length; i++) { %>'                      +'<h3 style=\"color:<%=datasets[i].strokecolor%>\">.'                      +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'                  +'<% } %></h3>',                    //number - pixel width of angle line      anglelinewidth : 100,        //string - point label font declaration      pointlabelfontfamily : "arial",        //string - point label font weight      pointlabelfontstyle : "normal",        //number - point label font size in pixels      pointlabelfontsize : 20,        //string - point label font colour      pointlabelfontcolor : "black",           // string - template string single tooltips              tooltiptemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",              // string - template string multiple tooltips              multitooltiptemplate: "<%= datasetlabel %> : <%= value %>",          });    document.getelementbyid("legenddiv").innerhtml = window.myradar.generatelegend();
#canvas-container {          width: 100%;          text-align: center;      }        canvas {          display: inline;      }
<script src="http://www.chartjs.org/assets/chart.js"></script>  <div id="canvas-container">              <canvas id="canvas"></canvas>          </div>  <div id="legenddiv"></div>

i entering legend in div. there way insert canvas?
wish both graph legend part of single canvas.
me?

i managed solve problem in this fiddle.
generated new canvas html2canvas.
code:

$("#newcanvas").click(function () {      var $conteudo = $("#canvas-container");      html2canvas($conteudo[0], {          onrendered: function (canvas) {              $('#canvas-container').after(canvas);              var base64 = canvas.todataurl('image/jpeg');              console.log(base64);          },          logging: true      });  });    var radarchartdata = {  		labels: ["item1", "item2", "item3", "item4"],            datasets: [  			{  				label: "linha1",  				fillcolor: "rgba(220,220,220,0)",  				strokecolor: "rgba(220,220,220,1)",  				pointcolor: "rgba(220,220,220,1)",  				pointstrokecolor: "#fff",  				pointhighlightfill: "#fff",  				pointhighlightstroke: "rgba(220,220,220,1)",  				data: [2,2,2,2]  			},  			{  				label: "linha2",  				fillcolor: "rgba(151,187,205,0)",  				strokecolor: "rgba(151,187,205,1)",  				pointcolor: "rgba(151,187,205,1)",  				pointstrokecolor: "#fff",  				pointhighlightfill: "#fff",  				pointhighlightstroke: "rgba(151,187,205,1)",  				data: [8,8,8,8]  			}  		]  	};    	window.myradar = new chart(document.getelementbyid("canvas").getcontext("2d")).radar(radarchartdata, {              responsive: true,          //scaleshowlabels : true,          animationsteps: 80,          animationeasing: "easeoutquart",          scaleoverride: true,          scalesteps: 10,          scalestepwidth: 1,          scalestartvalue: 0,          angleshowlineout : false,          scalelinecolor: "rgba(0, 0, 0, 1)",                    legendtemplate : '<% (var i=0; i<datasets.length; i++) { %>'                      +'<h3 style=\"color:<%=datasets[i].strokecolor%>\">.'                      +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'                  +'<% } %></h3>',                    //number - pixel width of angle line      anglelinewidth : 100,        //string - point label font declaration      pointlabelfontfamily : "arial",        //string - point label font weight      pointlabelfontstyle : "normal",        //number - point label font size in pixels      pointlabelfontsize : 20,        //string - point label font colour      pointlabelfontcolor : "black",           // string - template string single tooltips              tooltiptemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",              // string - template string multiple tooltips              multitooltiptemplate: "<%= datasetlabel %> : <%= value %>",          });    document.getelementbyid("legenddiv").innerhtml = window.myradar.generatelegend();
#canvas-container {          width: 100%;          border: 2px solid #8ac007;          background-color: white;      }        canvas {          display: inline;          background-color: white;      }        #legenddiv {          text-align: left;      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>  <script src="http://www.chartjs.org/assets/chart.js"></script>  <div id="canvas-container">      <canvas id="canvas"></canvas>      <div id="legenddiv"></div>  </div>  <br/>  <input id="newcanvas" type="button" value="new canvas now!"></input>


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea
Read more

c# - two queries in same method -

-
i trying execute 2 queries in same method gives me exception. can red of exception declaring new command there way use same command? string id="hi"; connection.open(); oledbcommand command1 = new oledbcommand(); command1.connection = connection; string query1 = "select * products category='" + combobox1.text + "' , subcategory = '" + combobox2.text + "' , sizes='" + combobox3.text + "'"; command1.commandtext = query1; oledbdatareader reader = command1.executereader(); while (reader.read()) { id = reader[0].tostring(); } textbox1.text = id; string query = "insert category_in (category_id,amount,amount_in) values ('"+ id+"' ,500,300)"; command1.commandtext = query; command1.executenonquery(); messagebox.show("saved"); connection.close();
Read more