javascript - Chart JS display value of y Axes on mouse over chart with respect to X Axis -

-

in chart js chart shows value when mouse move on chart want display multiple chart value when mouse moves on point in chart.

that value y axis respect x axis position of mouse(obvious)

<!doctype html> <html>  <head>     <title>line chart</title>     <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.1.6/chart.bundle.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>     <style>     canvas{         -moz-user-select: none;         -webkit-user-select: none;         -ms-user-select: none;     }     </style> </head>  <body>     <div style="width:90%;">         <canvas id="canvas"></canvas>     </div>     <br>     <br>     <script>          var randomcolorfactor = function() {             return math.round(math.random() * 255);         };     var randomcolor = function(opacity) {         return 'rgba(' + randomcolorfactor() + ',' + randomcolorfactor() + ',' + randomcolorfactor() + ',' + (opacity || '.3') + ')';     };      var config = {         type: 'line',         data: {             labels: [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3],             datasets: [{                 label: "my first dataset",                 data: [12,13,14,15,21,16,15,25,16,12,15,23,16,12,13,14,15,21,16,15,25,16,12,15,23,16,12,13,14,15,21,16,15,25,16,12,15,23,16,12,13,14,15,21,16,15,25,16,12,15,23,16],                 fill: false,                 borderdash: [1, 1],             }]         },         options: {             responsive: true,             title:{                 display:true,                 text:'chart.js line chart'             },             tooltips: {                 mode: 'label',              },             hover: {                 mode: 'dataset'             },             scales: {                 xaxes: [{                     display: true,                     scalelabel: {                         show: true,                         labelstring: 'month'                     }                 }],                 yaxes: [{                     display: true,                     scalelabel: {                         show: true,                         labelstring: 'value'                     },                     ticks: {                         suggestedmin: -10,                         suggestedmax: 25,                     }                 }]             }         }     };      $.each(config.data.datasets, function(i, dataset) {     });      window.onload = function() {         var ctx = document.getelementbyid("canvas").getcontext("2d");         window.myline = new chart(ctx, config);     };          </script>

the chart getting looks my chart

what want this one

thanks in advance abhishek


Comments

Post a Comment

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more

delphi - Take screenshot in webcam using VFrames in Console Application -

-
i'm doing program take picture of webcam using delphi xe2 , vframes achieve this, problem have figured out, in graphic application works fine, when use unit in console application, returns me error saying first chance exception @ $76b6b727. exception class eaccessviolation message 'access violation @ address 004a271b in module 'console.exe'. read of address 00000260'. process console.exe (3676) my unit : unit webcam; interface uses sysutils, windows, vcl.imaging.jpeg, vcl.graphics, vsample, vframes, classes; type twebcam = class private procedure newvideoframeevent(sender: tobject; width, height: integer; dataptr: pointer); public constructor create; destructor destroy; override; procedure capture_webcam(take_name: string); end; var web_image: tvideoimage; name_screen: string; implementation constructor twebcam.create; begin inherited create; end; destructor twebcam.destroy; begin inherited destroy; end; ...
Read more