It is currently Sat Oct 25, 2014 9:37 pm Advanced search

Changing properties at runtime

Technical support, bug reports and more.

Changing properties at runtime

Postby Damien Courouble » Tue Feb 21, 2012 5:12 pm

Hi guys,

At first I would like to thank you for this incredible tools, I also want to say congratulations for the support you provide.

I'm currently working on a "chart editor" where the user can change lots of properties at runtime.
I've begin with title properties and create some html control that get initial chart value and update them when they change :
- A textbox for the Text
- A dropdown to set the position (left, center, right)
- A dropdown for the font
- A checkbox to say wheter if the font is bold or not
- A dropdown to select the fontSize
- And a color picker to put font color

This working perfectly using the SetTitle() method here's my code to give you an idea

Code: Select all
 chart.setTitle({
                align: $("#titlePositionDdl").val(),
                text: ($("#titleTextBox").val()) ? $("#titleTextBox").val() : " ",
                style: {
                    fontFamily:  $("#fontDdl").val(),
                    fontWeight: ($("#titleBoldCheckbox").attr('checked') == 'checked') ? 'bold' : 'normal',
                    fontSize: $("#fontSizeDdl").val()+'px',
                    color: $("#TitleColorSelector").css('backgroundColor')
                }
            });


(Note that the $() stuff is the accessor to my controls values)

I attend to do the same with everything else (Legend, Background,Plot background ..) basically I would like to provide to the user an editor where the user can customize every properties that we can set at initialisation.

I'm now moving to Legend and i begin to have issues
I saw different technique on this forum, one is get the legend element using jquery and set its attribute (like visibility or transform) what I don't like in this is i can't put legend to the left of the chart using this technique like when you set legend align at chart settings (you know when doing a New Chart() on page load)

So I figure out that i can store to chart.options everything I've edit and doing a new chart with theses modified options
For example if I want to modify the legend align property i'm doing that :

Code: Select all
            chart.options.legend.align = "left";
            chart = new Highcharts.Chart(chart.options);


this is working of course but it create a new chart and the series are rendering again.

So my questions :
- Is there other to modify all chart properties at runtime without having a rerendering beahvior ? ( I can understand chart need rerendering if we change the data, but here legend are just some text and have nothing to do with data)
- Will you provide method like SetTitle for legend and other properties later ?
- Any chance you already wrote a chart editor ?

Thanks for you feedback

Damien
clicdata.com
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Wed Feb 22, 2012 3:22 pm

Anyone to guide me on it ?

Thanks,

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby obsobs » Thu Feb 23, 2012 2:52 pm

Hi Damien,

Regarding changing position for the legend you could use chart.legend.renderLegend() after changing the align or verticalAlign properties. I've set up an example here: http://jsfiddle.net/obsobs/Bk5ja/1/

To me it seems that some properties can be changed and just do a redraw of the series in question while others forces you to destroy the series in question and then add them again. Z-index is one of the properties that needs you to destroy and then add the series for example.

Hope this helps you.

//Olof
obsobs
 
Posts: 5
Joined: Thu Feb 23, 2012 2:35 pm

Re: Changing properties at runtime

Postby Damien Courouble » Thu Feb 23, 2012 2:58 pm

Hey,

Thanks a lot for that, with that way I'm not forced to store a copy of the chart options and create a new instance !
Is there others methods that I can use to rerender only Background and PlotArea, also what I can to do change dynammically the labels of the series (Ie the value labels) ?

Regards,

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Thu Feb 23, 2012 3:10 pm

Also your solution looks good for position (align)
But doesn't work with others properties like legend.enabled or legend.ItemStyle or legend.Reversed ...

What can i do for this ?
Also note that your solution is fine because the legend is initially set to be at the bottom but try it with one on the right or left you'll see

Thanks,

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby obsobs » Thu Feb 23, 2012 3:35 pm

Not sure what you meen when you say it doesn't work if you initially set it to left or right.

As I said in my answer, this approach works for some properties. When changing others you will have to destroy and then redraw the chart. I haven't been able to figure out any pattern on which properties demands a destroy.

I'm am currently trying to do the same as you are, an editable chart, and I haven't gotten so far yet. I will look in to the questions you had and see if I can come up with a solution.

//Olof
obsobs
 
Posts: 5
Joined: Thu Feb 23, 2012 2:35 pm

Re: Changing properties at runtime

Postby Damien Courouble » Thu Feb 23, 2012 3:37 pm

Great, I moving quiet well on it, i'll share my full code if my boss is agree so then we can make improvements together :)

I'll keep you updated
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Thu Feb 23, 2012 7:27 pm

Hey it's me again

I was using the 2.1.0 and I upgrade to the 2.2.0
Now every properties I've done are not working. My workaround was having two charts :
- One on the screen called tChart
- A shadow one in memory called tChartShadow

my technic was modifying the properties of the shadow and then create a new instance of Chart for tChart like that

Code: Select all
tChartShadow.options.legend.itemStyle.fontWeight = ($(this).attr('checked') == 'checked') ? 'bold' : 'normal';
tChart = new Highcharts.Chart(tChartShadow.options);


What canIi do to change properties than doesn't have method like SetTitle at runtime ?

Thanks,

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Fri Feb 24, 2012 12:33 pm

Hi guys,

I really need help on changing this legend properties at runtime :
- Visibility/enable of the Legend
- Position
- Put item in bold (or not)
- Reverse order
- Border Color
- Background color
- Border width

I used to be able to do it when using the 2.1.9 but I upgrade to 2.2.0 and now the workaround I used to do the job does no longer works :(
For this workaround I used two Charts, one in the UI (tChart) and a copy of it in memory (tChartShadow), I used to change the options of tChartShadow and then create a new instance of tChart with the options of tChartShadow like that :

Code: Select all
         tChartShadow.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                tChart = new Highcharts.Chart(tChartShadow.options);


So far this what I've tried to enable/disable the legend (note that $(this) is my combobox to enable/disable the legend)

Code: Select all
 // 1 (Not working)
                // tChart.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.renderLegend();

                // 2 (not working)
                // tChart.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.redraw();

                // 3 (not working)
                // tChart.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.renderLegend();

                // 4 (not working)
                // tChart.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.redraw();

                // 5 (works for hiding but didn't show it after it desappears + the legend widht is increasing each time we hit hide/show checkbox
                // tChart.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.render();

                // 6 (legend is visible at init clik to hide don't do anything click again (so that mean show it) hide it
                // Keep hitting show/hide after that make the width of the legend increasing
                // tChart.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart.render();

                // 7 hit hide/show increase the width of the legend but don't even hide it
                // tChart.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart = new Highcharts.Chart(tChart.options);

                // 8 Works fine but the width of the legend keep increasing when hitting show/hide
                // tChart.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart = new Highcharts.Chart(tChart.options);

                // 9 First hide works then hit show and the chart desappear (not the title) + used to wokrs on 2.1.9
                tChartShadow.options.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                tChart = new Highcharts.Chart(tChartShadow.options);

                // 10 first hide make the legend wider, the second click (show) make the whole chart desappear
                // tChartShadow.legend.enabled = ($(this).attr('checked') == 'checked') ? true : false;
                // tChart = new Highcharts.Chart(tChartShadow.options);


I would really appreciate if someone can give me another workaround, I've check the changelog between both 2.1.9 and 2.2.0 and can't figure which one of the new features makes my workaround wrong.

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Mon Feb 27, 2012 11:07 am

Anyone on this ? it become urgent !

Thanks,

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby obsobs » Mon Feb 27, 2012 12:46 pm

Hi Damien,

If you look in the exporting.src.js they have a function there where they copy the chart and then recreate it to be able to export it to a different format (getSVG). I have used that code as a base for extracting the properties needed for recreating the chart. When you have extracted the properties you can then change the prop you want to change and then create a new chart.

I have made a small sample for you. Hope it fullfills your needs.

http://jsfiddle.net/obsobs/X9w5J/

You would probably destroy the old chart to free memory before recreating the new one but I haven't implemented that.

//Olof
obsobs
 
Posts: 5
Joined: Thu Feb 23, 2012 2:35 pm

Re: Changing properties at runtime

Postby Damien Courouble » Mon Feb 27, 2012 12:57 pm

Thanks obsobs that was what I need,

there's one bug with that :
- Hit 'change prop' a couple of times and you'll see, the legend is beginning bigger and bigger each time ..

I was using the same kind of workaround, except that I wasn't retreiving the options from the chart, I ws using my shadow object.

I'm now affraid for three things:
- Using the 2.2.2 version the chart= new Highcharts.Chart(options); doesn't work (I need to test again but If I remember well the chart desappear after the second call)
- Using this technic of creating a new chart doesn't works on Axis (x and y ) and I seriously can't get why.
- As I told you there's a weird bug everytime you change a property from the legend and I can't allow it in my editor.

Let me know if you have others clues/ideas on theses.

Thanks

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby Damien Courouble » Mon Feb 27, 2012 1:13 pm

Hey,

Your solution seems to works with the 2.2.2, I still havethe legend bug and need to find a way to works with Axis
The Axis doesn't looks to be changed even after having called the new Chart()

Damien
Damien Courouble
 
Posts: 12
Joined: Tue Feb 21, 2012 4:53 pm

Re: Changing properties at runtime

Postby hfrntt » Wed Feb 29, 2012 2:01 am

By "2.2.2" you meant "2.2.0" right (see changelog: http://www.highcharts.com/documentation/changelog)? Or maybe you have access to future releases? :) Calling "new Highcharts.Chart()" with the same options won't work, it was described here: viewtopic.php?f=12&t=15255

In case of that "weird bug", could you set up a demo to show us what are you doing and what's exactly wrong?
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Changing properties at runtime

Postby obsobs » Wed Feb 29, 2012 10:55 am

Hi,

If you include the xAxis and yAxis in the json object when you create the chart the first time you can then change the properties of the Axis, at least that works for me.

Regarding the "weird bug" I guess you mean the fact that 10 pixels gets added to the legend width each time you "new" the chart. This can be avoided by setting legend.width to null before you make the new chart. This is the default value of legend.width. I don't know why this happens but if seems to be the easiest solution.


//Olof
obsobs
 
Posts: 5
Joined: Thu Feb 23, 2012 2:35 pm

Next

Return to Highcharts Usage

Who is online

Users browsing this forum: No registered users and 7 guests