Saturday, August 27, 2011

Complete Guide for Bar Chart (MIM Chart Lib)

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

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

     Init color array.
     You can create your own color array in MIMColor.m
    [MIMColor nonAdjacentGradient];
    NSString *csvPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableBar.csv"];
    BarChart *barGraph=[[BarChart alloc]initWithFrame:CGRectMake(50, 40, 700, 400)];
     isGradient =YES if color array has gradient colors
     isGradient = NO if color array has plain colors.
     This is basically the INDEX of color object in your COLOR ARRAY
     THis is the color which will be displayed on the bar chart
     It can be ANY number if isGradient=NO. 
     Should be an EVEN number if isGradient=YES. 
     It value is YES if values displayes on X-axis are in our case Jan, Feb i.e Names of the months
     MIM Chart Lib "Currently supports only string values" for X-axis for Bar Charts. so keep it YES.
     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 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
     You can define your own barWidth, 
     if not defined, MIM Chart lib finds out appropriate width automatically.
     If you are not sure, how much barwidth will fit into your screen, comment it like I did.
     Giving the columns from where MIM Chart lib will get the values of X and Y axis is important
     In this case, X-axis values are coming from 0th column
     and Y-axis values are coming from 4th column
     Columns indexing is like 0,1,2,3,4,5,6... note: it starts from 0.
    [barGraph readFromCSV:csvPath  TitleAtColumn:0  DataAtColumn:4];
    /*If you don't want to display labels on y-axis, comment this line*/
    [barGraph displayYAxis]; 
    /* 3 styles exist for x-axis labels (1,2 and 3)*/
    /*If you don't want to display labels on x-axis, comment this line*/

    /*To find out what different styles looks like refer to following post: */
    [barGraph displayXAxisWithStyle:3];
    /*Finally draw All*/
    [barGraph drawBarGraph];
    [self.view addSubview:barGraph];

You can change the color of bars with NEXT button, and set to the number displaying in front of style on screen. And to remove NEXT button,  barGraph.needStyleSetter=NO;
Its that simple !
Bar Chart with gradient

Bar Chart without gradient

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

  2. Your articles are always at the highest level. Good job, the editor of the article.
    Emergency Dentist Near Me