Graph from CSV file

1. Introduction

2. Installation

3. Graph properties

4. Display graph with a component templater

5. Display graph with a smart object

6. CSV file requirements

This component was designed to display the graph from CSV files. The component will display the data from the multiple columns.

Available two types of graphs:

• Bar graph with some groups and average data,

• Pie 3D graph,

1. CSVGraph.php - Copy this file into /intranet/common/classes
2. displaygraphbar.php - Copy this file into /intranet/csvgraph
3. displaygraphpie.php - Copy this file into /intranet/csvgraph
4. smart_csvgraph.php - Copy this file into /intranet/csvgraph
5. show_smartgraph.js - Copy this file into /intranet/csvgraph

JPGraph library should be copied to /intranet/csvgraph/jpgraph Download JPGraph library

3. For the both types of graphs we can/should specify the following properties:

• Id (integer, e.g: “1”)
  • default: if empty the script will generate random number,
• Doc Id (integer, e.g: “1291”)
  • default: there is not default value you have to spcify document id,
• File (string, e.g: “./../Revenue.csv”)
  • default: empty, you do not have to specify this path,
• Height (integer, e.g: “600”)
  • default: “700”,
• Width (integer, e.g: “500”)
  • default: “300”,
• Show legend (boolean, e.g: “false”)
  • default: “true”,
• Graph title (string, e.g: “Graph1”)
  • default: “Chart”,
• Ignore first row (boolean e.g: “0”)
  • default: “0”

If your file includes column names in the first row we must to set up ignorefirstrow attribute equals 1 otherwise 0. It is very important to display the correct graph. The data from the first row will be use to generate a legend otherwise the script will use default settings.

• Default column name (string, e.g: “Col “)
  • default: “Column “),

This value will be use if your CSV file does not have any column names.

• Graph type (string, e.g: “pie”)
  • default: “bar”),

To display graph with a component templater, paste the following component code anywhere on templater file and set up graph properties.

<component class="CsvGraph" doc_id="2" name="Chart1" ignorefirstrow="1" title="Quarterly Revenue" id="1" type="bar" file="" showlegend="true" width="700" height="300" >

To display graph with a smart object, paste the following component code anywhere on your edited page and set up graph properties.

<script type="text/javascript">
<!--
var smart_graph = {}
smart_graph.doc_id="12501";
smart_graph.id=1;
smart_graph.name="graph1";
smart_graph.type="bar";
smart_graph.width=500;
smart_graph.height=300;
smart_graph.showlegend=true;
smart_graph.ignorefirstrow=1;
smart_graph.title="Quarterly Revenue";
//-->
</script>   <script type="text/javascript"
  src="../csvgraph/show_smartgraph.js">
</script>

• Multiple columns with/without first row as a column names,
• Only one row with data to display,
• Below CSV file example for pie graph

• Multiple columns with/without first row as a column names,
• Multiple rows with a description in the first column for each row,
• Below CSV file example for bar graph