swap graphs on same canvas

Question

Colleagues,

I have designed a dashboard with HTML canvas and want to show on same page a flot graph, toggling between them with a button. The problem that I am facing is that when I click to get the flot, the graph shows up under the canvas, and not in the same place (as I want). This is the relevant code :

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="800" height="400" style="background-color:#ffffff"></canvas>

<script>

 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var radio = canvas.height / 2;
 var ent_direc={{ent_direc}};
 var ent_vel={{ent_vel}};
 ctx.translate(radio,radio);
 radio_direc = radio * 0.9;
......

function show_graph is called when I click the button

function show_graph(){
// create dynamic DIV to hold graph

        var div = document.createElement('div');
        div.id = "placeholder";
        document.body.appendChild(div) document.getElementById("placeholder").setAttribute("style","width:600px;height:300px");


        ctx.save();

        // Use the identity matrix while clearing the canvas
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Restore the transform
        ctx.restore();

        data_g =[ [0,2],[1,4],[2,5]];
        $(document).ready(function(){
                $.plot($("#placeholder"), [
                {
                        data: data_g ,
                        bars:
                        {
                                show: true
                        }
                }
        ]);
});

Any idea on how to show the flot graph on the same canvas area?

score 1 · Answer 1 · answered Sep 25 '15 at 08:47

What you try is not that simple. Flot takes a div element and creates its own canvas elements in this div (and some stuff around the canvas like axis labels).

The easiest solution would be to hide your original canvas when you create the Flot graph:

$('#canvas').hide();

swap graphs on same canvas

1 Answers1