protovis update data | 易学教程

问题

I have tried a lot to update protovis using jquery but nothing happens. here is my code.

<script type="text/javascript+protovis">
var minnesota =  [{name:"job 1", values:[182904,196530,203944,192492,77393,81243]}]

$(document).ready(function(){
draw();
$("button").click(function(){
minnesota = [{name:"changed job", values:[342,34234,2342,543]}]
draw();
});

});



    function draw(){
    var w = 200,
        h = 30,
        numberFormat = pv.Format.number(),
        dateFormat = pv.Format.date("%B %Y");

    /* Color by maximum number of people employed in that job. */
    var c = pv.Scale.log(minnesota, function(d) pv.max(d.values))
        .range("#ccc", "#1f77b4");

    /* Tile the visualization for each job. */
    var vis = new pv.Panel()
        .data(minnesota)
        .width(w)
        .height(h + 10)
        .top(6)
        .left(6)
        .right(6)
        .bottom(6);

    /* A panel instance to store scales (x, y) and the mouseover index (i). */
    var panel = vis.add(pv.Panel)
        .def("i", -1)
        .def("x", function(d) pv.Scale.linear(d.values, pv.index).range(0, w))
        .def("y", function(d) pv.Scale.linear(0, pv.max(d.values)).range(0, h))
        .bottom(10)
        .events("all")
        .event("mousemove", pv.Behavior.point(Infinity).collapse("y"));

    /* The area. */
    panel.add(pv.Area)
        .data(function(d) d.values)
        .fillStyle(function(d, p) panel.i() < 0 ? c(pv.max(p.values)) : "#2ca02c")
        .left(function() panel.x()(this.index))
        .height(function(d) panel.y()(d))
        .bottom(0)
        .event("point", function() panel.i(this.index))
        .event("unpoint", function() panel.i(-1));

    /* The x-axis. */
    panel.add(pv.Rule)
        .bottom(0);

    /* The mouseover dot. */
    panel.add(pv.Dot)
        .visible(function() panel.i() >= 0)
        .left(function() panel.x()(panel.i()))
        .bottom(function(d) panel.y()(d.values[panel.i()]))
        .fillStyle("#ff7f0e")
        .strokeStyle(null)
        .size(10);

    /* The label: either the job name, or the month and value. */
    panel.add(pv.Label)
        .bottom(-1)
        .textBaseline("top")
        .left(function() panel.i() < 0 ? 0 : null)
        .right(function() panel.i() < 0 ? null : 0)
        .textAlign(function() panel.i() < 0 ? "left" : "right")
        .textStyle(function() panel.i() < 0 ? "#999" : "#000")
        .text(function(d) panel.i() < 0 ? d.name
            : dateFormat(new Date(2000, panel.i() * 3, 1))
            + ": " + numberFormat(d.values[panel.i()]));

    vis.render();
    }
        </script>

when document ready then it create charts but when I click button then it doesn't re draw chart. I've checked new data values with firebug which is fine but it doesn't update charts values. I've tried a lot to find solution but couldn't succeeded. Any trick?

回答1:

For me, your solution drew an additional chart, instead of redrawing the same chart with new data.

I moved a few things in your code around and have the update working. You simply need to update the data and call vis.redraw, not set up your entire visualization on each click.

Check it out: https://gist.github.com/906247

回答2:

I just use vis.render(); at the end of each function that changed the data.

来源：https://stackoverflow.com/questions/5543859/protovis-update-data

标签

javascript

jquery

protovis