' ].join(''); } tooltipEl.html(innerHtml); tooltipEl.css({ opacity: 1, left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', fontFamily: tooltip.fontFamily, fontSize: tooltip.fontSize, fontStyle: tooltip.fontStyle, }); }; var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var lineChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }] }; window.onload = function() { var ctx1 = document.getElementById("chart1").getContext("2d"); window.myLine = new Chart(ctx1).Line(lineChartData, { showScale: false, pointDot : true, responsive: true }); var ctx2 = document.getElementById("chart2").getContext("2d"); window.myLine = new Chart(ctx2).Line(lineChartData, { responsive: true }); };