How to implement a CSS Chart

Adding your chart is pretty easy, not even 2 min and you are displaying your first CSS Chart! Simply follow the steps below. Please note, that this only works on PHP documents. If you want to use the charts on plain html files, you should use an iFrame or a crossdomain capable AJAX function.

Free use

CSS Chart Generator is free for use. No costs implied for the basic version. You can use it on any website.

The free version shows a copyright notice in the x-axis title, while the pro version is free from any backlinks or ads and has much more functionality.

PHP Solution explained

Open your web document and add the following lines of code to the place you wish to show the chart:

<?php
$chartData = @file_get_contents("http://www.artviper.net/css-chart-generator/chardraw.php?") ;
echo $chartData;
?>

Now, behind the question mark, add the parameters that your chart should show. The detailed list of parameters:

  • &w = total width of the complete chart ( limit: 350px in free version )
  • &h = total height of the complete chart ( limit: 250px in free version )
  • &vals = the values you want to display, comma separated ( limit 5 in free version )
  • &colors = colors of the single bars, hex notation, but omit the # sign, also there must be exact same amount of colors as bars
  • &bw = the width of a single bar
  • &barspc = spacing between the single bars
  • &bgchart = background color of the chart, hex notation, but omit the # sign
  • &fontcol = color of the font for the x and y title, hex notation, but omit the # sign
  • &fontsize = size of the font you wish to use
  • &xtitle = the title for the x-axis ( free version shows a backlink )
  • &ytitle = the title for the y-axis
  • &showvals = Want to display the values of the bars? Boolean, 0 or 1 allowed
  • &spenable = show background splitters ? Boolean, 0 or 1 allowed
  • &spdist = the distance in px between the background splitters
  • &spcol = color of the splitter, hex notation, but omit the # sign

So, simply use this information to build your own chart, or use the demo chart generator to ease the process of creating your chart. When done, simply copy the generated code into the file_get_contents() function.

DEMO STRING:

This is how it should look like ( demo values of the demo page used ):

<?php
$chartData = file_get_contents(""http://www.artviper.net/css-chart-generator/chardraw.php?&w=350&h=250&fontsize=10&ytitle=Welcome
&xtitle=CSS%20Chart%20Generator&vals=100,120,170,210,222&colors=900,e60,333,3a8ef6,cf0&bw=35&barspc=15&showvals=1
&bgchart=555&fontcol=000&spenable=1&spdist=25&spcol=222");
echo $chartData;
?>