It is currently Tue Sep 30, 2014 3:51 pm Advanced search

scrollbar with dynamic added series

Technical support, bug reports and more.

scrollbar with dynamic added series

Postby fermo111 » Wed Feb 01, 2012 10:37 am

What I am trying to do is having a chart with an horizontal scrollbar and being able to add or replace series.
I included highstock.js and defined scrollbar.enabled = true xAxis.min = <something>. The scrollbar works with the series defined at creation time.

Then I substitute the series with a new one. The scrollbar is still there but when I click on it I get the following error "baseSeries.xAxis is undefined".

Looking at the code, it appears that 'baseSeries' is defined once at the chart creation time and then it is not updated when new series are created

Thanks
fermo111
 
Posts: 2
Joined: Wed Feb 01, 2012 10:24 am

Re: scrollbar with dynamic added series

Postby Fusher » Thu Feb 02, 2012 4:14 pm

Can You share with Your example?
I've made something like this:
http://jsfiddle.net/Fusher/8kv98/
and there's no errors.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7267
Joined: Mon Jan 30, 2012 12:16 pm

Re: scrollbar with dynamic added series

Postby fermo111 » Tue Feb 21, 2012 10:11 pm

Fusher wrote:Can You share with Your example?


Sorry for the delay.

Here is the example. I have taken your code and made the following changes:

1) chart = new Highcharts.Chart
( instead of chart = new Highcharts.StockChart )

2) added
Code: Select all
scrollbar: {
   enabled: true
},
xAxis: {
    min: 1255475600000
},

to the chart config object

3) modified the click event handler

When you run this code and click on the button you get the error.

Code: Select all
var seriesOptions = [], seriesOptions2 = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT'],
        names2 = ['GOOG'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',    function(data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });
    });

$.each(names2, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',    function(data) {

            seriesOptions2[i] = {
                name: name,
                data: data
            };
    console.log(seriesOptions2);
            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
           // seriesCounter++;

           // if (seriesCounter == names.length) {
           //     createChart();
           // }
        });
    });
$('#btn').click(function() {
     //chart.series[0].setData(seriesOptions2[0].data,true);
    chart.series[0].setData(seriesOptions2[0].data,true);
    chart.series[0].chart.addSeries({data:seriesOptions2[0].data}, false);
    chart.series[0].remove();
 });

    // create the chart when all data is loaded
    function createChart() {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 4
            },
scrollbar: {
                    enabled: true
                },
            xAxis: {
                min: 1255475600000
            },
            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
           
            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },
           
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                yDecimals: 2
            },
           
            series: seriesOptions
        });
    }
fermo111
 
Posts: 2
Joined: Wed Feb 01, 2012 10:24 am

Re: scrollbar with dynamic added series

Postby Fusher » Thu Feb 23, 2012 5:48 pm

Well, it's look similar to this issue: https://github.com/highslide-software/h ... issues/716 -try this solution with manually removed series.
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7267
Joined: Mon Jan 30, 2012 12:16 pm

Re: scrollbar with dynamic added series

Postby hfrntt » Fri Feb 24, 2012 2:28 pm

Well it's caused by scrollbar, the simplest workaround is to use setData instead of removing series. Anyway I reported an issue here: https://github.com/highslide-software/h ... issues/781

Here you can find a simplified demo: http://jsfiddle.net/9M44d/
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am


Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 20 guests