Using MarkupKit with Charts

For a while now, I’ve been meaning to see if the popular open-source Charts library would work with MarkupKit. I finally got around to trying it this morning.

It actually turned out to be much easier than I expected. All of the Charts demos are built using XIB files. All I had to do was create a markup document that mimicked the contents of a XIB file, including outlets and actions, and add the code to load the view from markup instead of the XIB. I chose to try to replicate the pie chart example:

To load the view declaration, I added the following method to the demo’s PieChartViewController class. No other changes to the controller were necessary:

- (void)loadView
{
    [self setView:[LMViewBuilder viewWithName:@"PieChartViewController" owner:self root:nil]];
}

The contents of PieChartViewController.xml are shown below. Note the use of the Charts prefix in the PieChartView declaration. This is necessary because the PieChartView class is defined in the Charts module:

<?xml version="1.0" encoding="UTF-8"?>

<!-- Pie chart demo -->
<LMColumnView layoutMarginsRelativeArrangement="false" backgroundColor="#f0f0f0">
    <!-- Options button -->
    <LMRowView layoutMarginTop="6" layoutMarginLeft="18" layoutMarginRight="18">
        <LMSpacer/>

        <UIButton style="systemButton" title="Options"
            titleLabel.font="HelveticaNeue-Light 17.0" tintColor="#4c8fbd"
            onTouchUpInside="optionsButtonTapped:"/>
    </LMRowView>

    <!-- Pie chart view -->
    <Charts.PieChartView id="chartView" weight="1"/>

    <!-- Sliders -->
    <LMColumnView layoutMarginLeft="8" layoutMarginRight="8" layoutMarginBottom="24">
        <LMRowView>
            <UISlider id="sliderX" minimumValue="1" maximumValue="25" value="1" weight="4"
                onValueChanged="slidersValueChanged:"/>

            <UITextField id="sliderTextX" weight="1"
                font="HelveticaNeue-Light 15.0"
                textAlignment="center"/>
        </LMRowView>

        <LMRowView>
            <UISlider id="sliderY" minimumValue="1" maximumValue="200" value="1" weight="4"
                onValueChanged="slidersValueChanged:"/>

            <UITextField id="sliderTextY" weight="1"
                font="HelveticaNeue-Light 15.0"
                textAlignment="center"/>
        </LMRowView>
    </LMColumnView>
</LMColumnView>

The results are shown below. They are virtually indistinguishable from the original (though the chart data differs slightly, since it appears to be randomly generated each time the app is run):

So, I was very happy to discover that, not only did MarkupKit work with the Charts library, I was able to use it as a drop-in replacement for the original XIB file in the demo application!

The latest version of MarkupKit can be downloaded here. See the project README for more information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s