Topnew SVG Chart 5.5

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

09 10 11 12 13 14 15 16 17 18 24000 18000 12000 6000 Daily Live Web Traffic for Topnew.net 10833 14610 9747 14668 18845 19431 21350 16845 22316 4620 2018-12-0910833 2018-12-1014610 2018-12-119747 2018-12-1214668 2018-12-1318845 2018-12-1419431 2018-12-1521350 2018-12-1616845 2018-12-1722316 2018-12-184620

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

1. Quick Start

1.1 Download Topnew SVG Chart 5.5.5 - 2016-05-05

chart55.zip - 9k (9,084 bytes) : Download now
md5sum: 3006c90a673e6d4766f15efdece00423

What's new in 5.5.5:
Mouseover show label, Pie show value and %, line show value, new init[xSkipMax]

1.2 Unzip the single file and upload to any where of your site.

1.3 Method 1 - Direct Call
eg. test.com/chart.php?data=Year,Sales;2012,100;2013,200;2014,300;2015,400;2016,480

1.4 Method 2 - Use PHP include method

  1. <?php
  2. include 'chart.php';
  3. $data = [2012 => 100, 200, 300, 400, 480];
  4. $init = []; // chart configurations
  5. cms_chart($data);

And here is the same result of above 2 method calls:

2012 2013 2014 2015 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480

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. include 'chart.php';
    3. $data = [2012=>100,200,300,400,480];
    4. $init['chart'] = 'line';
    5. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480
    1. <?php
    2. include 'chart.php';
    3. $data = [2012 => 100, 100, 100, 100, 200];
    4. $init['chart'] = 'pie';
    5. cms_chart($data, $init);
    2012 2013 2014 2015 2016
    1. include 'chart.php';
    2. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
    3. $init['chart'] = 'bar';
    4. cms_chart($data, $init);
    2015 2016 500 400 300 200 100 Import Export 2015Import : 100Export : 200 2016Import : 300Export : 480
    1. include 'chart.php';
    2. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
    3. $init['chart'] = 'barV';
    4. cms_chart($data, $init);
    2015 2016 800 600 400 200 Import Export 2015Import : 100Export : 200 2016Import : 300Export : 480
    1. include 'chart.php';
    2. $data = ['Import'=>[2015=>100,300], 'Export'=>[2015=>200,480]];
    3. $init['chart'] = 'barS';
    4. cms_chart($data, $init);
    2015 2016 500 400 300 200 100 Export Import 2015Export : 200Import : 100 2016Export : 480Import : 300
  • 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. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480
    1. $data = [2012 => 100,200,300,400,480];
    2. $init['w'] = 300;
    3. $init['h'] = 100;
    4. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480

    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
    6. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480
  • 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
    8. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 Title of the Chart Title for xAxis Title for yAxis 2012100 2013200 2014300 2015400 2016480
  • 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. cms_chart($data, $init);
    2012 2013 2014 2015 2016

    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;
    5. cms_chart($data, $init);
    2012 2013 2014 2015 2016

    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;
    3. cms_chart($data, $init);
    2012 2014 2016 500 400 300 200 100 2012100 2013200 2014300 2015400 2016480

    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;
    3. cms_chart($data, $init);
    5 10 500 400 300 200 100 1100 2200 3300 4400 5480 6400 7300 8200 9300 10400 11300

    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;
    5. cms_chart($data, $init);
    2010 2011 2012 2013 2014 2015 2016 2017 2018 500 400 300 200 100 20100 20110 2012100 2013200 2014300 2015400 2016480 20170 20180

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

    1. $data = [2012 => 100,200,300,400,480];
    2. $init['ySum'] = 1;
    3. cms_chart($data, $init);
    2010 2011 2012 2013 2014 2015 2016 2017 2018 1600 1200 800 400 20100 20110 2012100 2013300 2014600 20151000 20161480 20171480 20181480

    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;
    3. cms_chart($data, $init);
    2016-01-01 2016-01-02 2016-02-01 2016-03-01 500 400 300 200 100 2016-01-01100 2016-01-02200 2016-02-01300 2016-03-01440

    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
    3. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 MB 400 MB 300 MB 200 MB 100 MB 2012100 MB 2013200 MB 2014300 MB 2015400 MB 2016480 MB

    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)
    4. cms_chart($data, $init);
    Jan 2016 Feb 2016 Mar 2016 Apr 2016 2,000 1,600 1,200 800 400 2016-01800 2016-021,200 2016-031,800 2016-041,600
    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
    5. cms_chart($data, $init);
    2012 2013 2014 2015 2016 500 400 300 200 100 100 200 300 400 480 2012100 2013200 2014300 2015400 2016480

    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';
    3. cms_chart($data, $init);
    AU CN GB US 500 400 300 200 100 AU300 CN200 GB480 US100

    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';
    3. cms_chart($data, $init);
    GB AU CN US 500 400 300 200 100 GB480 AU300 CN200 US100
  • 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
    6. cms_chart($data, $init);
    2012 2013 2014 2015 2016

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:

    2012 2013 300 240 180 120 60 CN US 2012CN : 100US : 200 2013CN : 240US : 300

    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';
    CN US 300 240 180 120 60 2012 2013 CN2012 : 1002013 : 240 US2012 : 2002013 : 300

    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';
    6. cms_chart($data, $init);
    Jan Feb Mar Apr May Jun 16,000 12,000 8,000 4,000 Hit IP UID JanHit : 8,000IP : 5,000UID : 3,000 FebHit : 10,000IP : 6,000UID : 3,100 MarHit : 12,000IP : 7,000UID : 3,200 AprHit : 13,000IP : 8,000UID : 4,000 MayHit : 14,000IP : 9,000UID : 3,400 JunHit : 15,000IP : 9,500UID : 4,000
  • 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. cms_chart($data, $init);
    Jan Feb Mar Apr May Jun 800 600 400 200 2015 2016 Jan2015 : 1002016 : 150 Feb2015 : 2002016 : 250 Mar2015 : 3002016 : 350 Apr2015 : 4002016 : 450 May2015 : 5002016 : 550 Jun2015 : 6002016 : 650
  • 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 cms_db functions to convert:

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