javascript - add value to Line chart.js -
i work chartjs show line chart. now, need add together title/value each value mouse on in line charts.
js:
var info = { labels: ["february", "march", "april", "may", "june", "july"], datasets: [{ fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,1)", data: [ 59, 90, 81, 56, 55, 40] }, { fillcolor: "rgba(151,187,205,0.5)", strokecolor: "rgba(151,187,205,1)", data: [ 48, 40, 59, -100, 127, 100] }] } var options = {animation :true}; //get context of canvas element want select var c = $('#daily-chart'); var ct = c.get(0).getcontext('2d'); var ctx = document.getelementbyid("daily-chart").getcontext("2d"); /*************************************************************************/ //run function when window resizes $(window).resize(respondcanvas); function respondcanvas() { c.attr('width', jquery("#daily").width()); c.attr('height', jquery("#daily").height()); //call function redraw other content (texts, images etc) mynewchart = new chart(ct).line(data, options); } //initial phone call respondcanvas(); how can add together title/value each value/month?
demo: jsfiddle
if utilize latest version of chart.js there new update allow show tooltip value/title. http://www.chartjs.org/docs/
there several options custom tooltip on mouseover
// boolean - determines whether draw tooltips on canvas or not showtooltips: true, // array - array of string names attach tooltip events tooltipevents: ["mousemove", "touchstart", "touchmove"], // string - tooltip background colour tooltipfillcolor: "rgba(0,0,0,0.8)", // string - tooltip label font declaration scale label tooltipfontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif", // number - tooltip label font size in pixels tooltipfontsize: 14, // string - tooltip font weight style tooltipfontstyle: "normal", // string - tooltip label font colour tooltipfontcolor: "#fff", // string - tooltip title font declaration scale label tooltiptitlefontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif", // number - tooltip title font size in pixels tooltiptitlefontsize: 14, // string - tooltip title font weight style tooltiptitlefontstyle: "bold", // string - tooltip title font colour tooltiptitlefontcolor: "#fff", // number - pixel width of padding around tooltip text tooltipypadding: 6, // number - pixel width of padding around tooltip text tooltipxpadding: 6, // number - size of caret on tooltip tooltipcaretsize: 8, // number - pixel radius of tooltip border tooltipcornerradius: 6, // number - pixel offset point x tooltip border tooltipxoffset: 10, // string - template string single tooltips tooltiptemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", javascript jquery chart.js
No comments:
Post a Comment