Hi, I'm trying to read some values from a csv file using loadString, then parse them to float and display a chart using the giCentre library. However I get the ArrayIndexOutOfBoundException error on the lineChart.draw(..); line and not sure where it comes from. Thanks

Here's my code

import org.gicentre.utils.stat.*; 

XYChart lineChart;

String fileName = "32140";

//my 2 arrays used for x and y axis
float[] ms = new float[200];
float[] delta = new float[200];

void setup()
{
  size(1500,1000);
  String[] lines = loadStrings(fileName + "_clean.csv");  

  for(int i = 0; i < lines.length; i++){
    float[] fullList = parseFloat(split(lines[i], ','));
    ms[i] = fullList[1]; //only need values in column 1
    delta[i] = fullList[3]; //only need values in column 3
  }


  textFont(createFont("Arial",10),10);

  // Both x and y data set here.  
  lineChart = new XYChart(this);
  lineChart.setData(ms, delta);
  // Axis formatting and labels.
  lineChart.showXAxis(true); 
  lineChart.showYAxis(true); 
  lineChart.setMinY(0);

  lineChart.setYFormat("#####");
  lineChart.setXFormat("0000");

  // Symbol colours
  lineChart.setPointColour(color(180,50,50,100));
  lineChart.setPointSize(5);
  lineChart.setLineWidth(2);
}

// Draws the chart and a title.
void draw()
{
  background(255);
  textSize(9);
  lineChart.draw(15,15,width-30,height-30); //error here

  // Draw a title over the top of the chart.
  fill(120);
  textSize(20);
  text("Income per person, United Kingdom", 70,30);
  textSize(11);
  text("Gross domestic product measured in inflation-corrected $US", 
        70,45);
}

@tom_tm -- Based on your earlier code, I feel like perhaps your question is the wrong one to solve your problem. You are trying to put the geoMap into its own layer -- but it is already drawn from its own layer. Instead, you need to isolate scaling of different drawn elements, and/or isolate your scaling.

You haven't given an example of what kinds of scaling or zooming you are trying to do -- is it built-in to geomap, or separate -- and you haven't explained why you can't just:

1. pushmatrix
2. scale
3. draw map
4. popmatrix
5. draw unscaled text overlay.

Anyway, assuming that in addition to the above approach you need an independent "HUD" text layer, here is a working example:

import org.gicentre.geomap.*;
import org.gicentre.utils.move.*;

GeoMap geoMap;
PGraphics pg;

void setup()
{
  size(800, 400);
  geoMap = new GeoMap(this);  // Create the geoMap object.
  geoMap.readFile("world");   // Read shapefile.
  pg = createGraphics(width, height);
  hud(pg);
}

void draw()
{
  background(192, 128, 128);
  if (keyPressed) {
    pushMatrix();
    scale(2);
    geoMap.draw();
    popMatrix();
  } else {
    geoMap.draw();
  }
  image(pg, 0, 0);
}

void hud(PGraphics pg)
{
  pg.beginDraw();
  pg.clear();
  pg.fill(0, 127);
  pg.rect(0, 0, pg.width, 20);
  pg.fill(255);
  pg.text("Press space to zoom. This text is in an independent HUD layer", 10, 15);
  pg.endDraw();
}

Hi, I would like to have the geoMap.draw () into a separat PGraphics buffer. I tried several things but I couldn't push it into PGraphics.

Is this possible?

import org.gicentre.geomap.*;
import org.gicentre.utils.move.*;


GeoMap geoMap;
PGraphics pg;


void setup()
{
  size(800, 400);

  pg = createGraphics(800, 400);

  geoMap = new GeoMap(this);  // Create the geoMap object.
  geoMap.readFile("world");   // Read shapefile.


}

void draw()
{
  pg.beginDraw();
  pg.background(0,0); 

  pg.geoMap.draw();              

  pg.endDraw(); 



  noLoop();            
}

It would help if you provide an example. Here is my try starting from https://www.gicentre.net/utils/chart/

Kf

import org.gicentre.utils.stat.*;    // For chart classes.

// Displays a simple line chart representing a time series.

XYChart lineChart;
XYChart lineChart2;

// Loads data into the chart and customises its appearance.
void setup()
{
  size(500, 200);
  textFont(createFont("Arial", 10), 10);

  // Both x and y data set here.  
  lineChart = new XYChart(this);
  lineChart.setData(new float[] {1900, 1910, 1920, 1930, 1940, 1950, 
    1960, 1970, 1980, 1990, 2000}, 
    new float[] { 6322, 6489, 6401, 7657, 9649, 9767, 
    12167, 15154, 18200, 23124, 28645});

  // Axis formatting and labels.
  lineChart.showXAxis(true); 
  lineChart.showYAxis(true); 
  lineChart.setMinY(0);

  lineChart.setYFormat("$###,###");  // Monetary value in $US
  lineChart.setXFormat("0000");      // Year

  // Symbol colours
  lineChart.setPointColour(color(180, 50, 50, 100));
  lineChart.setPointSize(5);
  lineChart.setLineWidth(2);

  lineChart2 = new XYChart(this);
  lineChart2.setData(new float[] {1900, 1915, 1925, 1935, 1945, 1950, 
    1960, 1970, 1980, 1990, 2000}, 
    new float[] { 6372, 6539, 6451, 7707, 9699, 9817, 
    12217, 15204, 18250, 23174, 28695});
  // Axis formatting and labels.
  lineChart2.showXAxis(false); 
  lineChart2.showYAxis(false); 
  lineChart2.setMinY(0);

  lineChart2.setYFormat("$###,###");  // Monetary value in $US
  lineChart2.setXFormat("0000");      // Year

  // Symbol colours
  lineChart2.setPointColour(color(180, 255, 50, 100));
  lineChart2.setPointSize(3);
  lineChart2.setLineWidth(4);
}

// Draws the chart and a title.
void draw()
{
  background(255);
  textSize(9);
  lineChart.draw(15, 15, width-30, height-30);
  lineChart2.draw(50, 15, width-80, height-30);

  // Draw a title over the top of the chart.
  fill(120);
  textSize(20);
  text("Income per person, United Kingdom", 70, 30);
  textSize(11);
  text("Gross domestic product measured in inflation-corrected $US", 
    70, 45);
}

I am using XYChart from org.gicentre.utils.stat.XYChart.

Is it possible to create two lines with different data in one chart? If yes, someone has an example?

Well I haven't a clue what I am doing here. I downloaded Processing, watched some nice videos by The Coding Train, drew a nice thermometer on the screen and then attempted to draw a graph beside it, for real time graphing, first using giCentre and then grafica , but hit a wall with both. I guess I'm supposed to draw my own graphs too ???

Well then ................................ maybe if I break the problem down into pieces: I guess I need some sort of USB library and a separate graphing package. Since I've already installed giCentre, I'll continue with that. I'm not running across any really good tutorials on this package. If anyone knows of any, links are appreciated.

I haven't looked at 'grafica' as I saw someone suggesting the giCentre first. Being brand new to Processing, I just grabbed onto the first suggestion I saw. >>"Is this a processing(Java) sketch using serial data?">> Yes, if I understand the question correctly. A USB should be delivering data from a micro via a USB cable. I can format that data to be floating point or character strings.

Already downloaded and installed per original post. The historical FORUM posts on giCentre weren't useful. Of course I've been to their site and didn't find much in the way of information on how to use their products. Ideally a tutorial would have been of great help. They gave a couple of example functions but those examples crashed my program. I'll keep looking I guess.

One way to start is to check previous posts related to your topic: https://forum.processing.org/two/search?Search=gicentre

It is also common to provide link to a previous comment so people see where you are coming from. For instance, you could provide the link to the giCentre's suggestion.

I am not familiar with the giCentre but I can say that a good way to start with that library is by installing it via the library manager in your Processing IDE and then go to Filles>>examples and then go to Contributed libraries>>gicentreUtils and then run the examples you find there. The purpose of doing this exercise is two fold. You make sure your library is running properly and then you can also see a demonstration of what the library has to offer. Most people usually find an example suitable for their applications. Then, they make a copy and make suitable changes.

giCentre can make life easier for you if you find a suitable example. I also encourage to browse the library's documentation. A simple google search should guide you to their website.

There are other posts in the forum that provide code to graph data. Two links for example:

https://forum.processing.org/two/discussion/comment/79484/#Comment_79484

https://forum.processing.org/two/discussion/comment/88886#Comment_88886 [FOCUS on Feb 27's posts which shows Processing and arduino.

You don't need to know arduino in the last one. You need to focus on how the data is being manipulated, how it is being plotted. If you find a code that works for you, or it has potential, you can share it here in the forum and you should be able to get feedback based on your question and information you provide.

Lastly, Processing uses java. If you are using C, then you need to reconsider your strategy. If you are streaming data through the USB port, then you can manage this data as a serial input data, only if you have the drivers to simulate your USB as a serial port. We do not know much about your device and your interfaces.

I downloaded it and so far haven't gotten their line graphs to work or even display.

Please provide the example you are using and the error code and any info associated to that code if you are getting any.

Kf

I'm working with a PIC microcontroller in the C language. It acquires data from a temperature sensor, in numerical format or it can treat it as a character string. I'd like to display this on a laptop connected via a USB to my micro.Eventually, I'd like to send stored thermo profiles (routines) from the laptop back to the micro to control heaters.

My first inclination was to draw my own graphs, but I saw someone else on these forums suggesting giCentre. I downloaded it and so far haven't gotten their line graphs to work or even display. I'm not asking anyone to do my work for me , but perhaps someone can give me a rough sketch and some direction ? Thanks.

I tried installing the multisketch, but I think its missing its own library or its not available to download for some reason. The "Two sketches embedded in a single window" looked good. I've found the archive here: https://www.gicentre.net/utils/archive/
Version 3.4 mentions "The multisketch package (embedded sketches and slideshow) has been temporarily removed as it relied on Java-specific implementation of Processing 2 (the AWT)."
But every version before 3.4 includes it. How would I install it manually or do I need processing 2 instead of 3?

Oh, I misunderstood you, I get it now. I was trying to do it from within sketch 2 not sketch 1 and I thought you were doing the same on your end, my bad.
So now if I move sketch 2 inside the sketch 1 folder, it should pick out the segments from the same data folder if I ask it to using the Pimage, correct?
http://imgur.com/a/vE4qQ
Is what I have now.
I was thinking this https://www.gicentre.net/utils/multiwindow
might help to resolve that error, im still looking into it though.

@GoToLoop, I think it would be easier to actually combine sketch 1 and sketch 2 into one sketch file. That way you could just have one data folder where you load the images, and where the folders are created. I tried combining them myself but im getting a "duplicate method setup error" which Im assuming means that I can't have a "void setup" in sketch 1 as well as a "void setup" in sketch 2.
I figured out how to scale back the segments in sketch 2, so I am getting a proper image now: http://imgur.com/a/JCBmQ but the segments are still being assigned to the white portion of my hand picture. This is the hand image mentioned at the very top.
Do you mind pointing me in the right direction on how to combine sketch files?
I found https://www.gicentre.net/utils/multiwindow
Checking it out.

@leeoko1 -- Ah, I think I get it. You want your bar data to present like this:

I don't think this is possible using the API -- I think it may require a hack.

1. there are no right-aligned layout settings listed in the BarChart API http://gicentre.org/utils/reference/org/gicentre/utils/stat/BarChart.html
2. setReverseCategories works on categories (the transposed Y) -- not on the values http://gicentre.org/utils/reference/org/gicentre/utils/stat/BarChart.html#setReverseCategories-boolean-
3. you cannot reverse the inputs by setting setMinValue / setMaxValue on the transposed X axis -- if min>max nothing is displayed http://gicentre.org/utils/reference/org/gicentre/utils/stat/BarChart.html#setMinValue-float-

The hack:

Draw the BarChart mirrored using scale(-1,1):

void draw()
{
  background(255);
  scale(-1,1);
  translate(-width,0);
  barChart.draw(15,15,width-30,height-30); 
}

...however this also mirrors the axis label text, so it would require drawing several times: draw the x axis, then draw the y axis (shifted right), then draw the data with no axes or labels (mirrored). Awkward, but you could turn the whole three-step procedure into a function.

@jeremydouglass Thanks for the reply

after applying the transpose function from gicentre, the graph changes its axis, X axis = y and Y axis= x. The bars are drawn from left to right. I would like to have it drawn from right to left.

Is it possible to transpose the barcharts to the left instead of the right when transposeAxis(true)? Please help Example Code:

import org.gicentre.utils.stat.*;
void setup()
{
  size(300,200);

  barChart = new BarChart(this);
  barChart.setData(new float[] {0.76, 0.24, 0.39, 0.18, 0.20});

  // Scaling
  barChart.setMinValue(0);
  barChart.setMaxValue(1);

  // Axis appearance
  textFont(createFont("Serif",10),10);

  barChart.showValueAxis(true);
  barChart.setValueFormat("#%");
  barChart.setBarLabels(new String[] {"Cynthia","Daniel","Eli",
                                       "Fasil","Gertrude"});
  barChart.showCategoryAxis(true);

  // Bar colours and appearance
  barChart.setBarColour(color(200,80,80,150));
  barChart.setBarGap(4);

  // Bar layout
  barChart.transposeAxes(true);
}
void draw()
{
  background(255);
  barChart.draw(15,15,width-30,height-30); 
}

If it is not a requirement to write your own graph renderer from scratch then use a library -- either Grafica or the giCentre Utils "Chart".

• http://jagracar.com/sketches/defaultPlot.php
• https://www.gicentre.net/utils/chart

Example discussion:

• https://forum.processing.org/two/discussion/21222/interpolating-points-between-dates-on-a-graph

If you don't want to use a library and instead will be plotting your own graph from scratch then you may be interested in searching the forums for recent discussions related to these keywords:

"plot" "plotting" "graph" "graphing"

For example:

• https://forum.processing.org/two/discussion/19180/plot-graph

https://www.gicentre.net/geomap/

I have checked that the Table Men is not null and for some reason that target is null(but I don't understand why)

The actual thing has got 40 columns instead of 12. I have copied the header and the first 4 rows of data.

Many thanks

Country/Region/World ISO Sex 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014

Afghanistan AFG Men 19.47844827 19.53808995 19.59789939 19.65844556 19.72076313 19.78481453 19.85084724 19.9192174 19.9902131 20.06281388 20.13563768 20.20752221 20.27837123 20.34625175 20.40941512 20.46297612 20.50766189 20.5419083 20.56277773 20.57254058 20.59909744 20.6290308 20.66439575 20.69757962 20.73685294 20.77379915 20.80194467 20.85381958 20.90901423 20.95817052 21.00987443 21.05929068 21.11625593 21.17027834 21.23799826 21.30640465 21.3719749 21.44237223 21.5086472 21.56641901

Albania ALB Men 23.73478892 23.81212054 23.88995725 23.96830254 24.04696226 24.11090699 24.17786861 24.24501562 24.31165921 24.37529132 24.43716757 24.50007492 24.55849847 24.61230736 24.67119213 24.72081015 24.7417872 24.76108692 24.79467316 24.84130104 24.90494189 24.98045039 25.04798092 25.12918918 25.21935391 25.31584684 25.41747544 25.51476672 25.61000324 25.7032725 25.79514583 25.88617039 25.9785683 26.07097873 26.15785119 26.24095647 26.32010579 26.39507014 26.4649792 26.52991471

Algeria DZA Men 21.37254244 21.46797202 21.56539923 21.6672982 21.77219649 21.87589224 21.98136265 22.08816741 22.19660246 22.30482798 22.41118857 22.51219916 22.6078033 22.69829134 22.78842782 22.8756329 22.95875593 23.03953878 23.11395402 23.18224947 23.24975981 23.31544178 23.37688539 23.43837998 23.49709251 23.55214202 23.60744448 23.66489482 23.72553324 23.78569298 23.84304818 23.89572402 23.94758581 23.99747131 24.04496947 24.09122119 24.13508542 24.17762739 24.2180873 24.25830878

American Samoa ASM Men 29.00456338 29.28691508 29.56723838 29.84752846 30.12531312 30.38934527 30.64877218 30.90449073 31.15297212 31.39450662 31.62935138 31.85668373 32.071196 32.2745201 32.46316896 32.63751513 32.79058115 32.92051846 33.02689742 33.11274442 33.17474197 33.21359919 33.22868432 33.22794794 33.21055667 33.18340752 33.14602735 33.09892673 33.04599066 32.98369263 32.91580274 32.84282323 32.76662339 32.68912698 32.60405257 32.51870526 32.43223327 32.34683573 32.26077439 32.17584501

import org.gicentre.utils.stat.*;
import org.gicentre.utils.gui.*;
XYChart Chart;
Table Men ;
TextInput textInput;
float[] yearstoplot = new float[40];

    void setup()
    {
      size(1000, 1000);
      Men = loadTable ("Mendatare.csv","header");
      Chart =new XYChart(this);
      Chart.setMaxX(2015);
      Chart.setMinX(1974);
      Chart.setXFormat("####");
      Chart.setMaxY(30);
      Chart.setMinY(18);
      Chart.showXAxis(true);
      Chart.showYAxis(true);
      Chart.setPointColour(color(180,4, 110));
      Chart.setPointSize(5);
      Chart.setLineColour(color(180,4, 110));
      Chart.setLineWidth(2);
      textSize(20);
      PFont fonttextbox = createFont("BodoniMT-48",14);
      textInput= new TextInput(this,fonttextbox,14);

     for (int i=0; i<yearstoplot.length; i++)
      {
        yearstoplot[i] = (i+1975);
      }
      println(yearstoplot); 

      if (Men!=null) // check that men is not null 
      {
        println(12345);
      }

    }


    void keyPressed () 
    {
     textInput.keyPressed();

     if  (keyCode ==ENTER)
      {
             String countrytoplot = textInput.getText();

             TableRow target = Men.findRow("countrytoplot", "Country/Region/World"); // here is the problem
             print(countrytoplot); // input is produced 
             if (target !=null)
             {
               print(23456); // nothing is printed here 
             }

             float x0 = target.getFloat(3);  //get value from column 3
             float x1 = target.getFloat(4);
             float x2 = target.getFloat(5);
             float x3 = target.getFloat(6);
             float x4 = target.getFloat(7);
             float x5 = target.getFloat(8);
             float x6 = target.getFloat(9);
             float x7 = target.getFloat(10);
             float x8 = target.getFloat(11);
             float x9 = target.getFloat(12);
             float x10 = target.getFloat(13);
             float x11 = target.getFloat(14);   
             float x12 = target.getFloat(15);
             float x13 = target.getFloat(16);
             float x14 = target.getFloat(17);
             float x15 = target.getFloat(18);
             float x16 = target.getFloat(19);
             float x17 = target.getFloat(20);
             float x18 = target.getFloat(21);
             float x19 = target.getFloat(22);
             float x20 = target.getFloat(23);
             float x21 = target.getFloat(24);
             float x22 = target.getFloat(25);
             float x23 = target.getFloat(26);
             float x24 = target.getFloat(27);
             float x25 = target.getFloat(28);
             float x26 = target.getFloat(29);
             float x27 = target.getFloat(30);
             float x28 = target.getFloat(31);
             float x29 = target.getFloat(32);
             float x30 = target.getFloat(33);
             float x31 = target.getFloat(34);
             float x32 = target.getFloat(35);
             float x33 = target.getFloat(36);
             float x34 = target.getFloat(37);
             float x35 = target.getFloat(38);
             float x36 = target.getFloat(39);
             float x37 = target.getFloat(40);
             float[] datatoplot1 = {x0,x1,x2,x3,x4,x5,x6,x7,x8,x9,x10,x11,x12,x13,x14,x15,x16,x17}; //aggregate the values 
             float[] datatoplot2= {x18,x19,x20,x21,x22,x23,x24,x25,x26,x27,x28,x29,x30,x31,x32,x33,x34,x35,x36,x37};
             float[] datatoplot = concat(datatoplot1, datatoplot2);
             Chart.setData(yearstoplot,datatoplot);
      }     
     }

    void draw()
    {

      background(255);


      fill(0);
      textAlign(CENTER);
      text("Obesity over the years for countries",300, 20);

      strokeWeight(2.0);
      stroke(40);
      fill(0,200);
      rect(770,20,215,60,8);
      textAlign(RIGHT);
      fill(0);
      textSize(10);
      text("Please type in a country name", width-50,30);
      textInput.draw(780,40);
      Chart.draw(30,80,width-400,height-300);
    }