search

krzysu / flot.tooltip

tooltip plugin for wonderful Flot plotting library
https://github.com/krzysu/flot.tooltip
187 stars 153 forks source link

FlotCarts + ToolTips plugins unable to put in one single series #143

Closed seniDEac closed 8 years ago

seniDEac commented 8 years ago

I have this project that needs FlotGraphics (and tooltips), and I just can't figure it out, how to adjust its to my code, because as a newbee trying o study all of this, just get pour information from the friend google.

My graph is in real time, mimetizing one EGC, (a heart beat). My question is in 3 parts:

  1. how to put this "tooltips" only in the "flag Series getRandomData3()"?
  2. how to always show this "tooltips"(getRandomData3())? (not only when the mouse is over, but all the time)?
  3. how to get personalized "labels" with for exemple "on/off" button or "-/+" button or more "flag button "?

I realy apreciate any help ou tips. Thanks

here is my example, which I am working on:

<style>
    .graph001{
        position:absolute; 
        left:410px; 
        top:380px;'
    }
    .data001 {
        position:absolute; 
        width:350px; 
        height:225px;
        top:380px; 
        left: 50px;
        float:right; 
        border:solid 1px green;
        padding:0px;' 
        margin:0px; 
    }
</style>

　<meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.flot.js"></script>
    <!--
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.flot.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
    -->
    <script language="javascript" type="text/javascript" src="./assets/js/jquery.flot.tooltip.js"></script>
    <link rel="stylesheet" href="./assets/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="./assets/css/bootstrap.css">
 </meta>    

<body>

<div id="frame01"  class="frame01" >

        <div  id="graph001"  class="graph001" >
            <div id="placeholder" class="demo-placeholder"       style='height:230px;     width: 800px;' >
            </div >

            <button onclick="analysis()"      class="btn btn-success" style='position:absolute; left:700px; top:226px; backgroundd:#01DF01; colorr:white'>    <!-- i class="fa fa-forward"></i -->  analysis </button>
        </div>

        <div   id="data001"  class="data001" >
                <div>

                <button onclick="speedo04()" class="btn btn-success"    style='position:absolute; left:10px; top:140px; backgroundd:#01DF01; '>    <!--i class="fa fa-play"></i --> On</button>
                <button onclick="speedo02()" class="btn btn-danger"     style='position:absolute; left:10px; top:100px; backgroundd:#01DF01; '>    <!-- i class="fa fa-pause"></i -->   Off </button>

                <button onclick="flag01()"   class="btn btn-warning"    style='position:absolute; left:155px; top:10px; backgroundd:#01DF01; '>   flag </button>

                <button onclick="speedo01()" class="btn btn-warning"    style='position:absolute; left:155px; top:100px; backgroundd:#01DF01; '>   - </button>
                <button onclick="speedo03()" class="btn btn-warning"    style='position:absolute; left:155px; top:140px; backgroundd:#01DF01; '>   + </button>
                <p id="text01" class="text01" style='position:absolute; left:155px; top:180px; backgroundd:#01DF01;'>Speed <br>[cm/s]<p>

                </div>
        </div>
</div>      

    <!-- analysis screen, and save it.. -->
    <div id="analysisScreen" style='z-index:9990; display:none; position:absolute; left:5px; top:5px; border:1px black solid; background:#FFFFC0; width:1250px; height:635px;'>
        __ほげ__ Analysis screen...

        <!-- div for Copyed !" -->

    <canvas id="smoothchartshowAnalisysCopy" style='position:absolute; left:394px; top: 15px;   border:solid 1px blue;  padding:0px; margin:0px;' width="800" height="250"></canvas>

        <!-- prepered for copy -->
        <button onclick="analysisCopyGraph()" class="btn btn-warning" style='position:absolute; top:320px; left:394px; backgroundd:#01DF01; colorr:white'>    <!-- i class="fa fa-forward"></i -->   copyGraph  </button>

        <canvas id="smoothchartshowAnalisys"   style='position:absolute; left:404px; top: 374px;    border:solid 0px red;   padding:0px; margin:0px; '   width="800" height="250"></canvas> 
        <button onclick="analysis()"      class="btn btn-success" style='position:absolute; left:1104px; top:600px; backgroundd:#01DF01; colorr:white'>    <!-- i class="fa fa-forward"></i --> analysis </button>
    </div>  

<p id="logTxt" p    style="text-align:right; width: 102px;  position:absolute; left:200px; top:5px;  ">log</p>

<script>
isRunningAnalysis=true;

data1 = [],
data2 = [],
data3 = [],

instant1=1;     // GRID LINES
high1=-150;     // GRID LINES
frequency1=3;   // GRID LINES
gridInstant1=1; // GRID LINES
gridInstant2=1; // GRID LINES

flagGo=2;
instantFlag=-1000;

instant2=1;     // HEART BEAT
high2=-70;      // HEART BEAT
frequency2=4;   // HEART BEAT

totalPoints         = 1500; // graphics resolution / ...size
updateInterval      = 20;   // wave sampling...  frequency...
updateIntervalTemp  = updateInterval;
frequencyTemp       = frequency2;

isPause = "1";

document.getElementById('logTxt').innerHTML = " ZERO updateInterval="+updateInterval+" frequency2="+frequency2;

//the graphics
$(function() {

    //  Grid Lines
    function getRandomData1() { 
        if (data1.length > 0)
            data1 = data1.slice(1);

        while (data1.length < totalPoints) {
            // create an square wave
            if     (gridInstant1 < 100){
                instant1=1500;
                gridInstant1++;
                if(gridInstant1 == 100){
                    gridInstant2=1;
                }
            }
            else if(gridInstant2 < 100){
                instant1=-1500;
                gridInstant2++;
                if(gridInstant2 == 100){
                    gridInstant1=1;
                }
            }

            instantShow1 = instant1;
            data1.push(instantShow1);
        }

        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data1.length; ++i) {
            res.push([i, data1[i]])
        }
    //  console.log(data1);
        return res;
    }

    //  Heart beat
    function getRandomData2() {
        if (data2.length > 0)
            data2 = data2.slice(1);

        while (data2.length < totalPoints) {

            // Heart beat wave
            instant2 = instant2 - frequency2;
                if (instant2 < high2) {
                    instant2 = (high2 * -1);
                }
            instantShow2 = instant2;
                if (instantShow2 < 2) {
                    instantShow2 = 2;
                }
            data2.push(instantShow2);
        }

        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data2.length; ++i) {
            res.push([i, data2[i]])
        }
        //  console.log(data2);
        return res;
    }

    //  FLAG  Line
    function getRandomData3() { 
        if (data3.length > 0)
            data3 = data3.slice(1);

        while (data3.length < totalPoints) {
             if (flagGo==1){
                 instantFlag=200;
                 flagGo=2
             }
             else{
                instantFlag=1000;
             }

            instantShowFlag = instantFlag;
            data3.push(instantShowFlag);
        }

        // Zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data3.length; ++i) {
            res.push([i, data3[i]])
        }
    //  console.log(data1);
        return res;
    }

    // Set up the control widget
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 2000) {
                updateInterval = 2000;
            }
            $(this).val("" + updateInterval);
        }
    });

    var plot = $.plot("#placeholder", [{data: getRandomData1()}, {data: getRandomData2()}, {data: getRandomData3()}], {
        series: {
            shadowSize: 0 // Drawing is faster without shadows
        },
        yaxis:  {
            min: -50,
            max: 250,
            color: "#EDC240",
        },
        xaxis:  {
            show: false,  
        },
        tooltip: {
            show: true,
            content: 'FLAG これはたとえばです',
            shifts: {
                x:  10,
                y: -10,
            }
        },
        grid: {
            hoverable: true,
            mouseActiveRadius: 30,
        }

    });

    function update() {

        plot.setData([{data: getRandomData1()}, {data: getRandomData2()}, {data: getRandomData3()}]);
        plot.draw();
        setTimeout(update, updateInterval);

    }
    update();
});

//the controls
function speedo02() {   // off  pause
    updateInterval = 2000;

    isPause="2";
    document.getElementById('logTxt').innerHTML = " PAUSE  updateInterval="+updateInterval+" frequency2="+frequency2;
}

function speedo04() {  // On
    updateInterval  = updateIntervalTemp;
    frequency2      = frequencyTemp;

    flagGo=1;
    isPause="1";
    document.getElementById('logTxt').innerHTML = " START  updateInterval="+updateInterval+" frequency2="+frequency2;
}   

function speedo01() {   // -
    if(isPause=="1"){
        updateInterval      = updateInterval*2
        frequency2          = frequency2*2;     
        updateIntervalTemp  = updateInterval;
        frequencyTemp       = frequency2;

    isPause="1";
    document.getElementById('logTxt').innerHTML = " speed01  updateInterval="+updateInterval+" frequency2="+frequency2;
    }else if(isPause=="2"){
        updateInterval = updateIntervalTemp;
        frequency2 = frequencyTemp;
        isPause="1";
    }
    flagGo=1;
}
function speedo03() { // +
    if(isPause=="1"){
        updateInterval      = updateInterval/2;
        frequency2          = frequency2/2;
        updateIntervalTemp  = updateInterval;
        frequencyTemp       = frequency2;

    isPause="1";
    document.getElementById('logTxt').innerHTML = " speed03 updateInterval="+updateInterval+" frequency2="+frequency2;
    }else if(isPause=="2"){
        updateInterval  = updateIntervalTemp;
        frequency2      = frequencyTemp;
        isPause="1";
    }
    flagGo=1;
}   
function flag01() {
    flagGo=1;
    document.getElementById('logTxt').innerHTML = "  flag ";

}   
    function analysis() {
        if (isRunningAnalysis){
            document.getElementById("analysisScreen").style.display = 'block';

            var placeholder = document.querySelector('.flot-base');
            var smoothchartshowAnalisys  = document.querySelector('#smoothchartshowAnalisys');
            var context = placeholder.getContext('2d');

            var image = context.getImageData(0, 0, placeholder.width, placeholder.height);
            smoothchartshowAnalisys.getContext('2d').putImageData(image, 0, 0);

        }else{
            document.getElementById("analysisScreen").style.display = 'none';
        }
        isRunningAnalysis = !isRunningAnalysis;
    }

    function analysisCopyGraph() {
            document.getElementById("analysisScreen").style.display = 'block';

            var smoothchartshowAnalisys = document.querySelector('#smoothchartshowAnalisys');
            var smoothchartshowAnalisysCopy  = document.querySelector('#smoothchartshowAnalisysCopy');
            var context = smoothchartshowAnalisys.getContext('2d');

            var image = context.getImageData(0, 0, smoothchartshowAnalisys.width, smoothchartshowAnalisys.height);
            smoothchartshowAnalisysCopy.getContext('2d').putImageData(image, 0, 0);
    }

</script>

Thanks,

krzysu commented 8 years ago

Hi seniDEac, first of all, in the future, use some online JS editor to present example of your code, i.e. https://jsfiddle.net/

and I also don't fully understand your questions, but let's try:

  1. how to put this "tooltips" only in the "flag Series getRandomData3()"?

tooltip is defined per chart, not per series, but I think you can try to use onHover callback, check over which series your mouse is, and disable tooltip then (but I never tried it)

  1. how to always show this "tooltips"(getRandomData3())? (not only when the mouse is over, but all the time)?

there is no such a functionality, I think then it wouldn't be called tooltip. but feel free to add it and send me back your pull request

  1. how to get personalized "labels" with for exemple "on/off" button or "-/+" button or more "flag button "?

I'm not sure what do you mean by labels, but you can use content to specify what appears on tooltip, that can be also a function function(label, xval, yval, flotItem), check the documentation https://github.com/krzysu/flot.tooltip#plugin-options

also source code of this tooltip plugin is quite easy, so you can just dig inside, modify, debug, do whatever you want :)

have fun! Kris