Friday, August 26, 2011

Complete Guide for FragmentedBar Chart (MIM Chart Lib)

Following is the sample code and all information required to create a Fragmentedbar Chart.
I have added a style setter button for letting developers adjust the colors of Chart in real time development.  FragmentedBar Chart is ready for release in MIM Chart Lib version Alpha  1.0

You can find this sample code in MIMChartLib> HowToUseFiles >FragmentedBarTestClass.m with MIM Chart  Lib.

       /*Important here in the beginning*/
    /*This will init the Color Array*/
    [MIMColor InitFragmentedBarColors];
     isGradient is one of the property of FragmentedBarChart
     if fbarChartView.isGradient=YES; User any of following 2 methods to init the gradient colors
     if fbarChartView.isGradient=NO; User give method to init the plain colors
     Note: You can write your own colors method in MIMColor.m 
     and define your own colors.

     /* Note: You can have your own frame size as per your need. */
    NSString *csvPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableFragmentedBar.csv"];
    FragmentedBarChart *fbarChartView=[[FragmentedBarChart alloc]initWithFrame:CGRectMake(80, 40, 600, 400)];
    //Has to be any even number,Please put 0 if no clue. Or you can prefer to skip writing it as well like I have commented it.
    /*if yes this will display the style setting button.Keep clicking on Next button to view next color pattern. Once you like a particular color combination,
     you can feed that style number to and set needStyleSetter NO for release version*/
    /*It is provided only to help developer get better visualization of his chart in real time development*/
    /*Is set to YES if you will see gradient in fragments and make sure your colorarray has gradient colors*/
    /*If you dont define it, it is by default NO*/
    /*If you want, you can define the width of bar yourself.If not defined, it will auto-calculate and fit on the screen*/
    /*Here on, all important lines, need to be written*/
    /*Method below displayXAxisWithTitleFromColumn:Style:   , here style == 3*/
    /*More style available (style=1,2 or 3) you can refer given post to see what styles look like*/
    [fbarChartView readTitlesFromCSV:csvPath];
    [fbarChartView drawFragmentedBarGraph];
    [fbarChartView displayYAxis];
    [fbarChartView displayXAxisWithTitleFromColumn:-1 Style:3];
    [self.view addSubview:fbarChartView];


Following is what screen looks like with setting button visible. You can remove it by setting fbarChartView.needStyleSetter=NO;

Or Simple just don't write this line at all. It takes fbarChartView.needStyleSetter by default as NO.

What you can do with Next button and style value. Please read the comments in the code above.

I have set  barwidth to 40 by using fbarChartView.barWidth=40;
My Chart looks like following 


All the above screenshots are with gradients, let see if we use No gradient our screenshot looks like following. Please read comments in code above to know about how to turn On/Off the gradient.

Our data csv file looks like following. Kindly note the location of the file in project as well.

Entire Guide can be found HERE along with downloadables.


  1. I really like your writing style. Such a nice Post, Can’t wait for the next one.
    Dell Laptops