• This documentation is valid for:

Introduction

 

Let the GXchart 3.0 make sense of your data !

 

 

 


GXchart is an online service that instantly creates any chart you want to visualize. You define the chart and the GXchart server will return an image of it.
This service allows an efficient and very easily achieved presentation of data in a graphical format within an HTML page.
The service is oriented to GeneXus users who need to include data charts in their Applications.

The data, the chart type and other parameters can be passed either in a URL or in an XML file. The simplest way is to include the parameters in the URL, for example:

http://www.gxchart.com/service/drawchart.aspx?Title=Sales&Categories=Values:January,February,March,April&Series1=Values:Sales:70,40,90,20&Type=PIE3DEXPL&Width=400&Height=300&Legend=Right

will return the following image (in PNG format):

 

 

 

Usage

There are several ways to generate the URL to pass to the GXchart server:

List of Categories with Data Series
http://www.gxchart.com/service/drawchart.aspx?Categories=Values:January,February,March,April&Series1=Values:Purchases:70,40,90,20&Series2=Values:Sales:50,100,20,50&
Type=Bar3D&Width=600&Height=400&Legend=Right


The URL indicates:

    • Categories that should be charted (Categories=Values:January,February,March,April)
    • Data Series to indicate the values (Series1=Values:Purchases:70,40,90,20&Series2=Values:Sales:50,100,20,50)
    • Some parameters to indicate the chart format (Type, Width, Height, Legend)


XML Data Sources
http://www.gxchart.com/service/Drawchart.aspx?source1=http://www.gxchart.com/chart.xml&Height=400&Width=640&Type=Column3D

In this case, the origin of data for the chart is placed in an XML File (Source1=http://www.gxchart.com/chart.xml).
If you want to generate a XML file to use as origin of data for GXchart, you must generate a file with the format that chart.xml.

Combination of data of an XML Data Source and Data Series
http://www.gxchart.com/service/drawchart.aspx?Source1=http://www.gxchart.com/chart.xml&Series1=Source:1,Sales 1997&Height=400&Width=640&Type=Bar

GXchart from GeneXus
Generate a URL by taking the data from the XML file and use the Loadbitmap function to display the chart in a Web Panel form.

Event 'Chart'  
  &URL = "http://www.gxchart.com/service/drawchart.aspx?source1=http://www.gxchart.com/chart.xml&widht=500&height=310"  
  // &chart variable must be of Bitmap type.  
  &chart = LoadBitmap(&URL)  
 EndEvent  

 

 


See GXchart SDT.


GXchart as Web Service
GXchart can be called as a web service through SOAP. It receives all the parameters and returns a URL in which the resulting image can be invoked.
Images are valid for 10 minutes; after that, they are deleted from the server.
The WSDL for the web services can be invoked at: http://www.gxchart.com/service/webchart.asmx?wsdl
You can review the previous URL with GeneXus using WSDL Inspector Tool, and add a reference to be used from GeneXus objects with the following parameters:
 

Event 'ChartAsWebService'
    // &ws variable must be of org_tempuri.webchart data type. This data type is created when the WSDL is imported
    &URL=&ws.MakeChart("http://www.gxchart.com/chart.xml",500,310,"Columns","Sales","Left","Titles","Amounts in
US$","255,255,255","255,255,255","255,255,255","255,255,255",0,0,1,255,"jpg")
    // &chart variable must be of Bitmap type.
    &chart=loadbitmap(&URL)
EndEvent

More information about GXChart and GeneXus: http://www2.gxtechnical.com/portal/hgxpp001.aspx?15,4,61,O,S,0,,18941

Chart Configuration

The ConfigChart web panel lets you set up charts more easily. You can dynamically select the parameters and view the resulting chart immediately by selecting the Apply button. Also, the corresponding URL associated to the chart is shown to invoke it at any time.
To design charts using the ConfigChart, go to the following address: http://www.gxchart.com/app/hConfigChart.aspx
 

Properties and URL Parameters

 

 

Property Description Format Parameter Sample
Type Graph type String type

Bar, bar3D, BarStk, BarStk100, Column, Column3D, ColumnStk, ColumnStk100, Line, LineSmth, Area, Area3D, AreaStk, AreaStk100, Pie, PieExpl, Pie3D, Pie3dExpl, ColumnLine, BarLinesSmth,  Cone, Cylinder, Radar, RadarSmth, RadarArea, Spyder, SpyderArea, SpyderSmth

(Stk = stacked, Smth = smoth, Expl = explode)

Values XML with Categories and Series or URL for that XML (see XML Series schema) String source1 source1=http://www.gxchart.com/chart.xml
Title Main chart title String title title=1st Q. Sales
X Axis title Title to show on X axis String domtitle domtitle=Months
Y Axis title Title to show on Y axis String rantitle rantitle=US$
Width Image width in pixels Integer width width=600
Height Image height in pixels Integer height height=350
BG Color 1 Gradient fill background color for the top left corner RGB 8 bits (0-255) bgc1 bgc1=180,250,220
BG Color 2 Gradient fill background color for the bottom right corner RGB 8 bits (0-255) bgc2 bgc2=10,20,20
Chart BG Color 1 Gradient fill background color of the chart pane (only for X-Y chart types) in the top left corner RGB 8 bits (0-255) gbgc1 gbgc1=240,255,10
Chart BG Color 2 Gradient fill background color of the chart pane (only for X-Y chart types) in the bottom right corner RGB 8 bits (0-255) gbgc2 gbgc2=50,50,80
Draw Shadow Specify shadows' displayed status Boolean 1-0 shadow shadow=1
Draw Border Specify border style Boolean 1 (show border) - 0 (border none) border border=1
Show Values Specify whether each value should be displayed Boolean 1-0 values values=1
Opacity (Alpha) Alpha value for chart items Integer 8 bits (0-255) alpha alpha=200
Legend Position Legend position Left, Right, and None legend legend=left
Hatch Specify the Hatch Fill for black and white charts Integer 1-0 hatch hatch=1 (in this case you must use shadow=0)
Codec Specify the image type png (default value), bmp, gif, jpeg/jpg(recommended for Windows app.) codec codec=jpeg
Title Font Size Specify the title font size Integer titlefontsize titlefontsize=10
Category Font Size Specify the legends font size (Categories, Values, etc.) Integer categoryfontsize categoryfontsize=8
Category Order Specify the category order String (possible value: Reverse) categoryorder categoryorder=Reverse

Colors

Colors to be used in the different Data Series

HTML Colors (e.g.: Red, Blue, Green, Navy, etc.) or colors indicated with the RGB function, that can be expressed in hexadecimal format preceded by "0x" (e.g.: "0xFFFFFF" for the White color)  colors colors=pink, blue, olive (for 3 data series)
Scale Specify first value of the scale Integer (default value Scale = Auto) parameter Scale = 100 (first value of the scale will be 100) Scale = 0 (no scale)

 


Note: Category Order property also can be configured in the web.config file (for local installations).
You can add CategoryOrder property with Reverse value in the AppSettings section. In this case this configuration will be valid for all charts.

<appSettings>  
<add key="TempImagePath" value="C:\privateDirectory" />  
<add key="ChartImageURL" value="http://www.gxchart.com/service/getimage.aspx?name=" />  
<add key="CategoryOrder" value="Reverse" />
</appSettings>



Sample URL:
http://www.gxchart.com/service/Drawchart.aspx?type=column&Categories=Values:Dexters%20Lab,William%20Wallace,Yogui%20And%20Bubu%20Inc.,Marillion%20Trips,Moonquest%20Inc.,The%20Tick%20Motors&Series1=Values:Sales%201997:100,50,200,90,230,50&Series2=Values:Sales%201998:110,80,430,333,180,70&Series3=Values:Sales%201999:130,75,480,330,390,72&title=Book%20Sales&width=500&height=310&domtitle=Titles&rantitle=Amounts%20in%20U$S?=255&background=white&gbgc1=255,255,255&gbgc2=255,255,255&shadow=0&border=1&values=1&legend=lef&Hatch=1

http://www.gxchart.com/service/Drawchart.aspx?type=cone&Categories=Values:Dexters%20Lab,William%20Wallace&Series1=Values:Sales%201997:100,50&Series2=Values:Sales%201998:110,80&title=Book%20Sales&width=500&height=310&domtitle=Titles&rantitle=Amounts%20in%20U$S&bgc1=88,125,88&bgc2=243,243,243&gbgc1=255,255,255&gbgc2=255,255,255&shadow=1&border=1&values=1&legend=left&colors=pink,gray,olive

Chart Types

 

 

 

 

 

 


MoreChartTypes

Note: Pie and 3D Pie charts take up to 4 series.

GXchart Service local version

Obtain the local version here.

Technical support

 

 

GXchart does not have technical support, but ARTech offers a forum to exchange experiences about this product.