vaadin and javascript flotChart options

Vaadin 6 / 7 / 8
1

Hello, i have created a vaadin page which can display a flot chart by using the flotchart javascript library.
The chart is created with success, but when i add some options, nothing changes, can someone please have a look at my codes?
This is an example of the book Vaadin 7 cookbook, but it doesn’t work!




Main UI:


        [i]
VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        FlotChart flot = new FlotChart();
        flot.setWidth("300px");
        flot.setHeight("300px");

        //String data = "{" + "\"k1\":[0,5]
, \"k2\":[2,7]
" + "}";
        String data = "[" + "[" + "[0, 5]
," + "[2, 7]
," + "[4, 8]
," + "[10, 5]
" + "]" + "]";
        flot.setData(data);
        [u]
String options = "{grid: {backgroundColor: { colors: [ \"#fef\", \"#eee\" ]
 },borderWidth: {top: 1,right: 1,bottom: 2,left: 3}}}";
[/u]
        flot.setOptions(options);

        Label label = new Label("ChartView");
        layout.addComponent(label);
        layout.addComponent(flot);
[/i]




In the FlotChartState class:


    [i]
public String data;
    public String options;
[/i]




In the javascript connector file:


[i]
   window.com_ui_charts_FlotChart = function() {
    var element = $(this.getElement());
    
      this.onStateChange = function()
      {
        var state = this.getState();
        console.log(state);
        var options = state.options;
        [b]
console.log(options);
[/b]
        var data = JSON.parse(state.data);
        console.log(data);
        $.plot(element, data, options);
       }
[/i]
    
   };

From firebug, i saw that the information is already received by the client side:

   Object { callbackNames=[0]
, rpcInterfaces=[0]
, data="[[[0, 5]
,[2, 7]
,[4, 8]
,[10, 5]
]]", more...}
[b]
   {grid: {backgroundColor: { colors: [ "#fef", "#eee" ]
 },borderWidth: {top: 1,right: 1,bottom: 2,left: 3}}}
[/b]
   [[[0, 5]
, [2, 7]
, [4, 8]
, [10, 5]
]]

Another question, when i add a JSON.parse for the state.options(
var options = JSON.parse(state.options
), i get an error, but no error for
var data = JSON.parse(state.data);
 why? All of the two element are String on server side.