Topnew SVG Chart v 2019.11.11

Topnew SVG Chart is a single PHP file to generage SVG charts, including bar chart, line chart and pie chart.

The following is a brief help file to use Topnew SVG Chart

1. Quick Start

1. <?php
2. $data = [2012 => 100, 200, 300, 400, 480];
3. $init = []; // chart configurations
4. echo \Topnew\Chart::svg($data, $init);

And here is the same result of above output:

2. Configure the Chart: $init

• 2.1 - $init['chart'] = 'bar'; // line, pie, barV, barS

• Topnew SVG chart will produce a bar chart by default, so that you do not need to add $init['chart'] = 'bar'; Now let's make other types of charts:

  $init['chart'] = 'bar';

  bar: bar chart (default)
  pie: pie chart
  line: line chart
  barV: vertical multiple bars chart stackup
  barS: vertical multiple bars chart overlapping

  1. <?php
  2. $data = [2012=>100,200,300,400,480];
  3. $init['chart'] = 'line';
  4. echo Chart::svg($data, $init);
  1. <?php
  2. $data = [2012 => 100, 100, 100, 100, 200];
  3. $init['chart'] = 'pie';
  4. echo Chart::svg($data, $init);
  1. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
  2. $init['chart'] = 'bar';
  3. echo Chart::svg($data, $init);
  1. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
  2. $init['chart'] = 'barV';
  3. echo Chart::svg($data, $init);
  1. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
  2. $init['chart'] = 'barS';
• 2.2 - width, height, margins

• Topnew SVG Chart is responsive to the width of parent box which is calling. eg. Width of parent HTML element box is 500px, SVG Chart will scale to 500px in width.

  Topnew SVG Chart is default to 480px width * 250px height. If parent box width is bigger, SVG Chart will look smaller after zoom, and vice versa. The height of a pie chart is automatically calculated, it will ignore the height parameter.

  $init['w'] = 'fix'; also accepted to automatically calculate the with of a chart

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['w'] = 900;
  3. echo Chart::svg($data, $init);
  1. $data = [2012 => 100,200,300,400,480];
  2. $init['w'] = 300;
  3. $init['h'] = 100;

  You can edit the margins of each side: gapT, gapR, gapB, gapL means margin top, right, bottom and left. A positive number will increase the gap, a negative number will reduce the gap.

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['gapT'] = 20; // add 20px at top
  3. $init['gapR'] = 20;
  4. $init['gapB'] = 20;
  5. $init['gapL'] = -20; // reduce 20px at left
• 2.3 - title, xTitle, yTitle and align of titles
• 1. $data = [2012 => 100,200,300,400,480];
  2. $init['title'] = 'Title of the Chart';
  3. $init['xTitle'] = 'Title for xAxis';
  4. $init['yTitle'] = 'Title for yAxis';
  5. $init['titleAlign'] = 2; // center default
  6. $init['xTitleAlign'] = 3; // right
  7. $init['yTitleAlign'] = 1; // left if yTitle then bottom
• 2.4 - legend location and legend width

• By default legend will appear on the right side of the chart. There will be no legend if chart contains only one serial.

  1. $data = [2012=>100,100,100,100,200];
  2. $init['chart'] = 'pie';
  3. echo Chart::svg($data, $init);

  legend = T(op), R(ight) [default], B(ottom), 0 none

  legendW = px of legend width

  1. $data = [2012=>100,100,100,100,200];
  2. $init['chart'] = 'pie';
  3. $init['legend'] = 'R';
  4. $init['legendW']= 200;

  Developer Note: it looks like the legendW is buggy. Need more test.

• 2.5 - xAxis and yAxis

• xSkip = 5 means skip 5 labels between each two

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['xSkip'] = 1;

  xSkip = -5 when negative it means substr(xKey,-2) % -5 is true eg 5 10 15 ...

  1. $data = [1=>100,200,300,400,480,400,300,200,300,400,300];
  2. $init['xSkip'] = -5;

  xSkipMax will get xSkip = floor(xNum / xSkipMax) when you want to dynamically set xSkip

  xMin, xMax default to data min and max, unless specified. xMin and xMax will only work when xKey in {year, month, week, day, hour}. They are useful to print xAxis when data is missing.

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['xKey'] = 'year';
  3. $init['xMin'] = 2010;
  4. $init['xMax'] = 2018;

  ySum = 1 : sum up yVal while x moves, default 0

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['ySum'] = 1;

  xSum = 8 (substr(xAxis,0,8)) or 5,2 or -2 to call php::substr

  1. $data = ['2016-01-01'=>100, '2016-01-02'=>200, '2016-02-01'=>300, '2016-03-01'=>440];
  2. $init['xSum'] = 7;

  Developer Note: it looks like xSum plugin not activated.

  1. $data = [2012 => 100,200,300,400,480];
  2. $init['yUnit'] = 'MB'; // additional text after axisY label

  xFormat, yFormat = php:: substr|fm|to or format|decimal|,|. or date|M

  1. $data = ['2016-01'=>800, '2016-02'=>1200, '2016-03'=>1800, '2016-04'=>1600];
  2. $init['xFormat'] = 'date|M Y'; // xVal = date('M Y', xVal)
  3. $init['yFormat'] = 'format'; // yVal = format(yVal)
  1. $data = [2012 => 100,200,300,400,480];
  2. $init['xAngle'] = 45; // Angle on xAxis: -90 ~ 90
  3. $init['valShow']= 1; // Show value on chart
  4. //$init['valAngle'] = 90; // You can also rotate value -90 ~ 90

  When xKey is NOT {year, month, week, day, hour} you can sort xAxis labels

  1. $data = ['US'=>100, 'CN'=>200, 'AU'=>300, 'GB'=>480];
  2. $init['sort'] = 'x';

  You can also sort on yAxis labels. If there is only one serial, it will sort on yVal

  1. $data = ['US'=>100, 'CN'=>200, 'AU'=>300, 'GB'=>480];
  2. $init['sort'] = 'y';
• 2.6 - css and styles

• There are 11 default colors used by charts in the following order:

                       

  1. $init['color'] = 'fffccc,cccfff'; // add 2 colors at front
  2. $init['colorAdd'] = 'fffccc,cccfff'; // add 2 colors at end
  3. $init['colorDel'] = '0,2'; // delete color #0 and #2
  1. $init['css'] = 1; // cout default chart css style
  2. $init['style'] = '.chart-bg{fill:#eee}'; // add your own css style
• 2.7 - extra config for pie

• There are extra config for pie chart:

  1. $data = [2012=>100,100,100,100,200];
  2. $init['pieArc'] = -90; // rotate pie 0 ~ 360
  3. $init['pieStripe'] = 1; // add strips to pie
  4. $init['pieDonut'] = 1; // add donut style
  5. $init['piePct'] = 1; // include % after value

3. Data for Chart: $data

• 3.1 - default data format: sxy (serial, xAxis, yVal)

• Topnew SVG Chart accepts 4 types of data (array, string, SQL, json), each in 4 types of formats (sxy, xsy, xss, sxx).

  In above demos, we use the default: array(sxy) - Serial, xAxis, yVal. All other formats will be converted to the default data format at backend.

  $data['CN'][2012] = 100; // $data [ serial ][ x ] = y

  The array type:

  1. $data => [ 'CN' => [ 2012 => 100, 2013 => 240, ], 'US' => [ 2012 => 200, 2013 => 300, ], ];

  The SQL type:

  1. $data = 'SELECT team, year, count(*) AS qty FROM sales GROUP BY 1,2';
  2. $init['fmt'] = 'sql';

  The str type:

  1. $data = 'team,year,qty;CN,2012,100;CN,2013,240;US,2012,200;US,2013,300';
  2. $init['fmt'] = 'str';
  3. // $init['sepCol'] = ','; // default
  4. // $init['sepRow'] = ';'; // default

  The json type:

  1. $data = '{"CN":{"2012":100,"2013":240},"US":{"2012":200,"2013":300}}';
  2. $init['fmt'] = 'jso';

  It is easy to have another txt type, which reads a file into str. But too many types might be confusing. Will be added in the future if really needed.

  All above data renders into the same chart as following:

  sxy format allows max 3 cols each line, 4+ cols will be ignored.

• 3.2 - data format: xsy (xAxis, serial, yVal)

• You should use the default sxy format, but just in case you need SQL type in xsy format.

  xsy format allows max 3 cols each line, 4+ cols will be ignored.

  In order not to create confusing, we only demo the SQL type here. Though it is also working for array, string, json types.

  1. $data = 'SELECT team, year, count(*) AS qty FROM sales GROUP BY 1,2';
  2. $init['fmt'] = 'sql_xsy';

  Compare this chart with 3.1 sxy, you can see the serial and xAxis is swapped.

• 3.3 - data format: xss (xAxis, serial, serial, serial, ...)

• You should use the default sxy format, but just in case you need SQL type in xss format.

  There is no limit of cols in each line of xss format. xss actually means xssssss...

  Again we only demo the SQL type here. Though it is also working for array, string, json types.

  1. $data = 'SELECT substr(created,1,7) AS month, count(*) AS Hit, count(distinct ip) AS IP, count(distinct uid) AS UID FROM log WHERE year = 2016 GROUP BY 1';
  2. $init['fmt'] = 'sql_xss';
  3. $init['chart'] = 'line';
  4. $init['yFormat'] = 'format';
  5. $init['xFormat'] = 'Date|M';
• 3.4 - data format: sxx (serial, xAxis, xAxis, ...)

• sxx is a rare format, which can be found in odd SQL or xls files:

  This time we are going to demo the str type. Though it is also working for array, SQL, json types.

  1. $data = 'Year,Jan,Feb,Mar,Apr,May,Jun;2015,100,200,300,400,500,600;2016,150,250,350,450,550,650';
  2. $init['fmt'] = 'str_sxx';
• 3.5 - data format summary $data

• 1. Always use the default array + sxy when you do not have to use the rest string, SQL, json in xsy, xss, sxx.

  2. If you need SQL and return array result for chart, you can use db lib to convert:

  1. $sql = 'SELECT team, year, qty FROM sales';
  2. $data = $db->arr2($sql);
  3. // eg. $data[CN][2012] = 100;
  5. // use $db->arr2($sql) for sxy and xsy
  6. // use $db->arr($sql) for anything else eg xss, sxx
  8. $sql = 'SELECT year, qty, num, ip FROM sales';
  9. $data = $db->arr($sql); // xss
  10. // eg. $data[2012] = [qty=>100, num=>200, ip=>300];
  12. $sql = 'SELECT year, jan, feb, mar FROM sales';
  13. $data = $db->arr($sql); // sxx
  14. // eg. $data[2012] = [jan=>100, feb=>200, mar=>300];