PowerPlotPercolation logo

Automatic chart updates

This is a line chart. When the user moves the sliders, the data model is changed and this results in an automatic update of the chart.

This page describes the class “DataBindings” in the PowerPlot demo app.

Data bindings chart

Data bindings keep the chart and the underlying data model in sync automatically. The Boolean property bindings of WSPlotController is all that is needed to automatically keep the data model and the chart output in sync:

    // Activate data bindings for the lines plot.
    [self.chart plotAtIndex:1].bindings = YES;

Note that activating data bindings will also automatically highlight special conditions set using the alertBlock block, see the example alerting.

Generating the chart with a single line plot is simple and straightforward:

    // Add a chart with a single line plot.
    WSChart *lineChart = [WSChart linePlotWithFrame:[self.chart frame]
                                               data:_sineFunction
                                              style:kChartLineGradient
                                          axisStyle:kCSGrid
                                        colorScheme:kColorDark
                                             labelX:NSLocalizedString(@"x", @"")
                                             labelY:NSLocalizedString(@"o+f*sin(x+p)", @"")];
    [self.chart removeAllPlots];
    [self.chart addPlotsFromChart:lineChart];
    self.chart.backgroundColor = lineChart.backgroundColor;

We conclude with a few words on how the data model is set up. The data model is generated by a method that takes three parameters, an offset, an overall scale factor and a phase factor:

    // The input data is a sine function with given phase, overall scale
    // and offset.
    // It is stored in the instance variable "_sineFunction" and computed
    // in "sliderDidMove:".
    if (_sineFunction == nil) {
        _sineFunction = [WSData new];
        [DemoData sineFunctionWithData:_sineFunction
                                  xmin:0.
                                  xmax:8.
                                factor:1.
                                 phase:1.
                                offset:0.5
                            resolution:resolution];
    }

In the demo app UI the parameters are taken from the three sliders. Once the sliders are moved this results in a recomputation of the data model:

- (void)sliderDidMove:(id)sender {
    NAFloat xmin = [_sineFunction minimumValueX];
    NAFloat xmax = [_sineFunction maximumValueX];
    NAFloat phase = [self.phaseSlider value];
    NAFloat factor = [self.factorSlider value];
    NAFloat offset = [self.offsetSlider value];

    [DemoData sineFunctionWithData:_sineFunction
                              xmin:xmin
                              xmax:xmax
                            factor:factor
                             phase:phase
                            offset:offset
                        resolution:resolution];
}