Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)

Question

I'm using the HighCharts library for GWT, and I'm having a problem.

I'm trying something like this: stock chart example. The only thing I'm interested on for this question is the buttons property inside rangeSelector, in which I want to customize the button texts). On javascript the code is like this:

rangeSelector: {
            buttons: [{
                type: 'day',
                count: 3,
                text: '3dias'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6MS'
            }, {
                type: 'year',
                count: 1,
                text: '1ano'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 3
        }

Now I'm trying to do the same in GWT, using the method setOption() on the chart. But nothing seems to work.

I think I'm having trouble because the buttons property needs an array of properties, and that's what I can't figure out how to solve.

Something I tried:

chart.setOption("/rangeSelector/buttons", 
      new String[]{"{type: 'day', count: 1, text: '1dia'}", "{type: 'day', count: 1, text: '1dia'}"});`

This is the best I could come up with, which creates two empty buttons and with no actions.

Any help would be appreciated. Thank you very much.

UPDATE: (Dec 13, 2012)
After the accepted answer was given, I needed to set the button witdh. For that just use:

buttonTheme: {
    width: 80
}

something like:

rangeSelector: {
                selected: 2,
                inputBoxStyle: {
                    top: '40px',
                    right: '10px'},
                buttons: [{
                    type: 'week',
                    count: 1,
                    text: '1 semana'
                }],
                buttonTheme: {
                    width: 80
                }
            }

udalmik udalmik · Accepted Answer · 2012-08-29T15:30:12

Could you please try following:

 String rangeSelectorConfig =  " {\n" +
            "                buttons: [{\n" +
            "                    type: 'day',\n" +
            "                    count: 3,\n" +
            "                    text: '3dias'\n" +
            "                }, {\n" +
            "                    type: 'week',\n" +
            "                    count: 1,\n" +
            "                    text: '1w'\n" +
            "                }]" +
            "            }" ;
 JSONValue config = JSONParser.parseLenient(rangeSelectorConfig);
 chart.setOption("/rangeSelector", config);

Chart class (with help of Configurable) doesn't parse JSON objects for you, so buttons in your code were passed as string literals to native HightCharts JS.

Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)

1 Answers