Chartifyis a PHP-based chart and graph generator, supporting pie (well, doughnut) charts, bar charts and line graphs. These can be used in your reports, homework, websites or whatever. Generate your chart, then copy or download the image.

Examples 🔗

Example 1: Doughnut chart showing ethnic groups of Belgium:

Example 2: Bar chart showing length (metres) of the longest Russian rivers:

Example 3: Line graph showing goals scored (green) and goals conceded (red) in various seasons by Forest Green Rovers.

Configurator 🔗

Visit the Chartify configurator page to customise and generate your own charts/graphs.

API 🔗

Charts are created by pointing an img element's src attribute to chart.php, passing along several query string parameters to customise the type, style and data of the chart.

Note: All colour params should be passed as 6-digit HEX codes e.g. FF0000.

General params - params that can be used regardless of chart type.

• type - the chart type - either 'pie' (pie/doughnut chart), 'bar' (bar chart) or 'graph' (graph).
• col_bg - the chart background colour (dflt: white).
• col_main{num} - the main colours to use for the chart - the colours of the pie pieces for a pie chart, the bars of the bar chart, or the lines of a graph. 10 such params can be passed, from col_main0 to col_main9. See Default data colours.

Pie chart params - params that can be used just for pie/doughnut charts:

• data - the pie chart data. This should be in the format item=amount, with multiple pairs separated by | (see Example 1).
• col_text - the colour of the item labels in the legend (default: "000000").
• col_shadow - the colour for the shadow, if any (see shadow_depth) (default: "E6E6E6").
• col_pct - the colour for the percentage indications in the chart legend (default: "787878").
• shadow_depth - the pixel depth of the shadow behind the chart (default: 10).
• legend_pos - the position of the chart legend, either next to it ("side"; default) or below it ("under").
• pie_diam - the pixel diameter of the doughnut (default: 150).
• ring_thickness_pct - the thickness of the doughnut ring as an percentile (integer) of the diameter (default: 45).
• legend_distance_from_pie - the distance in pixels of the legend from the pie (see also legend_pos).
• font_size - the font size to use (8-15) for the chart legend.

Bar chart params - params that can be used just for bar charts:

• data - the bar chart data. This should be in the format item=amount, with multiple pairs separated by | (see Example 2).
• col_text - the colour of the labels along the X and Y axes (default: "000000").
• increment - the increments (integer) between labels on along the Y-axis. This can be set to "auto" (default), meaning the script will try to work out the optimal interval value by itself.
• axis_rounding - the behaviour for rounding floating numbers, either "round" (round up if 5 or more, else down), "up" (always round up) or "down" (always down).
• x_axis_legend - the legend to be displayed under the X axis.
• x_axis_legend - the legend to be displayed to the left of the Y axis.
• gradients - whether to include a light (dark-based) gradient on the bars - "true" (default) or "false".
• height - the pixel height of the chart (default: 300).
• block_width - the pixel width of each bar in the chart (default: 30).
• axis_markers_size - the pixel length of the axis markers, i.e. the lines emanating beyond the chart boundaries to denote which line relates to which axis marker (default: 8).
• font_size_label - the font size (8-15) of the axis legends (default: 11).
• col_axis - the colour for the X and Y axes (default: "C8C8C8").
• space_between_blocks - the pixel space between each bar (default: 8).
• font_size_x - the font size (8-15) of the X-axis markers (default: 10).
• font_size_y - the font-size (8-15) of the Y-axis markers (default: 8).
• font_angle - the angle for the text markers along the X axis (default: -45).
• num_units_above_max - the number of units above the highest Y value to display, for extra spacing between the highest bars and the top of the chart. Applies only if y_axis_max not set.
• y_axis_max - the highest value to display on the Y axis. If omitted, this will inferred from the data and the num_units_above_max param.

Graph params- params that can be used just for line graphs:

Of particular note is the x_axis_type param - set this to "arbitrary" any time your X-axis data is not gradated - for example, if it shows years (see Example 3) rather than a numerical range.

• data - the graph data. This should be in the format x=y1,y2,y3, i.e. as many y* values as there are lines in the graph. Multiple pairs should be separated by | (see Example 3).
• col_text - the colour of the labels along the X and Y axes (default: "000000").
• x_axis_legend - the legend to be displayed under the X axis.
• x_axis_legend - the legend to be displayed to the left of the Y axis.
• width - the pixel width of the graph (default: 300).
• height - the pixel height of the graph (default: 300).
• axis_markers_size - the pixel length of the axis markers, i.e. the lines emanating beyond the chart boundaries to denote which line relates to which axis marker (default: 8).
• graph_line_thickness - the pixel thickness of the graph lines (default: 1).
• font_size_label - the font size (8-15) of the axis legends (default: 11).
• col_axis - the colour for the X and Y axes (default: "C8C8C8").
• x_axis_type - the type of data along the X axis - either "numerical" (default) or "arbitrary". Use the latter for all non-numerical use as - see the boxout above.
• num_units_above_max - the number of units above the highest Y value to display, for extra spacing between the highest bars and the top of the chart.

Data colours 🔗

Chartify supports 10 default colours for use in data - that is, the segments in pie/doughnut charts, the bars in bar charts, and lines in line graphs.

These are declared in chart.php in the get_data_colours() function and can be edited to taste. They can also be overriden at runtime via the col_main* parameters, where * is a number from 0-9.

If you have more than 10 data in your chart, you can extend this array to include more colours.