Protovis update data with Javascript

Question

I have this script protovis :

<script type="text/javascript+protovis">
    var w = 600;
    var h = 600;
    var img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./icon/image.gif")
        .title("image");

    img.add(pv.Dot)
        .data(data)
        .left(function(d) d[0] * w)
        .bottom(function(d) d[1] * h)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");

    img.render();
</script>

data1 is declared in a Javascript file :

var data = [[.1, .1, 1], [.2, .2, 2], [.3, .3, 3]];

When i test that i have my image with 3 dots. But i don't how to do if for example i change the data in a Javascript function then redraw the protovis with the new data. In my case, when the user click in a menu, i recieve new data from a database and i update the data. But after i changed the data i need to redraw the image.

I was wondering how i could reload the web page in order to redraw the image with the new data. I was thinking of reload the web page passing the data in POST and retrieve the data in Javascript before drawing the image.

But i'm not sure if this solution will work and if it's the best way to do that.

Answer 1

Your question is a bit unclear, but there are several ways to do this:

• If you want to update the visualization without reloading the page, you can use AJAX to load the new data (probably using jQuery or another helper library). In the callback function, which will run once the new data is loaded, assign the data variable to the new data, then call img.render(). For example, using jQuery:

  // assign a handler to run when the user clicks Submit
  $('#userForm').submit(function() {
      // get new data based on form input
      $.get('/data.php?' + $(this).serialize(),
          // set the callback function to run with returned data
          function(newData) {
              // set data to new data
              data = newData;
              // refresh
              img.render();
          }
      );
  });
  

• If you want to reload the page, you basically have two options. The first is to put your data inline in the HTML page instead of loading it separately, and then use PHP or your server-side language of choice to replace the data with new data defined by the user parameters. The second option is to make your data.js file dynamic, and pass in the new parameters when you reload the page, e.g. data.js?option=2.

But really, unless you're going to be changing other things on the page as well, you're probably better off going with the AJAX option. It's no more complex on the server side, only a tiny bit more complex on the client side, and it saves your user a page load.

Answer 2

Thank you for your answer. I managed to draw the image and add new Dots on the image with new data when the user click on a menu without reloading the page. I didn't know it was possible to call Protovis function in a Javascript file, like img.render().

So now i have this protovis script :

<script type="text/javascript+protovis">
    var w = 1286;
    var h = 909;
    img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./plans/img.pnj")
        .title("image");

    function addAndDrawDots(){
        img.add(pv.Dot)
        .data(data1)
        .left(function(d) d[0] * w / 100)
        .top(function(d) d[1] * h / 100)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");
        img.render();
        }
</script>

Then i just have to set the data1 variable and call addAndDrawDots in the function called when a user click on the menu.

Now it will be useful for my application if i could remove the Dots from the Panel, because with this solution, if i change the data, it add new Dots without deleting previous.