Monday, August 29, 2011

Complete Guide for Line Chart Chart (MIM Chart Lib)

So our data sheet looks like following screenshot which I want to plot using MIM Chart lib - Line Graph. We want to plot Per Capita Income of India, USA, China, Germany yearwise.









If you don't give which column specifically you want to draw,give value of valueColumnsinRange  as nil , It will plot all the columns on the Line graph.

      [MIMColor InitColors];
    NSString *csvPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTable2.csv"];

    LineGraph *lineGraph=[[LineGraph alloc]initWithFrame:CGRectMake(50, 40, 600, 400)];
    lineGraph.needStyleSetter=YES;
    lineGraph.xIsString=YES
    lineGraph.anchorType=CIRCLEFILLED; //VIEW OTHER anchorType
    [lineGraph readFromCSV:csvPath valueColumnsinRange:nil]; 
    [lineGraph displayYAxis];
    [lineGraph displayXAxisWithStyle:3]; //VIEW OTHER styles FOR X-Axis Labels
    [lineGraph drawWallGraph];
    [self.view addSubview:lineGraph];


Result:


------------------------------------------------------------------------------------------------------------------------------------------------

If you give which column specifically you want to draw,give value of valueColumnsinRange  as [NSArray arrayWithObjects:@"1",@"3", nilwill have array of all valid columns you want to draw , It will plot those the columns on the Line graph.



      [MIMColor InitColors];

    NSString *csvPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTable2.csv"];
    LineGraph *lineGraph=[[LineGraph alloc]initWithFrame:CGRectMake(50, 40, 600, 400)];
    lineGraph.needStyleSetter=YES;
    lineGraph.xIsString=YES
    lineGraph.anchorType=DEFAULT //OTHER anchorType
    [lineGraph readFromCSV:csvPath valueColumnsinRange:[NSArray arrayWithObjects:@"1",@"3", nil]];
    [lineGraph displayYAxis];
    [lineGraph displayXAxisWithStyle:3]; //OTHER styles FOR X-Axis Labels
    [lineGraph drawWallGraph];
    
    [self.view addSubview:lineGraph];



-------------------------------------------------------------------------------------------------------------------------------------------------------
If you have data sheet with x and y int values only as shown in this sheet. You want to plot x Vs. y, x Vs. y1 and x Vs. y2.






You can use following code. You give array of columns for x-axis separately and array of columns for y-axis values separately. Its important to have same number of elements in array for x-axis and y-axis.

      [MIMColor InitColors];
    NSString *csvPath2 = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableLinesWithIntOnly.csv"];
    
    LineGraph *lineGraph=[[LineGraph alloc]initWithFrame:CGRectMake(50, 40, 600, 400)];
    lineGraph.needStyleSetter=YES
    lineGraph.xIsString=NO
    lineGraph.anchorType=SQUAREFILLED //OTHER anchorType
    [lineGraph readFromCSV:csvPath2 xInColumn:[NSArray arrayWithObjects:@"0",@"0",@"0", nil] yInColumn:[NSArray arrayWithObjects:@"1",@"2",@"3", nil]];
    [lineGraph displayYAxis];
    [lineGraph displayXAxisWithStyle:3]; //OTHER styles FOR X-Axis Labels
    [lineGraph drawWallGraph];
    [self.view addSubview:lineGraph];
    





-------------------------------------------------------------------------------------------------------------------------------------------------
If you have data sheet of following type where you want to plot Month Vs. Income and Month Vs. Expense on the same line graph.


Following code will give you output as shown in the screenshot below.

      [MIMColor InitColors];
    NSString *csvPath1 = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableBar.csv"];    
    LineGraph *lineGraph=[[LineGraph alloc]initWithFrame:CGRectMake(50, 40, 600, 400)];
    lineGraph.needStyleSetter=YES;
    lineGraph.xIsString=YES
    lineGraph.anchorType=CIRCLEBORDER //OTHER anchorType
    [lineGraph readFromCSV:csvPath1 titleAtColumn:0 valueInColumn:[NSArray arrayWithObjects:@"4",@"8", nil]];
    [lineGraph displayYAxis];
    [lineGraph displayXAxisWithStyle:3]; //OTHER styles FOR X-Axis Labels
    [lineGraph drawWallGraph];
    
    [self.view addSubview:lineGraph];

Resulting output view



-----------------------------------------------------------------------------------------------------------------------------------------------
More details about the code used above in XCode project> HowToUseFiles > TestLineClass.m :



       /*
     
     Line Graph supports array of plain colors only.
     Gradient colors are not supported yet.
     
     */
    [MIMColor InitColors];
    
    
    /*These are 3 different types of data files which can be read by MIM Lib to create Line Graph*/
    NSString *csvPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTable2.csv"];
    NSString *csvPath1 = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableBar.csv"];
    NSString *csvPath2 = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"myTableLinesWithIntOnly.csv"];
    
    LineGraph *lineGraph=[[LineGraph alloc]initWithFrame:CGRectMake(50, 40, 600, 400)];
    
    
    /*
     
     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 lineGraph.style in next line of code and set needStyleSetter NO for release version
     It is provided only to help developer get better visualization of his chart in real time development
     */
    
    lineGraph.needStyleSetter=YES;
    
     /* 
     This is basically the INDEX of color object in your COLOR ARRAY
     THis is the color of lines which will be displayed on the line graph
    It can be any index number of your array.Note it goes in the loop.
     */
    lineGraph.style=10; 
    
    
    
    //NO only for third kind of data file(csvPath2) otherwise YES
    //lineGraph.xIsString=YES; 
    lineGraph.xIsString=NO
    
    
    
    /*
     
     SQUAREFILLED,
     SQUAREBORDER,
     CIRCLEFILLED,
     CIRCLEBORDER,
     DEFAULT,
     NONE.
     
     If you don't define it, By default it will be CIRCLEBORDER
     
     */
    lineGraph.anchorType=NONE;
    

    //case 1.1:
    //[lineGraph readFromCSV:csvPath valueColumnsinRange:nil];
    
    //case 1.2:
    //[lineGraph readFromCSV:csvPath valueColumnsinRange:[NSArray arrayWithObjects:@"1",@"3", nil]];
    
    
    //case 2:
    //[lineGraph readFromCSV:csvPath1 titleAtColumn:0 valueInColumn:[NSArray arrayWithObjects:@"4",@"8", nil]];
    
    
    //case 3:
    //Note [xInColumn array count]= [yInColumn array count], As the MIM Chart Lib maps x and y values in them.
    [lineGraph readFromCSV:csvPath2 xInColumn:[NSArray arrayWithObjects:@"0",@"0",@"0", nil] yInColumn:[NSArray arrayWithObjects:@"1",@"2",@"3", nil]];
    
    
    
    //If you want to display the values on x axis.
    [lineGraph 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: */
    [lineGraph displayXAxisWithStyle:3];
    
    
    //Finally draw them
    [lineGraph drawWallGraph];
    
    [self.view addSubview:lineGraph];


Entire Guide can be found HERE along with downloadables.

3 comments:

  1. Hi !
    The library is awsome and i integrated with my iOS project .Played with bar chart and easily got it working.However, i am confused with class name 'LineGraph' here in above example.I could not find this class in Library sourec code OR samples .Is it something to be subclassed OR i am using some odd library resources ?

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

    ReplyDelete