Over a million developers have joined DZone.

Using MarkupKit with Charts

DZone's Guide to

Using MarkupKit with Charts

Will open source charts library work with markup? Turns out the answer is yes, and it's not that hard to do! Read on to find out more.

· Mobile Zone ·
Free Resource

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">

        <UIButton style="systemButton" title="Options"
            titleLabel.font="HelveticaNeue-Light 17.0" tintColor="#4c8fbd"

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

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

            <UITextField id="sliderTextX" weight="1"
                font="HelveticaNeue-Light 15.0"

            <UISlider id="sliderY" minimumValue="1" maximumValue="200" value="1" weight="4"

            <UITextField id="sliderTextY" weight="1"
                font="HelveticaNeue-Light 15.0"

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.

charts ,markupkit ,mobile ,auto layout ,xml ,ui

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}