Contact Us Today! | vcare@wdmtech.com

WDMtech

One of the Most Sparkling Feature of vChart is that vChart can acquire chart data from different resources. Various methods to input chart Data are listed below.

  • Chart Data Manually
  • Chart Data from CSV
  • Chart Data Existing Database
  • Chart Data Other Database

1. Chart Data Manually

In this method, you can enter the chart data manually in the “Axes Parameters” section and can manually set the values of the field “Series Name”, can manually set the colour for the series , can set the horizontal values for the chart and can enter their values according to your need. You can also set the formatting to the columns of the Chart like Stroke color, Stroke Opacity, Stroke Width, Fill Color, Fill Opacity, text for columns.

2. Chart Data from CSV

The CSV import is a powerful feature of vChart which allows you to import chart data from an external CSV file. To ensure vChart reads the data in the file correctly, CSV file will contain the values comma separated. The Import from CSV feature only supports files which have UTF-8 encoding. UTF-8 encoding supports all writing systems around the world, including special Asian and European characters.

After choosing the “Chart Data from CSV” option for Chart data option field, some additional fields will be display based on your chosen option.

vChart Data from CSV

Choose the option For “Select CSV file Options” field, according to your need.

If you want to get the Chart data from a CSV file which stored on your local computer then select the “CSV file From Local Computer” option and if you want to get the Chart data from the CSV file which stored on remote server, choose the “Give Remote URL of CSV file” option

vChart Data from CSV

Depending upon your selection, some more additional fields will be appear to get more information.

After chosen “CSV file From Local Computer” option, Click on the browse button infront of the CSV file field and upload the CSV file from your local computer to import the CSV file

vChart Data from CSV

After chosen “Give Remote Url Of CSV file” option, enter the path of your remote CSV file in the Remote Url of CSV File field and click on “Get” Button.

vChart Data from CSV

Set the Data limit for the chart Data if you want to put some limit. If this field remains blank then all data will be imported to chart data.

Choose the option for Read Data From field from the list to set the direction whether you want to read the CSV file “From Top to Bottom” or “From Bottom to Top” direction.

vChart Data from CSV

After importing the Data form the CSV file, you can set which column values, you want used for Horizontal value for the Chart and which column values, you want used for the Series for the Chart.

vChart Data from CSV

Fields value under “Axes Parameters” section will be automatically set for the Chart Data after choosing the column for Horizontal Values, Series 1, Series 2 etc. You can apply the additional formatting to the columns of the Chart data using “Row Style” button.

3. Chart Data Existing Database

vChart allows you to select any existing database table where you can select any column for creating different Charts. In addition, you can write your custom MySQL queries to fetch data in order to generate charts.

After choosing the “Chart Data Existing Database” option for Chart data option field, some additional fields will be display based on your chosen option.

vChart Data Existing Database

You can fetch the data from the table OR can write your custom MySQL queries to fetch data in order to generate charts.

Fetch Data from Table: If you want to fetch the data from table then choose the option For “Select the table to get the data” field, according to your need. Set the table name from which table you want to get the Chart Data. After choosing the Table name, some additional fields will be display.

vChart Data Existing Database

Choose the option for “Select column for X Axis Values” field. This column values will be set to the “Horizontal Value” for the Chart under the “Axes Parameters” section.

Set the “Limit for value” field for the chart Data if you want to put some limit. If this field remains blank then all data from the table will be used as chart data.

Choose the option for “Ordering of Primery key” field to set the ordering either Ascending or Descending.

Choose the option for “Select Column For Group By” field to set the group by column.

vChart offering an interface to create complex queries and filters in a very easy way. You can put the your extra conditions and build additional queries to table by clicking on the “Extra Condition” Button. An Extra conditions Query Builder form will be display in pop up box to add your extra conditions rules. You can put as many conditions as you can. You can add Rules as well as add Groups. You are also able to delete any rule at any time. You can decide whether you want to pur your extra condition with “OR” operatior or “AND” operator. You can alos reset the extra Condition form. After putting your extra conditions, click on “Add SQL Condition” Button to add your extra conditions to your selected table to get the desired data for the Chart.

vChart Data Existing Database

After adding the extra conditions from pop up box, your extra condition or we can say additional query which added to main query will be display in the text area like this.

vChart Data Existing Database

Write Your SQL Query: If you want to write your custom MySQL queries to fetch data in order to generate charts, click on the “Write Your SQL Query” Button. A text area will be display with some notification saying that system will consider the first column for Horizontal value and except the first column, rest of the columns will be consider as series.

You can also include dynamic variables in your SQL query. You just need to enter variable name within curly braces. e.g. {catid}. {loggedinuserid} is reserved for Logged-in User

vChart Data Existing Database

Now you can add the series parameters for the chart data. Click on the “Add Series” Button to add a series and assign which table column will be used for that.

vChart Data Existing Database

Now a Pop box will be appear and ask you to Series Title. Set the “Series Title” field and choose the column to set as the Series for Chart Data. Click on Create Series Button to add this as a new series.

vChart Data Existing Database

You can also edit and delete your created series. You can set the colour of this series by series colour Field and can apply formatting to this series by clicking on the “Row Style” Button.

vChart Data Existing Database

4. Chart Data Other Database

vChart allows you to connect any external database or remote database and there you can select any column for different Charts parameters from that table.

After choosing the “Chart Data Other Database” option for Chart data option field, some additional fields will be display based on your chosen option.

In order to connect different database and to get the chart data from the other database, you will have to give the driver, hostname, username, password, database name and table prefix string.

Set the values for Driver Name, Host Name, User Name, Password, Database Name and Database Table Prefix Name. Click on the “Get Table” to get the tables of a particular remote database.

vChart Data Other Database

After connecting the remote database, some additional fields will be display and you have to fill those fields according to your need. You can fetch the data from the table OR can write your custom MySql queries to fetch data in order to generate charts.

Now the further method is same like method 3 i.e. “Chart Data Existing Database” so you can follow the “Chart Data Existing Database” method to fetch the chart data either from the table or by writing custom SQL query and set the series title, colour and formatting etc.