KupoChart 0.1.5 Documentation: 2D Line Charts (X/Y)

• Required Parameters
  • cht: Chart type
  • chd: Chart data
  
  
• Optional Parameters
  • chs: Chart size (width and height)
  • chco: Chart colours / colors
  • outputtype: Output type (PNG or SVG)
  • xaxis: X axis type
  • yaxis: Y axis type
  • xdatefmt: X axis date format
  • ydatefmt: Y axis date format
  • dateint: Date label interval
  • xlabelangle: X axis label angle
  • ylabelangle: Y axis label angle
  • xpad: Left and right padding
  • ypad: Top and bottom padding
  
  
• Examples

Required Parameters

To graph a 2D line (X/Y) chart, you must pass the following required parameters:

• cht:
  Chart type. Must be set to 'lxy'.



• chd:
  Chart data. This is a string of pipe-delimited value sets, alternating between sets of X coordinates and sets of Y coordinatepes. The value sets are separated by pipes (i.e. '|'). The whole string is preceded by 't:', indicating 'text' data type. Support for other data types will be added later.
  
  Example: t:0,20,30,50|10,20,30,40|0,20,30,50|30,25,38,62
  
  This example corresponds to two lines. The first line is specified by 0,20,30,50|10,20,30,40 and corresponds to the following series of points:
  
  
  (0,10); (20,20); (30,30); (50,40)
  
  The second line is specified by 0,20,30,50|30,25,38,62 and corresponds to the following series of points:
  
  
  (0,30); (20,25); (30,38); (50,62)

Optional Parameters

When graphing a pie chart, one may pass the following optional parameters:

• chs:
  Chart size, in pixels. In the form WIDTHxHEIGHT. Maximum size is 2400x1200 by default. Default size is 120x120 by default.
  Example: chs=200x200
  
  [Back to top of page]



• chco:
  Chart colours. This is a string of comma-delimited colours. These may be HTML-style hex colours (e.g. 'FFFF00'), named colour entities (e.g. 'yellow'), or a mix of both. When using hex colours, do not include the hash or pound sign (i.e. use '00FFAA' instead of '#00FFAA').
  Example: chco=220099,7733DD,violet,purple,indigo
  
  If no colours are provided, the following default colours will be assigned, in this order (read from left to right, top down):
  
  
  [Back to top of page]


• outputtype:
  Output type. Acceptable values are:
  
  • png: Output a PNG image. This is the default.
  • svg: Output a SVG (Scalable Vector Graphics) file. Note that SVG support presently lags somewhat behind PNG support.

  Example output: PNG vs. SVG
  PNG, 125x125 pixels	SVG, nominally 125x125 (scalable)

  [Back to top of page]



• xaxis and yaxis:
  Set to date to indicate that the X axis or Y axis consists of Un*x-style timestamps, which are to be interpreted and displayed as dates.
  Example: xaxis=date
  [Back to top of page]



• xdatefmt and ydatefmt:
  If xaxis and/or yaxis are set to date (see above), sets the format that will be used to display said dates. Consult the manual to PHP's date() function for detailed information on the available fields.
  
  By default, this format defaults to 'M-d-Y'.
  
  Some commonly used fields are listed here for your convenience:
  
  • m: The number of the month, from 01 to 12
  • M: The name of the month, abbreviated, from Jan to Dec
  • d: The day of the month, from 01 to 31
  • y: The year, two digits (e.g. '08' for 2008)
  • Y: The year, four digits (e.g. '2008')
  • h: The hour, from 01 to 12
  • H: The hour, from 01 to 23
  • i: The minutes, from 01 to 60
  • s: The seconds, from 01 to 60
  • a: 'am' or 'pm', as appropriate
  • A: 'AM' or 'PM', as appropriate
  
  Example 1: xdatefmt=M.d (This would format X-axis timestamps like 'Jan.01' or 'Dec.15'.)
  Example 2: xdatefmt=m-d-y H:i (This would format X-axis timestamps like '05-23-08 16:32'.)
  [Back to top of page]



• dateint:
  If xaxis and/or yaxis are set to date (see above), sets the interval (in seconds) that you would like dates/times labeled at. In other words, setting this value to 3600 (3600 seconds, i.e. one hour) would request a gridline and a label be placed on any date axis at each hour. Note that there is no default. By default, the underlying Image_Graph system chooses where to place labels and gridlines.
  
  Set this value to 'all' to ask KupoChart to mark every X data point given.
  
  Example: dateint=86400 (This would ask KupoChart to place a mark on any date-based axes every 1 day, or 86,400 seconds)
  [Back to top of page]



• xlabelangle and ylabelangle:
  Allows you to change the angle at which axis labels on the X and/or Y axes are printed. Presently, due to limitations/bugs in the underlying Image_Graph software, only multiples of 90 are accepted.
  Example: xlabelangle=90 (This would cause labels on the X axis to be rotated by 90 degrees.)
  [Back to top of page]



• xpad:
  Sets the padding on the left and right sides of the plot area. Values are in pixels. This setting is useful if labels on the X axis are getting cut off by the left and/or right edges of the graph.
  [Back to top of page]



• ypad:
  Sets the padding on the top and bottom sides of the plot area. Values are in pixels.
  [Back to top of page]

Examples

The following are several real examples of pie chart output using KupoChart.

• Small line chart, two lines, default colours, PNG output:
  kupochart.php?chs=250x125&cht=lxy&chd=t:10,20,30,40,50|5,6,9,11,13|10,20,30,40,50|9,11,15,14,19
  
  



• Medium-sized line chart, one line, user-specified colour, SVG output:
  kupochart.php?chs=500x300&cht=lxy&chd=t:1,2,3,4,5,6,7,8,9|1,3,2,5,4,6,5,13,9&chco=00aaff&outputmode=svg