ElegantJ Charts Library – Programmers’ Guide
User Manual - Version 1.0.03
Table of Content
3.1.2 Different
Chart Types and Sub Types
4 Chart Type Selection Guidelines
5.2.1 Installing
on Windows 95/98
5.2.2 Installing
on Windows NT/2000/XP
5.2.3 Installing
on Unix/Linux
5.3.1 Adding
ElegantJ Charts to Borland JBuilder
5.3.2 Adding
ElegantJ Charts to Sun Java Studio Creator IDE
5.3.3 Adding
ElegantJ Charts to NetBeans IDE
5.3.4 Adding
ElegantJ Charts into Eclipse Editor
5.3.5 Adding
ElegantJ Charts into Servoy Developer
5.4 Getting
and Using the License Key
5.4.2.1 Configuring with Graphical User Interface of IDE
5.4.2.2 Configuring Directly within
Source Code
6 ElegantJ Charts Architecture
6.1 Working
with Different Java Architectures
6.1.4 Java Application or Applet (Java Standard Edition)
6.2 Working
with Different Data Sources
6.2.3 Data
Access Through HTTP
7 Interoperability and Integration with
XML
7.3 Introduction
to the EJXML Format
7.4 Introduction
to EJXML Data Format
8.1.2.1 Installing
on Windows 95/98
8.1.2.2 Installing
on Windows NT/2000/XP
8.1.2.3 Installing
on Unix/Linux
8.1.3 Running
the ElegantJ Charts Designer
8.2 ElegantJ
Charts Designer Features
9.1.1 How to
Select the Charts Sub Type?
9.1.2 How to
Enable Charts Data Sorting?
9.1.3 How to
Select Font Name, Type and Size?
9.1.4 How to Set
Chart Size (Width and Height)?
9.1.5 How to
Enable/Disable Chart Drill-Down Effect?
9.1.6 How to
Choose From Various Display Formats To Show Formatted Data On Chart?
9.1.7 How to
Export Chart in GIF or JPEG Formats?
9.1.9 How to Set
the 3D Horizontal Offset?
9.1.10 How to
Set the 3D Vertical Offset?
9.2.1.1 How
to Set Chart Background Visible?
9.2.1.2 How
to Set Chart Background Color?
9.2.1.3 How
to Set Gradient Effect (Linear/Conical/ Square/Radial)?
9.2.2.1 How
to Set Border Effect (None/Solid/Dash/Dot/ DashDot/DashDotDot/Raised/Lowered)?
9.2.2.2 How
to Set Chart Background Visible?
9.2.2.3 How
to Set Chart Background Color?
9.2.2.4 How
to Set Background Image?
9.2.2.5 How
to Use Image Rotation (Horizontal/Vertical/ Both) Feature?
9.2.2.6 How
to Select Image Display Pattern (Center/ Stretch/Tiled)?
9.2.3.1 How
to Use MouseOver Effect Feature?
9.2.3.2 How
to Use Macro-Enabled MouseOver Text Feature?
9.2.3.3 How
to Use MouseOver Text Alignment (Top/ Center/Bottom)?
9.2.3.4 How
to Set Text Font, Foreground, and Background?
9.2.3.5 How
to Select Shadow Effect (None/Glow/Fade/ Hard)?
9.2.3.6 How
to Set Border Effect (None/Solid/Dash/Dot/ DashDot/DashDotDot/Raised/Lowered)?
9.2.4.1 How
to Set Macro Enabled Text?
9.2.4.2 How
to Set Text Show Interval?
9.2.4.3 How
to Set Text Visible Interval?
9.2.4.4 How
to Set Text Font, Foreground and Background?
9.2.4.5 How
to Set Border Effect (None/Solid/Dash/Dot/ DashDot/DashDotDot/Raised/Lowered)?
9.2.4.6 How
to Select Shadow Effect (None/Glow/Fade/ Hard)?
9.2.5.1 How
to Set Position (Top/Bottom)?
9.2.5.2 How
to Select Alignment (Left/Right/Center)?
9.2.5.3 How
to Set Font, Foreground and Background?
9.2.5.4 How
to Set Border Effect (None/Solid/Dash/Dot/ DashDot/DashDotDot/Raised/Lowered)?
9.2.5.5 How
to Select Shadow Effect (None/Glow/Fade/ Hard)?
9.2.6.2 How
to Set Axis Name Alignment (Left/Right/ Center)?
9.2.6.4 How
to Set Axis Name Font, Foreground and Background?
9.2.6.5 How
to Set Axis Name Shadow Effect (None/ Glow/Fade/Hard)?
9.2.6.6 How
to Set Label Font, Foreground and Background?
9.2.6.7 How
to Enable Label Drill-Down (Enable/Disable)?
9.2.6.8 How
to Set Label Tooltip Text?
9.2.6.9 How
to Select Grid Style (None/Solid/ Dash/Dot/DashDot/DashDotDot)?
9.2.6.10 How
to Select Grid Strip Color for X-Axis?
9.2.6.12 How
to Set Axis Maximum Value on Y-Axis?
9.2.6.13 How
to Set Axis Minimum Value on Y-Axis?
9.2.6.14 How
to Set Axis Division Value on Y-Axis?
9.2.6.15 How
to Set Axis Unit Text on Y-Axis?
9.2.6.16 How
to Set Position (East/West/North/South) for the Legend?
9.2.6.17 How
to Select Alignment (Left/Right/Top/ Bottom/Center) for the Legend?
9.2.6.19 How
to Select Legend Shadow Effect (None/Glow/ Fade/Hard)?
9.2.6.20 How
to Allow User to Select Color for Legend Value?
9.3.1.1 How
to Select Bar Colors?
9.3.1.2 How
to Set Bar Border Visible?
9.3.1.3 How
to Set the Border Color?
9.3.1.4 How
to Set the Transparency Level?
9.3.1.5 How
to Set the Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.1.6 How
to Set the Tooltip Text Feature?
9.3.1.7 How
to Set the Bar Width?
9.3.1.8 How
to Set the Gap between Bars in Percentage?
9.3.2.1 How
to Select Line Style (Solid/Dash/Dot/ DashDot)?
9.3.2.2 How
to Set the Line Position (Front/Middle/ Back)?
9.3.2.3 How
to Enable Curve Line?
9.3.2.4 How
to Set Line Colors?
9.3.2.5 How
to Set Line Width?
9.3.2.6 How
to Set Data Point Style (None/Square/ Circle/Triangle/Diamond/Star/Plus)?
9.3.2.7 How
to Select Data Point Color?
9.3.2.8 How
to Set Data Point Size (Width/Height)?
9.3.2.9 How
to Select Data Point Border Color?
9.3.2.10 How
to Select Strip Border Color?
9.3.2.11 How
to Set Strip Width?
9.3.2.12 How
to Set the Transparency Level?
9.3.2.13 How
to Set the Tooltip Text Feature?
9.3.3.1 How
to Select Area Colors?
9.3.3.2 How
to Set Area Border Visible?
9.3.3.3 How
to Set the Border Color?
9.3.3.4 How
to Set the Transparency Level?
9.3.3.5 How
to Set the Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.3.6 How
to Set the Tooltip Text Feature?
9.3.3.7 How
to Set the Area Width?
9.3.3.8 How
to Set the Gap between Areas in Percentage?
9.3.4.1 How
to Set Pie Colors?
9.3.4.2 How
to Use Tooltip Text Feature?
9.3.4.3 How
to Set Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.4.4 How
to Set the Border Color?
9.3.4.5 How
to Set the Transparency Level?
9.3.4.6 How to
Set Pie Size (Width/Height/Depth)?
9.3.4.7 How
to Set Gap between Pie?
9.3.4.8 How
to Select Pie Draw in Number of Row?
9.3.4.9 How
to Select Pie Draw in Number of Columns?
9.3.4.10 How
to Select Pie Start Angle?
9.3.4.11 How
to Set Border Style (None/Simple/Raised/ Lowered)?
9.3.4.12 How
to Set Border Width?
9.3.5.1 How
to Set Colors for the Radar Chart?
9.3.5.2 How
to Set Radar Diameter?
9.3.5.3 How
to Set the Border Width?
9.3.5.4 How
to Set Border Color?
9.3.5.5 How
to Set Transparency Level?
9.3.5.6 How
to Use Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.5.7 How
to Insert Tooltip Text?
9.3.6 Combined
Chart Properties
9.3.6.1 How
to Select Bar Colors?
9.3.6.2 How
to Set Border Visible?
9.3.6.3 How
to Set the Border Color?
9.3.6.4 How
to Set the Transparency Level?
9.3.6.5 How
to Set the Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.6.6 How
to Set the Tooltip Text Feature?
9.3.6.7 How
to Set the Bar Width?
9.3.6.8 How
to Set the Gap between Areas in Percentage?
9.3.6.9 How
to Select Line Style (Solid/Dash/Dot/ DashDot)?
9.3.6.10 How
to Set the Line Position (Front/Middle/ Back)?
9.3.6.11 How
to Enable Curve Line?
9.3.6.12 How
to Set Line Colors?
9.3.6.13 How
to Set Line Width?
9.3.6.14 How
to Set Data Point Shape Style (None/Square/ Circle/Triangle/Diamond/Star/Plus)?
9.3.6.15 How
to Select Data Point Color?
9.3.6.16 How
to Set Data Point Size (Width/Height)?
9.3.6.17 How
to Select Data Point Border Color?
9.3.6.18 How
to Select Strip Border Color?
9.3.6.19 How
to Set Strip Width?
9.3.6.20 How
to Set the Transparency Level?
9.3.6.21 How
to Set the Tooltip Text Feature?
9.3.7.1 How
to Indicate Start of a Section?
9.3.7.2 How
to Indicate End of a Section?
9.3.7.3 How
to Set the Width of the Section?
9.3.7.4 How
to Select Bar Colors?
9.3.7.5 How
to Set the Bar Width?
9.3.7.6 How
to Set Gap between Bars in Percentage?
9.3.7.7 How
to Select Border Style (None/Simple/Raised/ Lowered)?
9.3.7.8 How
to Set Border Width?
9.3.7.9 How
to Set Transparency Level?
9.3.7.10 How
to Use Tooltip Text Feature?
9.3.7.11 How
to Set Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.8 XYScatter
Line Properties
9.3.8.1 How
to Select Line Style (Solid/Dash/Dot/ DashDot)?
9.3.8.2 How
to Set the Line Position (Front/Middle/ Back)?
9.3.8.3 How
to Enable Curve Line?
9.3.8.4 How
to Set Line Colors?
9.3.8.5 How
to Set Line Width?
9.3.8.6 How
to Set Data Point Shape Style (None/Square/ Circle/Triangle/Diamond/Star/Plus)?
9.3.8.7 How
to Select Data Point Color?
9.3.8.8 How
to Set Data Point Size (Width/Height)?
9.3.8.9 How
to Select Data Point Border Color?
9.3.8.10 How
to Set the Transparency Level?
9.3.8.11 How
to Set the Tooltip Text Feature?
9.3.9.1 How
to Set the Bubble Position (Front/Middle/ Back)?
9.3.9.2 How
to Set Bubble Colors?
9.3.9.3 How
to Set Border Width?
9.3.9.4 How
to Set the Transparency Level?
9.3.9.5 How
to Set the Tooltip Text Feature?
9.3.9.6 How
to Make Bubble Center Visible?
9.3.9.8 How
to Set Gradient Effect (Linear/Conical/ Square/Radial)?
9.3.10.1 How
to Set the Start of A Session?
9.3.10.2 How
to Set the End of a Session?
9.3.10.3 How
to Set the Real Body Width?
9.3.10.4 How
to Select the Filled Body Color?
9.3.10.5 How
to Select the Empty Body Color?
9.3.10.6 How
to Set the Shadow Line Width?
9.3.10.7 How
to Set the Shadow Line Color?
9.3.10.8 How
to Set Border Width?
9.3.10.9 How
to Set Border Color?
9.3.10.10 How
to Set Border Style (None/Simple/Raised/ Lowered/)?
9.3.10.11 How
to Set Transparency Level?
9.3.10.12 How
to Use Tooltip Text Feature?
9.3.11 Doughnut
Chart Properties
9.3.11.1 How
to Select Doughnut Colors?
9.3.11.2 How
to Set the Doughnut Size (Width/Height/Depth)?
9.3.11.3 How
to Set Border Width?
9.3.11.4 How
to Set Border Color?
9.3.11.5 How
to Set Transparency Level?
9.3.11.6 How
to Use Tooltip Text Feature?
9.3.11.7 How
to Set Gradient Effect (Linear/Conical/ Square/Radial)?
9.4 Different Java Architectures
9.4.1 How to incorporate ElegantJ Charts in Java Enterprise Edition?
9.4.2 How to incorporate Elegant J Charts in JSP?
9.4.3 How to incorporate Elegant J Charts in Servlet?
9.4.4 How to incorporate Elegant J Charts in Java Application or Applet (Java Standard Edition)?
This preface describes the document. The preface contains the following sections:
|
Section |
Page |
|
Purpose of this document |
8 |
|
Assumptions |
8 |
|
Document Organization |
8 |
|
Related Documents |
9 |
|
Conventions Used |
9 |
The purpose of this document is to provide the fundamental skills necessary to productively install, program, integrate, and use the ElegantJ Charts. This document provides both programmer and user perspective to the audience.
This manual assumes that readers are having reasonable level of exposure to fundamentals of Java programming and various architectures.
This document is organized as described in following tables.
Table 1 – Organization of the document
|
Chapter |
Contents |
|
About ElegantJ Charts |
Ø ElegantJ Charts Features |
|
ElegantJ Charts Toolkit |
Ø Chart Components Ø ElegantJ Charts Designer Ø Data Binding |
|
Chart Type Selection Guidelines |
Ø Different charts and their sub types |
|
Installation & Registration |
Ø Installation Procedure Ø Using with Different IDEs Ø Getting and Using the License Key |
|
ElegantJ Charts Architecture |
Ø Working with Different Java Architectures Ø Working with Different Data Sources |
|
Interoperability and Integration with XML |
Ø Why XML? Ø What is EJXML? Ø Introduction to the EJXML Format Ø Introduction to EJXML Data Format |
|
ElegantJ Charts Designer |
Ø Installation Ø ElegantJ Charts Designer Features Ø Using the Designer Ø Using the XML |
|
Programmer's FAQs |
Ø Core components and definitions for different chart types Ø Programmers’ guide to frequently asked questions |
Readers of this document can also refer to other ElegantJ Charts documents.
Ø ElegantJ Charts Designer User Manual
o About ElegantJ Charts Designer
o Navigating ElegantJ Charts Designer
o ElegantJ Charts Designer IDE
o Chart Wizard
o Chart Property
Ø ElegantJ Charts API Documentation
Ø ElegantJ Charts Demo Application
|
File |
Italic (slanted) type indicates variable values, instruction operands. |
|
[ | ] |
In syntax definitions, brackets indicate items that are optional and braces indicate items that are required. Vertical bars separating items inside brackets or braces indicate that you choose one item from among those listed. |
|
. . . |
In syntax definitions, a horizontal ellipsis indicates that the preceding item can be repeated one or more times. |
|
Get(1) |
A cross-reference to a reference page includes the appropriate section number in parentheses. For example, get(1) indicates that you can find information on the get command in Section 1 of the reference pages. |
|
// |
An explanation of a particular function performed by preceding code. |
ElegantJ Chart Library is a powerful tool in your hands when it is time to come up with excellent visual data representation. Every feature of this collection is carefully created to make chart creation, integration and deployment easy for you. ElegantJ Charts provides you more than 50 types of chart to choose from in 100% Java environment.
With 3-D presentation, seamless data handling from different data sources, XML interoperability, and special features like n-level Drill-Down, ElegantJ Charts Chart Library can work with almost all type of Java architecture.
A variety of 2D or 3D Java Charts can be incorporated as per your need with ElegantJ Charts chart library. Be it a Bar Chart, a Pie Chart, a Bubble or Stock Chart, you can simply select out of our collection of number of chart types to suit your purpose and requirement to get visually appealing output.
The advantages of ready-to-use XML templates:
Ø A smart developer can just choose an off the shelf XML template from a wide variety offered by our Chart Library.
Ø Selecting a template closest to your needs and customizing it to your requirements, eases the entire process of using charts in your application.
Ø Save your time, energy and money.
In case you wish to bring more designer element to your charts, our ElegantJ Charts IDE will add to your benefits. The best part is that you do not require any special Java programming skills to use the charts from ElegantJ Charts IDE and wouldn’t require splurging on a third party IDE either. Thus, by choosing the option of combining our two products can enhance the quality of your productivity.
Key Features:
ü Over 50 different types of charts
ü 3 – dimensional view with transparency and depth control
ü N-level Drill-Down in charts for visual mining
ü Tooltips and notes for graphs
ü Comprehensive set of properties and events to configure
ü Visual presentations, interactive actions, and data binding
ü XML template support for integration and interoperability
ü Graph designer toolkit for visual customization with
ü Hundreds of ready-to-use templates
ü Efficient data binding for varied enterprise data sources
ü Works with almost all Java architectures
ElegantJ Charts contains following key features:
Ø Simplicity: Flexible, configurable, and aesthetically great. Customize to suit your needs and denote your data as you choose.
Ø Enhanced Representation: Comprehensive set of properties and events to configure visual presentations, interactive actions, and data binding.
Ø Prudent Insight: Automatically sort and resize your data and represent it in a 3-dimensional view.
Ø Superior Graphics: Enhance charts with features like gradient effects, customizable background, title, legend, data display formats, and transparency.
Ø Information at Hand: Add notes and tooltips wherever you need.
Ø Ease of Use: Reuse and automatic processing easier not just for users, but also for application developers customizing our Beans by changing their properties.
Ø N- Level Drill-Down: Provides various display formats to show formatted data on graph with n-level Drill-Down in charts for visual mining.
Ø Charts Designer: Toolkit for customizing graphs and presentations.
Ø Do-It-Yourself: A Charts Designer is included to help you design your charts. These graphs are saved in XML format and can be accessed anywhere.
Ø Navigational Ease: Mouse properties have been enhanced to give you effortless understanding with MouseEvent listener support for individual view objects.
Ø Intelligent Data Binding: Provides efficient data binding for varied enterprise data sources. It has data model driven interface to bind data from your desired data sources.
Ø Images on the Fly: User can use graph as a server component in web applications or enterprise applications to generate graph images as required.
Ø XML Interoperability: XML Template support for integration and interoperability is provisioned.
This
section guides you through various chart type available in ElegantJ Charts and
their usage in various situations depending on individual chart’s strength and
features.
In many scenarios, developers require their charting applications to include a variety of different chart types when displaying data. Depending on the purpose of application and type of data, developers have to select the most suitable chart type. ElegantJ Charts provides more than 50 type and subtypes of charting components to provide right visual representation of your data through charts.
When a developer passes a data to the chart using either the API or a supported data access, the values plotted will represent the values passed.
Programmers have following options to use ElegantJ Charts:
· Integrate ElegantJ Charts programmatically in their application through comprehensive API.
· Import chart components in their favorite Java IDE and configure or program visually or through source editor in IDE.
· Use ElegantJ Charts Designer for visual configuration with help of hundreds of ready‑to‑use XML templates.
The variety of Java Charts offered by ElegantJ Chart Library is one of the highlights of the product. We have charts to suit your different requirements for attractive visual representation of your data. ElegantJ Charts is bundled with more than 50 types of Java Charts, categorized in the categories as:
Ø Bar Chart
o Vertical Bar
o Horizontal Bar
o Stacked Vertical Bar
o Stacked Horizontal Bar
o Percentage Vertical Bar
o Percentage Horizontal Bar
Ø Line Chart
o Line
o Strip
o Point
o Stacked Line
o Stacked Strip
o Stacked Point
o Percentage Line
o Percentage Strip
o Percentage Point
Ø Area Chart
o Area
o Stacked Area
o Percentage Area
Ø
Pie
Chart
Ø
Radar
Chart
o Radar
o Stacked Radar
Ø Combined Chart
Ø Histogram Chart
Ø XYScatter Chart
o XYScatter Line
o XYScatter Point
o Stacked XYScatter Line
o Stacked XYScatter Point
o Percentage XYScatter Line
o Percentage XYScatter Point
Ø Bubble chart
Ø Stock Chart
o Candle Stick Chart
o High Low Open Close Chart
Ø Doughnut Chart
Please refer “Section 4 - Chart Type Selection Guidelines” for more information on chart type selection.
A developer has three ways to use charts in an application:
Ø Write your own code
Ø Use third party IDEs
Ø Use ElegantJ Chart Designer IDE
The first two options often involve tedious work, waste of your precious time in writing lengthy source code or splurging money on a third party IDE. But ElegantJ Charts Designer can set you free from that.
ElegantJ Charts Designer is a platform independent, fully functional XML template designer for ElegantJ Charts. Our Charts Designer provides a state-of-art interoperability and integration options through ready to use XML templates that can also be customized to suit your presentation requirements.
Take a look at our unique process where even a graphic designer can come up with visually enhanced Java Charts.
This out and out Java tool has point-and-click graphical user interface that allows faster chart creation with utmost flexibility. The buzzword is WYSIWYG - What you see is what you get - as you can monitor the changes you are making in a real time 3-D environment.
Display your data in best possible way through customizable chart designer elements and easily import these templates with a single line of source code. The end result is a visually striking and stimulating data display that takes less than 5 minutes without any technical Java expertise!
Key Features:
ü 100% Java, platform-independent tool
ü Real-time point-and-click WYSIWYG environment
ü Huge collection of ready-to-use XML templates
ü Industry standard interoperability through XML
ü Reduces development cost
ü Eliminates need for third party IDEs
ü Shortens development cycle
ü Promotes reusability
ü Reduces technical skillset requirements
ü Empowers end users to create their own charts
Please refer ElegantJ Charts Designer User Manual for more information on usage of chart designer.
ElegantJ Charts comes bundled with standard data access interface. Data access works with different data sources like databases, text, and XML files over JDBC, FTP, HTTP, and File Protocols. Data access component that we are providing with tool is a Java interface and can be extended to access other types of data sources through other protocols also.
Data Access component provides an interface to carry out database operations. It connects to the database using any type of JDBC driver to retrieve and manipulate data. Data Access component gets you the power of being able to read, write, and edit data stored in any data source, be it text, database, or XML file/stream. With Data Access component, you will be able to connect and communicate with any type of data source through protocols like FILE, JDBC, FTP or HTTP. It works in the most of the security and access constraints imposed by different architectures and enables you to access your any type of data from HTTP servers, FTP servers, LAN, Internet, and File servers.
Please refer “Section 6 - ElegantJ Charts Architecture” for more information on how to work with different Java Architectures and different data sources.
This section provides you guidelines to select an appropriate chart for data presentation by explaining strengths of different chart types and their subtypes.
Bar chart is the most common chart type that is useful for displaying a variety of data. This type of charts is used for comparing two or more values. Possibility of comparison of data makes it easily understandable for the on lookers. What makes Bar Charts so popular? When data is represented in form of a Bar chart for comparing, the human eye finds it very easy to compare the data and quickly draw conclusions. Bar Charts deployed with ElegantJ Charts are a great visual aide and add a touch of professionalism to any Web page or document that requires display of data.
Bar Charts can be used for:
Ø Comparing independent data sets
Ø Money distribution by time
Ø Production against time
Components and Functions:
Ø Bar charts comprise an axis and a series of labeled horizontal or vertical bars that show different values for each bar.
Ø Components of a Bar Chart can be used to display a wide variety of information.
Ø Data is grouped together according to categories, displaying one bar for each item in that category.
Ø A Bar Chart can compare distinct items or show single items at distinct intervals.
Ø While comparing competitive items, placing longest bar on top and placing the rest in descending order after the longest one will make it very effective.
Ø In Bar chart, a class or group can have a single category of data or they can be broken down further into multiple data categories for greater depth of analysis.
Ø Each bar is color-coded according to the data series that it represents.
Ø Sometimes a stretched graphic is used instead of a solid bar.
Ø The numbers along side of the Bar charts are called the scale.
For each bar in the Bar chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
ElegantJ Charts offers these sub-types of Bar Chart:
Ø Vertical Bar
Ø Horizontal Bar
Ø Stacked Vertical Bar
Ø Stacked Horizontal Bar
Ø Percentage Vertical Bar
Ø Percentage Horizontal Bar
A Line Chart is created by connecting a series of data points together with a line. This popular chart type is useful when you want to show data trends. Line charts are used to show how two parameters are related to each other or to display how one variable changes effected by another. The Line charts are very useful as a comparison tool as well. The Line charts components from the ElegantJ Charts Library are a preferred choice for keeping an eye on important business metrics as the patterns of a Line Chart are eye catching.
Line charts can be used for:
Ø Determining trends or cyclical variations
Ø Money distribution over time
Ø Production over time
Ø Price variation over time
Ø Environmental changes over time
Ø Material characteristics by temperature
Ø Clinical response by concentration
Components and Functions:
Ø A line connects data items in a Line Chart in the same series of other lines to form and display a trend in your data over a number of data categories.
Ø In a Line chart, points or symbols represent data items.
Ø A Line chart component consists of two axes, a vertical or Y-axis and a horizontal or X-axis.
Ø The categories of data become the scale indexes along the X-axis, while an individual line represents each series of data.
Ø Generally, the X-axis represents time and the Y-axis represents value.
Ø Points are plotted on a Line Chart for each time interval and these points are joined by a line as a visual representation of change in data with timeline.
Ø The X-axis does not necessarily have to represent time. It can also represent other data types.
Ø The only requirement is that there has to be some relationship between the X and Y-axis.
Ø By plotting multiple series of data on the same grid, it becomes very easy to compare the data sets.
Ø Line chart components can be used to display a wide variety of data and relationships.
For each line in the Line chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Line chart is having sub type as under:
Ø Line
Ø Strip
Ø Point
Ø Stacked Line
Ø Stacked Strip
Ø Stacked Point
Ø Percentage Line
Ø Percentage Strip
Ø Percentage Point
Area chart is a combination of the features of Line charts and Stacked Bar charts. This is a chart type where each area is given a solid color or pattern to emphasize the relationships between the pieces of charted information. It shows the relative contributions over time that each data series makes to the whole picture. An Area Java chart from ElegantJ Charts Library is the best choice to show relationships as a part of a whole over a period of time. For example, an Area chart can aptly show change in the relative amounts of the principal and interest over the time of a mortgage.
Area charts can be used to:
Ø Display changes in cumulative value or percentage over time.
Ø Compare groups on outcome measurements.
Ø Display group trends.
Components and Functions:
Ø Area Chart is a type of presentation graphic that emphasizes a change in values by filling in the portion of the chart beneath the line connecting various data points.
Ø The components of Area Chart often look like a Line chart colored in the areas underneath each line.
Ø Each of these area segments is stacked on top of each other, like in a Stacked Bar chart.
Ø The aggregated size of the area at each category reflects the cumulative value of all data items in that category.
Ø The first series will always be the top area segment.
Ø Each data series in the Area chart component corresponds to a colored segment of the total area.
Ø Area charts are useful when you want to show group trends in addition to comparing trends between individual series of data.
For the Area chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Area chart is having sub type as under:
Ø Area
Ø Stacked Area
Ø Percentage Area
A Pie chart is a circular chart divided into sectors, illustrating relative magnitudes or frequencies. In a pie Java chart, the arc length of each sector (and consequently its central angle and area), is proportional to the quantity it represents. Together, the sectors create a full disk. The Pie chart component is another commonly used chart type. Pie charts are most often used to show data as a percentage of the whole. Pie charts represent an entire data category as a pie (all other data is thrown out). Each data item in that category is shown as a pie wedge. The wedge size will be proportional to that data item's percentage of the sum of all data items in the category. Though this may sound complex, Pie charts components are actually quite intuitive.
Pie charts can be used for:
Ø Comparing data elements against the sum of the elements
Ø Budgets
Ø Money distribution
Components and Functions:
Ø A Pie Chart is a circular chart divided into sectors, illustrating relative magnitudes or frequencies.
Ø The arc length of each sector and consequently its central angle and area in a Pie Chart, is proportional to the quantity it represents.
Ø Each data item in that category is shown as a pie wedge or slice.
Ø The greater the data value, the larger the pie slice or wedge.
Ø The data sectors or wedges or slices, create a full disk when they come together.
Ø Multiple 2D and 3D Pie charts can be drawn of varying sizes to provide another dimension to the data.
Ø This type of chart is very useful for figures that relate to a larger sum, such as demographic data or budget information.
Ø It is easy to get a feel of the relationship between component values when they are placed in a Pie charts component.
For the Pie chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
There is nothing defensive about a Radar Chart. This chart type is called Radar simply because it resembles radar on screen. Radar chart is useful when you want to look at several different factors, all related to one item. For example, you can use a Java based Radar chart component from ElegantJ Charts Library to compile data about a wide receiver on a professional football team.
Radar charts can be used for:
Ø Mathematical applications
Ø Statistical applications
Components and Functions:
Ø A Radar chart is the presentation of group data at the perimeter of radar.
Ø This chart type has multiple axis to plot the data.
Ø A point close to the center on any axis indicates a low value while a point near the edge is a high value.
Ø The incrementing numeric values are placed from the center of the radar to the perimeter for a user to determine how specific group data relates to the whole of the group data.
Ø Radar charts components are similar to Line charts. However, the radial grid to display data items sets it apart.
Ø In a radial grid, the scale value grid lines circle around a center point representing zero.
Ø The grid is not entirely circular; rather it is an equilateral polygon, with each category being plotted at a point of the polygon. Thus, if there are three categories, the grid is triangular. If there are eight categories, it will be octagonal.
Ø There must be at least three categories for a Radar chart to make sense.
Ø The area inside of the radial grid for each series will be colored translucently to give an idea of the total size of a data series and still note the overlapped data.
Ø While interpreting a Java Radar chart, check each axis as well as the overall shape to see how well it fits your goals.
For the Radar chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Radar chart is having sub type as under:
Ø Radar
Ø Stacked Radar
Combined chart is a special form of Vertical Bar chart that displays information in such a way that priorities for process improvement can be established. It shows the relative importance of all the data and is used to direct efforts to the largest improvement opportunity by highlighting the "vital few" in contrast to the "many others”.
For the Combined chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Histogram Java chart is a specialized type of Bar chart which is also a part of ElegantJ Chart Library. The strength of a histogram is that it provides an easy-to-read picture of the location and variation in a data set.
Components and Functions:
Ø A Histogram Chart has the charting format that displays horizontal or vertical bars.
Ø The length of the bars is set in proportion to the values of the data items they represent.
Ø The individual data points are grouped together in classes, to get an idea of how frequently data in each class occur in the data set.
Ø High bars in Histogram charts indicate more points in a class and low bars indicate lesser points.
Ø However, the weakness of this type of chart is that it can be manipulated to show different pictures. If too few or too many bars are used, the histogram can be misleading.
Ø Histogram chart components can obscure the time differences among data sets.
For Histogram chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
XY Scatter chart is one of the simplest types of chart. It is a collection of plotted points that represent specific data in a pool of information. The XY Scatter Java chart, which is also a part of ElegantJ Charts Library, allows the user to consider a larger scope of data for the purpose of determining trends. For example, to plot a number of people interviewed and their various wages and education levels, one can use the educational level as the X-axis that increases as one moves on the right side, while the salary or wages can be displayed on the Y-axis.
Components and Functions:
Ø XYScatter chart is used when you want to see if there is a relationship between two different sets of data.
Ø XYScatter chart is essentially the plotted dots without any connecting line.
Ø In case of a perfect relationship, the dots would form a straight line angling up and right.
Ø However, if the daily temperature is plotted in this type of chart, you can see the trend of rising or falling of the dots as per the change in temperature.
For XYScatter chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
XYScatter chart is having sub type as under:
Ø XYScatter Line
Ø XYScatter Point
Ø Stacked XYScatter Line
Ø Stacked XYScatter Point
Ø Percentage XYScatter Line
Ø Percentage XYScatter Point
A Bubble Chart has a special visual appeal as it represents data in a series of bubbles. In this type of chart, the size of a bubble is proportional to the amount of data. ElegantJ Charts provides you an opportunity to use this unusual chart type with ease. For example, you can come up with an attractive Bubble Chart of a summary report of the sales of your company’s products plotting the relationship between the total sales, the quantity sold, and the number of unique products (the product mix) that each sales representative markets.
Bubble charts can be used for:
Ø Displaying data with three variables
Ø Displaying financial data
Components and Functions:
Ø Bubble Chart is a type of XY Scatter chart that is used to compare sets of three values.
Ø In Bubble Chart, each data point has two values and the size of the bubble represents value of the third.
Ø The third data value, called the bubble data value, is added to each data item.
Ø In Bubble Chart component, the bubble value is used to determine the size of a bubble that will appear at the data item’s plot point.
Ø Bubble Chart shows three dimensions of data in a flat 2D Java chart.
Ø In addition to the points being located on a grid according to X and Y values, the size of the marker is proportional to a third set of values.
Ø A Bubble Java Chart bean can be used for 3-D data — for example X-Y or time data items that have a quantitative element to them.
For the Bubble chart, the following statistics are calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
As the very name suggests, the Stock Java Chart is useful to display information about stock and financial data. A Stock Java chart component, which is also a part of ElegantJ Charts Library, can chart information about the high, low, opening and closing values of the stocks. The look of the stock bar depends on the use of the sub type.
Stock charts can be used for:
Ø Displaying daily stock prices over time
Ø Displaying statistical data with a confidence range over time
Components and functions:
Ø Each data item in a Stock Chart is displayed with a stock bar that can represent the high and low prices for the day and the opening and closing prices for the day.
Ø There can be infinite number of categories in this type of chart, but only one data item or a stock bar can be displayed per category in a Stock Java Chart.
Ø This chart could also display each category to represent the prices for a separate stock, which will allow you to compare prices for separate stocks on a single day.
Ø Data items in Stock chart must have at least two values: The high value and the low value. The open value and the close value may be optional, depending on the chart sub type.
For the Stock chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Stock chart is having sub type as under:
Ø Candle Stick Chart
Ø High Low Open Close Chart
Doughnut chart is similar to a Pie chart. Doughnut chart shows how proportions of data contribute to the whole. This unusual chart type is also part of the collection in the ElegantJ Charts Library.
Components and functions:
Ø Doughnut chart displays category groups, series groups, and values series as doughnut slices.
Ø The size of the slice in Doughnut chart component is determined by the series value as a percentage of the total of all values.
Ø Doughnut Java charts components are typically used to show percentages.
For the Doughnut chart, the following statistics can be calculated:
Ø Sum: The sum value in the series.
Ø Count: The count value in the series.
Ø Valid Count: The valid count value in the series.
Ø Average: The average value in the series.
Ø Valid Average: The valid average value in the series.
Ø Maximum: The maximum value in the series.
Ø Minimum: The minimum value in the series.
Before installing ElegantJ Charts, please ensure that your computer system and development environment are setup and working as per expectations. Person using ElegantJ Charts is expected to be able to write and execute simple JAVA applications.
To be able to use ElegantJ Charts, your computer systems are required to have:
Ø An IDE that supports JDK 1.4.0 or higher, or
Ø JDK 1.4.0 or higher.
On extracting EJCharts.zip, following directories will be created:
Ø Directory [jars] contains Jar file(s)
Ø Directory [docs] contains User Guide and Java API
To include ElegantJ Charts in CLASSPATH, add following statement to your autoexec.bat file,
Set CLASSPATH=%CLASSPATH%;C:\ELEGANTJCHARTS \jars\<CHART>.jar;
Restart Windows to get effect of changes made.
Go to Control Panel and select System. You will find environment variables under Environment tab in Windows NT systems and under Advanced tab in Windows 2000 systems.
Find CLASSPATH environment variable or create it.
To include ElegantJ Charts in the CLASSPATH, specify or add following value for variable –
[EXISTING-CLASSES]; C:\ELEGANTJCHARTS\jars\<CHART>.jar
Before you begin using ElegantJ Charts, you must manually configure CLASSPATH environment variable. CLASSPATH must point to the location of classes and installation directory.
For example, to set CLASSPATH for ElegantJ Charts,
setenv CLASSPATH .:/usr/local/ELEGANTJCHARTS/jars/
<CHART>.jar:
If you are using Bourne Shell, commands are,
CLASSPATH= $CLASSPATH:.:/usr/local/ELEGANTJCHARTS/jars/
<CHART>.jar:export CLASSPATH
ElegantJ Charts Library file(s) is located in the \jars\subdirectory.
Each IDE has its unique method for importing a Bean. This set of documentation contains guidelines for importing ElegantJ Charts to different IDEs. However, consult documentation for respective product to know how to import a Java Bean in an IDE.
ElegantJ Charts works well with any charts compliant Integrated Development Environment (IDE).
Follow the steps given below to create a new category and install the Bean into Borland JBuilder.
Create a New Category
Ø Click menu Tools > Configure Palette. It opens Palette Properties dialog box.
Ø Click on Add button. It opens Add Page dialog box.
Ø Specify name (e.g., ElegantJ) and click on OK button.
Ø New Category will be created.
Create New Library and Install/Import Bean
Ø On Palette Properties dialog box, click on Add components tab.
Ø Select newly created page (e.g., ElegantJ).
Ø Click on Select Library button. It opens Select a Different Library dialog box.
Ø Click on New button. It opens New Library Wizard dialog box.
Ø Specify name for library and click on Add button. It opens Select One or More Directories dialog box.
Ø Select directory where jar files are located, or select jar file to be imported. Click on OK button. Dialog box will be closed and New Library Wizard dialog box appears in front.
Ø Click on OK button on New Library Wizard dialog box. It opens Select a Different Library dialog box.
Ø Confirm that newly created library is selected. Click on OK button. It opens Add Components under Palette Properties.
Ø Click on Add from Selected Libraries button. It opens Results dialog box. Click on OK button.
Ø Results dialog box disappears. Click on OK button on Palette Properties dialog box.
Ø
Charts are ready to be used.
Follow the steps given below to create a
new category and install Bean into Sun Java Studio Creator 2.
Ø Click menu Tools>Library Manager. It opens Library
Manager dialog box.
Create New Library
Click on New Library button. It opens New Library dialog box. Write a Library Name and select Component Libraries from Library Type combo box. Click OK.
Load Component As a Jar File
Click on Add Jar/Folder button. It opens File dialog box. Locate jar file (i.e. /ElegantJCharts/jars/bargraph.jar), and Click on OK button. The selected jar file appears in Library Classpath List.
Ø Click on OK Button.
Create a new Project. (e.g., ElegantJCharts)
Ø Right click on Created Project (e.g., ElegantJCharts).
Ø Select property.
Ø Project Properties dialog box will open.
Ø Select Libraries from Categories tree on left pane.
Ø On right pane, click on Add Library.
Ø It opens Add Library dialog box.
Ø Select a Library from list, which is created from Library Manager.
Ø Click on Add Library button.
Ø Click OK button on Project Properties dialog box.
Follow the steps given below to create a new category and install Bean into NetBeans IDE.
Ø Click menu Tools > Palette Manager. It opens Palette Manager dialog box.
Create New Category
Ø Click on New Category button.
Ø It opens New Palette Category dialog box. Write a New category Name and Click on OK button to add a category name into Palette Manager.
Ø Click on Add From Jar button. It opens Install Component to Palette dialog box.
Ø Choose a component from Available Components list.
Ø Click on Next button.
Ø Locate/Choose a jar containing components (for example /ElegantJCharts/jars/bargraph.jar).
Ø Click on Next button.
Ø Select the Palette Category to add the components.
Ø Click on Finish button.
Ø The component is added into the selected Palette Category.
Ø Click on Close button.
Follow the steps given below to create a
new category and install Bean into Eclipse Editor.
Create New Project (i.e. ElegantJ Charts)
Ø Right click on Created Project (right click on ElegantJ Charts). It opens Properties dialog box for Project (i.e. ElegantJ Charts)
Ø Select Java Build Path from Left pane tree.
Ø On right pane, click on Libraries tab and click on Add External JARs button.
Ø It opens File dialog box, locate a jar file.
Ø Click on OK button on File dialog box.
Ø The located jar file is displayed into the list.
Ø Click on OK button on Properties dialog box.
Follow the steps given below to install bean into Servoy Developer.
Ø Copy all the chart beans jar files from [jar] directory created on extraction of downloaded zip file.
Ø Locate and paste all the chart bean jar files in the [Beans] directory in the installed Servoy Developer IDE directory.
Ø Now open the Servoy Developer. Go to File >> New Solution. Enter the solution name ‘ElegantJCharts’ and click on OK.
Ø New Form screen opens. Select a server from Using Server. Select a table from Using existing table list or create new table. Click on OK.
Ø Select fields and click on Ok.
Ø
Now Click on 
Place
Bean button on toolbar. Select a particular chart bean from the list and
click on Ok.
Ø You are ready to use ElegantJ Charts Library with Servoy Developer IDE.
You can purchase a license from our Web site http://www.elegantjcharts.com. You can also contact our sales team sales@elegantJcharts.com.
On purchasing a license, you will receive a mail having your license key.
License key can be applied to ElegantJ Charts using any of the following ways:
Ø Configuring with IDEs.
Ø Configuring directly with source code.
5.4.2.1 Configuring with Graphical User Interface of IDE
While designing an application or an applet graphically in an Integrated Development Environment, you will find a property named License Key along with other properties of the Bean. Specify key (serial number) in License Key Property.
Note:
Instead of typing the license key, we suggest you to copy the license key from mail and paste it at required place. Make sure that the selection does not have any leading or trailing spaces.
5.4.2.2 Configuring Directly within Source Code
When you use the Bean within code, you need to set the key by providing value in setLicenseKey method.
Note:
Instead of typing the license
key, we suggest you to copy the license key from mail and paste it at required
place. Make sure that the selection does not have leading or trailing
spaces.
ChartClassName object = new
ChartClassName();
object.setLicenseKey("LICENSE_KEY");
Example
BarGraph graph = new BarGraph ();
graph.setLicenseKey("LICENSE_KEY");
ElegantJ Charts is a complete component model. It supports the standard component architecture features of properties, events, methods, and persistence. In addition, ElegantJ Charts provides support for introspection (to allow automatic analysis of a chart component) and customization (to make it easy to configure a chart component).
The diagram above explains the architecture of ElegantJ Charts:
Ø Data interaction with various data sources (Databases, XML, CSV) over HTTP, JDBC, file stream, etc.
Ø Charts can be presented in desktop Java applications, applets, and server components (JSP, Servlet, EJB).
To incorporate ElegantJ Charts in Java Enterprise Edition environment:
Ø Add ElegantJ Charts library in enterprise application classpath.
Ø Create chart instance in a session Bean.
Ø Initialize chart object by configuring chart properties or importing EJXML template.
Ø Bind chart data.
Ø Generate and push chart image to the client.
Code Snippet:
|
To create an instance of Bar Graph com.elegantj.graphx.bar.BarGraph graph = new com.elegantj.graphx.bar.BarGraph(); To create an instance of SQL Data
Access com.elegantj.data.dataprovider.sql.SqlDataProvider sqlDataProvider = new com.elegantj.data.dataprovider.sql SqlDataProvider(); To configure database connection properties sqlDataProvider.setConnectionProperties(new ConnectionProperties("jdbc:odbc:dsnName", "sun.jdbc.odbc.JdbcOdbcDriver", null, null)); To set a database query sqlDataProvider.setSqlString("Write Your Query Here"); To retrieve the data sqlDataProvider.retrieve(); To bind Data Access to Graph graph.setGraphDataProvider(sqlDataProvider); To load Graph Properties from EJXML graph.loadFromXML("Name of EJXml file"); To push Graph as a JPEG image to the
specified Output Stream graph.saveAsImageJPEG(OutputStream); |
To incorporate ElegantJ Charts in JSP environment:
Ø Add ElegantJ Charts library in web application classpath.
Ø Create chart instance in a JSP.
Ø Initialize chart object by configuring chart properties or importing EJXML template.
Ø Bind chart data.
Ø Generate and push chart image to the client.
Code Snippet:
|
To create an instance of Bar Graph com.elegantj.graphx.bar.BarGraph graph = new com.elegantj.graphx.bar.BarGraph(); To create an instance of SQL Data
Access com.elegantj.data.dataprovider.sql.SqlDataProvider sqlDataProvider = new com.elegantj.data.dataprovider.sql SqlDataProvider(); To configure database connection
properties sqlDataProvider.setConnectionProperties(new ConnectionProperties("jdbc:odbc:dsnName", "sun.jdbc.odbc.JdbcOdbcDriver", null, null)); To set a database query sqlDataProvider.setSqlString("Write Your Query Here"); To retrieve the data sqlDataProvider.retrieve(); To bind Data Access to Graph graph.setGraphDataProvider(sqlDataProvider); To load Graph Properties from EJXML graph.loadFromXML("Name of EJXml file"); To push Graph as a JPEG image to the
specified Output Stream graph.saveAsImageJPEG(OutputStream); |
To incorporate ElegantJ Charts in Servlet environment:
Ø Add ElegantJ Charts library in web application classpath.
Ø Create chart instance in a Servlet.
Ø Initialize chart object by configuring chart properties or importing EJXML template.
Ø Bind chart data.
Ø Generate and push chart image to the client.
Code Snippet:
|
To create an instance of Bar Graph com.elegantj.graphx.bar.BarGraph graph = new com.elegantj.graphx.bar.BarGraph(); To create an instance of SQL Data
Access com.elegantj.data.dataprovider.sql.SqlDataProvider sqlDataProvider = new com.elegantj.data.dataprovider.sql SqlDataProvider(); To configure database connection properties sqlDataProvider.setConnectionProperties(new ConnectionProperties("jdbc:odbc:dsnName", "sun.jdbc.odbc.JdbcOdbcDriver", null, null)); To set a database query sqlDataProvider.setSqlString("Write Your Query Here"); To retrieve the data sqlDataProvider.retrieve(); To bind Data Access to Graph graph.setGraphDataProvider(sqlDataProvider); To load Graph Properties from EJXML graph.loadFromXML("Name of EJXml file"); To push Graph as a JPEG image to the
specified Output Stream graph.saveAsImageJPEG(OutputStream); |
6.1.4
Java
Application or Applet (Java Standard Edition)
To incorporate ElegantJ Charts in Java Application or Applet (Java Standard Edition):
Ø Add ElegantJ Charts library in classpath.
Ø Create chart instance.
Ø Initialize chart object by configuring chart properties or importing EJXML template.
Ø Bind chart data.
Ø Set chart object in your presentation container as per your layout.
Code Snippet:
|
To create an instance of Bar Graph com.elegantj.graphx.bar.BarGraph graph = new com.elegantj.graphx.bar.BarGraph(); To create an instance of SQL Data
Access com.elegantj.data.dataprovider.sql.SqlDataProvider sqlDataProvider = new com.elegantj.data.dataprovider.sql SqlDataProvider(); To configure database connection
properties sqlDataProvider.setConnectionProperties(new ConnectionProperties("jdbc:odbc:dsnName", "sun.jdbc.odbc.JdbcOdbcDriver", null, null)); To set a database query sqlDataProvider.setSqlString("Write Your Query Here"); To retrieve the data sqlDataProvider.retrieve(); To bind Data Access to Graph graph.setGraphDataProvider(sqlDataProvider); To load Graph Properties from EJXML graph.loadFromXML("Name of EJXml file"); To push Graph as a JPEG image to the
specified Output Stream graph.saveAsImageJPEG(OutputStream); |
Data Access component provides an interface to carry out database operations. It connects to the database using any type of JDBC driver to retrieve and manipulate data. Data Access component gets you the power of being able to read, write, and edit data stored in any data source, be it text, database, or XML file/stream. With Data Access component, you will be able to connect and communicate with any type of data source through protocols like FILE, JDBC, FTP or HTTP. It works in the most of the security and access constraints imposed by different architectures and enables you to access your any type of data from HTTP servers, FTP servers, LAN, Internet, and File servers.
Ø Can parse data with fixed column size or with delimiter. Also parses data by user defined text qualifier.
Ø Provides facility to configure fetch size to fetch records.
Ø Configurable character delimiter for rows and columns.
Ø Option to append or replace fetched data in existing client buffer.
Ø Provides an option to consider the first line as column header.
Ø Column names can be retrieved and stored in data access component.
Code Snippet:
|
To create an instance of Text Data
Access com.elegantj.data.dataprovider.text.TextDataProvider textDataProvider = new com.elegantj.data.dataprovider.text.TextDataProvider(); Configuring data source
Using Text Data Access you can
connect to a Text file through file path or URL. To set the file path textDataProvider.setURLConnectionEnabled(false); // Disable URL connection textDataProvider.setFile("c://myfolder/myfile.txt"); To set the file URL textDataProvider.setURLConnectionEnabled(true); // Enable URL connection textDataProvider.setURL("http://localhost/myfolder/myfile.txt");
To retrieve data textDataProvider.retrieve(); // Opens
a connection and retrieves the data To retrieve data explicitly with
specified Input Stream try { java.io.FileInputStream in = new java.io.FileInputStream("c://myfolder/myfile.txt"); if(!textDataProvider.retrieveData(in)) System.out.println("Error while retrieving data"); in.close(); } catch(java.io.IOException e) { System.out.println("Error while opening the file"); } To retrieve the next batch of data,
if the fetch size is specified and if has more data if(!textDataProvider.nextData()) System.out.println("Error while retrieving more data"); Binding of Text Data Access with
Chart. chart.setGraphDataProvider(textDataProvider); |
Ø Supports all the four types of JDBC Connections
Ø Configurable connection attributes like database URL, driver, username, and password
Ø Allows configuring SQL query string. Facilitates users to specify parameters in SQL query in the form of retrieval arguments Value of parameters can be set at run time
Ø Allows including columns as criteria. Specify options like unique columns, unique and updateable columns, and unique and modified columns
Ø Option to restrict data updating to specific columns as well as tables
Ø Configurable fetch size to fetch records
Ø Option to append or replace fetched data in existing client buffer.
Code Snippet:
|
To create an instance of SQL Database
Access com.elegantj.data.dataprovider.sql.SqlDataProvider sqlDataProvider = new com.elegantj.data.dataprovider.sql.SqlDataProvider(); To configure database connection Using ElegantJ Database Access you can
create connection to various database through a Connection object or a
ConnectionProperties object. To set the Connection Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); java.sql.Connection connection = DriverManager.getConnection("jdbc:odbc:dsn", "username", "password"); sqlDataProvider.setConnection(connection); To set the ConnectionProperties com.elegantj.data.editors.ConnectionProperties connectionProperties = new com.elegantj.data.editors.ConnectionProperties("jdbc:odbc:dsn", "sun.jdbc.odbc.JdbcOdbcDriver", "username", "password"); sqlDataProvider.setConnectionProperties(connectionProperties);
To configure database query
Using Database Access executes
database query. A query can include the retrieval arguments. An arguments are
in the form of - :name.type To set the database query sqlDataProvider.setSqlString("select * from employee"); To retrieve the data sqlDataProvider.retrieve(); // Opens
a connection and executes the query to retrieve the data To retrieve the data with predefined
retrieval arguments String[] arguments = new String[] { "argument1", "argument2" }; sqlDataProvider.retrieve(arguments); //
Opens a connection and executes the query to retrieve the data To retrieve the data without
“retrieve” method call if(!sqlDataProvider.open()) // Opens the connection explicitly System.out.println("Error while opening connection"); else
if(!sqlDataProvider.executeQuery("select * from employee")) //
Executes the query explicitly System.out.println("Error while executing query"); To retrieve the next batch of data,
if the fetch size is specified and if it has more data if(!sqlDataProvider.nextData()) System.out.println("Error while retrieving more data"); To bind SQL Data with Chart. chart.setGraphDataProvider(sqlDataProvider); |
Ø Makes use of common methods like GET, POST, and HEAD methods for data exchange
Ø Sends file as well as string buffer to HTTP server as an entity
Ø Can parse data with fixed column size or with delimiter
Ø Configurable fetch size to fetch records
Ø Option to append or replace fetched data in existing client buffer
Ø Option to consider the first line as column header
Ø You can retrieve and store column names in data Access Component.
Code Snippet:
|
To create an instance of Text Data
Access via HTTP. com.elegantj.data.dataprovider.http.HTTPTextDataProvider httpTextDataProvider = new com.elegantj.data.dataprovider.http.HTTPTextDataProvider(); To configure data source
Using Text via HTTP you can connect
to a Text Data through HTTP URL. It also allows to configure the HTTP
request. To set the URL httpTextDataProvider.setURL("http://localhost:8080/myapp/data.jsp?id=22");
To set HTTP request method httpTextDataProvider.setMethod(com.elegantj.net.http.HTTPClient.HTTP_GET_METHOD);
To clear HTTP request headers httpTextDataProvider.clearHTTPRequestHeaders();
To set general header property for
the HTTP request header httpTextDataProvider.setHTTPRequestGeneralHeaderProperty("Date", "12/12/2002");
To set request header property for
the HTTP request header httpTextDataProvider.setHTTPRequestHeaderProperty("From", "xyz@elegantjbeans.com"); To set entity header property for the
HTTP entity header httpTextDataProvider.setHTTPRequestEntityHeaderProperty("Content-Type", "text/plain"); To set specified string buffer as the
entity body for the HTTP POST request httpTextDataProvider.setStringBufferAsEntityBody("This is the Sample Data to be Posted"); To set content of the specified file
as entity body for the HTTP POST request httpTextDataProvider.setFileAsEntityBody(new java.io.File("c://myfolder/myrequestdata.txt"));
To retrieve data httpTextDataProvider.retrieve(); //
Opens the connection and retrieve the data To retrieve data explicitly with
specified Input Stream try { httpTextDataProvider.openConnection(); httpTextDataProvider.sendRequestToServer(); httpTextDataProvider.getResponseHeaderFromServer(); java.io.InputStream in = httpTextDataProvider.getInputStream(); if(!httpTextDataProvider.retrieveData(in)) System.out.println("Error while retrieving data"); in.close(); } catch(java.io.IOException e) { System.out.println("Error while opening the connection"); } To retrieve the next data, if the
fetch size is specified and if has more data if(!httpTextDataProvider.nextData()) System.out.println("Error while retrieving more data"); To bind HTTP Data Access with Chart chart.setGraphDataProvider(httpTextDataProvider); |
Ø Connects to any FTP server
Ø Can parse data with fixed column size or with delimiter
Ø Configurable fetch size to fetch records
Ø Option to append or replace fetched data in existing client buffer
Ø Configurable character delimiter for rows and columns
Ø Option to configure first line as column header
Ø Column names can be retrieved and stored in Data Access Component.
Code Snippet:
|
To create an instance of Text Data
Access via FTP com.elegantj.data.dataprovider.ftp.FTPTextDataProvider ftpTextDataProvider = new com.elegantj.data.dataprovider.ftp.FTPTextDataProvider(); To configure data source
Using ElegantJ FTP Text Data Access
you can connect to a Text file through filepath. It also allows to configure the FTP
attributes. To set file path ftpTextDataProvider.setFile("/myfolder/myfile.txt"); To set host name ftpTextDataProvider.setHostName("elegantj"); To set port number ftpTextDataProvider.setPort(21); To set user name ftpTextDataProvider.setUserName("username"); To set password ftpTextDataProvider.setPassword("password"); To retrieve the data ftpTextDataProvider.retrieve(); //
Opens the connection and retrieve the data To retrieve data explicitly with
specified remote path ftpTextDataProvider.retrieveDataFromServer("/myfolder/myfile.txt");
To retrieve next data, if the fetch
size is specified and if it has more data if(!ftpTextDataProvider.nextData()) System.out.println("Error while retrieving more data"); To bind FTP Data Access with Chart chart.setGraphDataProvider(ftpTextDataProvider); |
Ø Can parse an XML file by user-defined tags (identifiers of root, row, and column)
Ø Provides an option to consider the first line as column header
Ø Column names can be retrieved and stored in data access component.
Code Snippet:
|
To create an instance of XML Data
Access com.elegantj.data.dataprovider.xml.XMLDataProvider xmlDataProvider = new com.elegantj.data.dataprovider.xml.XMLDataProvider(); To configure data source
Using XML Data Access you can connect
to a Text file through file path or URL. To set the file path xmlDataProvider.setURLConnectionEnabled(false); // Disable URL connection xmlDataProvider.setFile("c://myfolder/myfile.xml"); To set the file URL xmlDataProvider.setURLConnectionEnabled(true); // Enable the URL connection xmlDataProvider.setURL("http://localhost/myfolder/myfile.xml"); To retrieve the data xmlDataProvider.retrieve(); // Opens a connection and retrieves data To retrieve data explicitly with
specified Input Stream try { java.io.FileInputStream in = new java.io.FileInputStream("c://myfolder/myfile.xml"); if(!xmlDataProvider.retrieveData(in)) System.out.println("Error while retrieving data"); in.close(); } catch(java.io.IOException e) { System.out.println("Error while opening the file"); } To bind XML Data Access with Chart chart.setGraphDataProvider(xmlDataProvider); |
XML data binding for Java is a powerful alternative to XML document models for applications concerned mainly with the data content of documents.
Some more advantages of using XML are:
Ø XML supports multilingual documents and Unicode, which is important for internationalization of applications.
Ø XML is W3C standard and is endorsed by software industry market leaders.
Ø Context information is easy to evaluate with XML as compared to HTML or plain text as the tags, attributes, and element structure provide context information that can be used to interpret the meaning of content that opens up new possibilities for highly efficient search engines, intelligent data mining agents and many other mediums.
Ø XML documents are self-descriptive.
Ø Any XML tag can possess an unlimited number of attributes such as author or version.
Ø The XML tags can be created as needed.
Ø Data in XML documents can be stored without needing schemas set up by a Database Administrator as they contain meta-data in the form of tags and attributes.
Ø XML is especially suitable for working with unstructured data.
Ø Facilitates the comparison and aggregation of data because of its tree structure.
Ø XML documents can embed any possible data type - from multimedia data (image, sound, video) to active components (Java applets, ActiveX).
Ø Mapping existing data structures like file systems or relational databases to XML is simple.
EJXML is an XML document type capable of defining every aspect of ElegantJ Charts visual properties and data to populate charts. EJXML provides powerful interoperability and integration features to ensure quick deployment of charts to your applications. Once EJXML files are generated to suit the best visual appearance of your charts, setting this EJXML as property for your charts through your code or IDE is just a click away. Also, one can keep on changing EJXML file to reflect changes in visual properties in real time, with this architecture.
The top-level element in EJXML document is <Graph>.
The main subelements of <Graph> are:
ü <CommonProperties>
ü <BackgroundProperties>
ü <GraphAreaProperties>
ü <MouseOverProperties>
ü <TooltipProperties>
ü <TitleProperties>
ü <XAxisProperties>
ü <YAxisProperties>
ü <ZAxisProperties>
ü <’Graphname’Properties>
ü <GraphData>
Other important universal attributes include Top, Left, Anchor, Height, and Width, which control the size and position of the element, and Visible, which hides or shows the element. These attributes are not in <GraphData>.
The <Graph> element represents a chart. A chart's type is specified by its GraphType attributes. There are many attributes and subelements for <Graph>.
Example:
|
<?xml version="1.0" standalone="yes"?> <GraphProperties> <Graph graphType="9"></Graph> <CommonProperties graph3DEffect="true" graph3DHorizontalOffset="10" graph3DVerticalOffset="7" DrillDownEnable="true" defaultTooltipText="" explainNotesStrLen="8" computationType="1" YAxisDivisionValue="1" YAxisMaxLabelValue="1.7976931348623157E308" YAxisMinLabelValue="1.7976931348623157E308" YAxisUnitLabel="" font="[family=Dialog,name=Dialog,style=plain,size=12]" foreground="#000000" graphSize="[width=600,height=350]"></CommonProperties> <BackgroundProperties background="#F5FAFF" gradientAngle="0" gradientColor="#07794F" gradientExtent="400" gradientMode="3" gradientVisible="false" graphBorderColor="#640AC8" graphBorderStyle="0" graphBorderWidth="3"></BackgroundProperties> <GraphAreaProperties graphAreaBackground="#FFFFFF" graphAreaBackgroundVisible="false" graphAreaGradientAngle="30" graphAreaGradientColor="#1419FF" graphAreaGradientExtent="200" graphAreaGradientMode="0" graphAreaGradientVisible="false"></GraphAreaProperties> <MouseOverProperties mouseOverEffectEnable="false" mouseOverStaticTextEnable="false" mouseOverText="item _%SERIES_INDEX" mouseOverTextAlignment="1" mouseOverTextBackground="#F7B8FE" mouseOverTextBackgroundVisible="true" mouseOverTextBorderColor="#640AC8" mouseOverTextBorderStyle="-1" mouseOverTextBorderWidth="1" mouseOverTextEnable="false" mouseOverTextFont="[family=Dialog,name=Dialog,style=plain,size=12]" mouseOverTextForeground="#AE04C1" mouseOverTextMaxLen="12" mouseOverTextShadowColor="#640AC8" mouseOverTextShadowStyle="11" mouseOverTextShadowWidth="4"></MouseOverProperties> <TooltipProperties defaultTooltipText="" tooltipBackground="#FAFA96" tooltipBorderColor="java.awt.Color[r=100,g=10,b=200]" tooltipBorderStyle="2" tooltipBorderWidth="1" tooltipFont="[family=Dialog,name=Dialog,style=plain,size=12]" tooltipForeground="#0A960A" tooltipShowInterval="200" tooltipVisible="true" tooltipVisibleInterval="1500"></TooltipProperties> <TitleProperties graphTitle="Graph Title" graphTitleAlign="9" graphTitleBackgroundVisible="true" graphTitleBackground="java.awt.Color[r=240,g=250,b=200]" graphTitleBorderColor="#640AC8" graphTitleBorderStyle="1" graphTitleBorderWidth="2" graphTitleFont="[family=Dialog,name=Dialog,style=plain,size=12]" graphTitleForeground="#7D0AFA" graphTitleMaxLine="1" graphTitleShadowColor="#0A0A14" graphTitleShadowStyle="13" graphTitleShadowWidth="5" graphTitleVisible="true"></TitleProperties> <XAxisProperties> <NameProperties axisName="" axisNameAlign="1" axisNameBackground="#BEBEF0" axisNameBackgroundVisible="true" axisNameBorderColor="#640AC8" axisNameBorderStyle="2" axisNameBorderWidth="2" axisNameFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisNameForeground="#004080" axisNameMaxLine="1" axisNameShadowColor="#640AC8" axisNameShadowStyle="11" axisNameShadowWidth="4" axisNameVisible="true"></NameProperties> <LabelProperties axisLabelAlign="16" axisLabelAlignAngle="-20" axisLabelBackground="#C8C8C8" axisLabelBackgroundVisible="false" axisLabelDrillDownEnable="false" axisLabelFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisLabelForeground="#000000" axisLabelFormat="" axisLabelGap="5" axisLabelTooltipText="_%SERIES_NAME" axisLabelVisible="true"></LabelProperties> <LineProperties axisLineColor="#000000" axisLineWidth="2" axisTickLineColor="#0000F0" axisTickLineHeight="10" axisTickLinePosition="3" axisTickLineVisible="true" axisTickLineWidth="1"></LineProperties> <GridProperties axisGridLineColor="#C814FA" axisGridLineStyle="1" axisGridLineVisible="true" axisGridLineWidth="1" axisGridStripColor="#C8C8C8" axisGridStripVisible="false"></GridProperties> </XAxisProperties> <YAxisProperties> <NameProperties axisName="" axisNameAlign="1" axisNameBackground="#F0FAC8" axisNameBackgroundVisible="true" axisNameBorderColor="#C89632" axisNameBorderStyle="1" axisNameBorderWidth="2" axisNameFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisNameForeground="#0A5032" axisNameMaxLine="1" axisNameShadowColor="#0A0A14" axisNameShadowStyle="11" axisNameShadowWidth="4" axisNameVisible="true"></NameProperties> <LabelProperties axisLabelAlign="16" axisLabelAlignAngle="0" axisLabelBackground="#C8C8C8" axisLabelBackgroundVisible="false" axisLabelDrillDownEnable="false" axisLabelFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisLabelForeground="#37780A" axisLabelFormat="" axisLabelGap="10" axisLabelTooltipText="value _%DATA_VALUE" axisLabelVisible="true"></LabelProperties> <LineProperties axisLineColor="#000000" axisLineWidth="2" axisTickLineColor="#006496" axisTickLineHeight="10" axisTickLinePosition="3" axisTickLineVisible="true" axisTickLineWidth="1"></LineProperties> <GridProperties axisGridLineColor="#14FA14" axisGridLineStyle="1" axisGridLineVisible="true" axisGridLineWidth="1" axisGridStripColor="#C8C8C8" axisGridStripVisible="false"></GridProperties> </YAxisProperties> <ZAxisProperties> <LegendProperties ZAxisAlignment="8" ZAxisBackground="#FFFFFF" ZAxisBackgroundVisible="true" ZAxisBorderColor="#967884" ZAxisBorderStyle="4" ZAxisBorderWidth="2" ZAxisLabelShowOrder="0" ZAxisPosition="3" ZAxisShadowColor="#0000FF" ZAxisShadowStyle="11" ZAxisShadowWidth="2" ZAxisVisible="true"></LegendProperties> <NameProperties axisName="" axisNameAlign="1" axisNameBackground="#C8D2F0" axisNameBackgroundVisible="true" axisNameBorderColor="#640AC8" axisNameBorderStyle="0" axisNameBorderWidth="2" axisNameFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisNameForeground="#004080" axisNameMaxLine="3" axisNameShadowColor="#640AC8" axisNameShadowStyle="11" axisNameShadowWidth="4" axisNameVisible="true"></NameProperties> <LabelProperties axisLabelAlign="16" axisLabelAlignAngle="0" axisLabelBackground="#FFFFFF" axisLabelBackgroundVisible="false" axisLabelDrillDownEnable="false" axisLabelFont="[family=Dialog,name=Dialog,style=plain,size=12]" axisLabelForeground="#064206" axisLabelFormat="" axisLabelGap="10" axisLabelTooltipText="_%ITEM_NAME" axisLabelVisible="true"></LabelProperties> </ZAxisProperties> <BarProperties> <Common barBorder="com.elegantj.editors.AWTBorder@d1e7c2" barBorderVisible="true" barGapInPercent="-1" barTransperancyInPercent="0" barWidth="8" gradientAngle="200" gradientExtent="50" gradientMode="0" gradientVisible="false" tooltipText=" value _%DATA_VALUE "></Common> <RowInfo color="#BF3FFF" gradientColor="#852CB2"></RowInfo> <RowInfo color="#BF007F" gradientColor="#850058"></RowInfo> <RowInfo color="#FFFF00" gradientColor="#B2B200"></RowInfo> </BarProperties> </GraphData> </GraphProperties> |
In EJXML, chart data is represented with a <GraphData> element. The <GraphData> element is used to store data. It will be associated with the <Graph> element of the same name.
Example:
|
<GraphData> <row> <column>4month</column> <column>type</column> <column>count</column> </row> <row> <column>Jan</column> <column>Legand_1</column> <column>150</column> </row> <row> <column>Jan</column> <column>Legand_2</column> <column>290</column> </row> <row> <column>Jan</column> <column>Legand_3</column> <column>160</column> </row> <row> <column>Feb</column> <column>Legand_1</column> <column>90.6566</column> </row> <row> <column>Feb</column> <column>Legand_2</column> <column>140.45454</column> </row> <row> <column>Feb</column> <column>Legand_3</column> <column>221.3</column> </row> <row> <column>Mar</column> <column>Legand_1</column> <column>290</column> </row> <row> <column>Mar</column> <column>Legand_2</column> <column>90</column> </row> <row> <column>Mar</column> <column>Legand_3</column> <column>150</column> </row> <row> <column>Apr</column> <column>Legand_1</column> <column>55</column> </row> <row> <column>Apr</column> <column>Legand_2</column> <column>167</column> </row> <row> <column>Apr</column> <column>Legand_3</column> <column>330</column> </row> </GraphData> |
Inside of the GraphData, there are two types of elements. The first is a Row element. The other type of element in GraphData is the Column element. Column is subelement of Row element.
A developer has three ways to use charts in an application:
Ø Write your own code
Ø Use third party IDEs
Ø Use ElegantJ Chart Designer IDE
The first two options often involve tedious work, waste of your precious time in writing lengthy source code or splurging money on a third party IDE. But ElegantJ Charts Designer can set you free from that.
ElegantJ Charts Designer is a platform independent, fully functional XML template designer for ElegantJ Charts. Our Charts Designer provides a state-of-art interoperability and integration options through ready to use XML templates that can also be customized to suit your presentation requirements.
Please refer ElegantJ Charts Designer User Manual for more information on usage of chart designer.
Before installing ElegantJ Charts Designer, please ensure that your computer system and development environment are set up and working as per expectations. Person using ElegantJ Charts Designer is expected to be able to write and execute simple JAVA applications.
To be able to use ElegantJ Charts Designer, your computer systems are required to have JDK 1.4.0 or higher.
On extracting ElegantJChartsDesigner.zip, following directories and files will be created
Ø Directory [lib] contains Jar file(s)
Ø Directory [templates] contains template file(s)
Ø Directory [docs] contains document file(s)
Ø Rundesigner.bat to run the ElegantJ Charts Designer
8.1.2.1 Installing on Windows 95/98
To include ElegantJ Charts Designer in CLASSPATH, add following statement to your autoexec.bat file,
Set CLASSPATH=%CLASSPATH%;C:\ElegantJChartsDesigner\lib\EJChartsDesigner.jar;
Restart Windows to get effect of changes made.
8.1.2.2 Installing on Windows NT/2000/XP
Go to Control Panel and select System. You will find environment variables on Environment tab in Windows NT systems and on Advanced tab in Windows 2000 systems.
Find CLASSPATH environment variable or create it.
To include ElegantJ Charts Designer in the CLASSPATH, specify or add following value for variable –
[EXISTING-CLASSES]; C:\ElegantJChartsDesigner\lib\EJChartsDesigner.jar
8.1.2.3 Installing on Unix/Linux
Before you begin using ElegantJ Charts Designer, you must manually configure CLASSPATH environment variable. CLASSPATH must point to the location of classes and installation directory.
For example, to set CLASSPATH for ElegantJ Charts Designer,
setenv CLASSPATH .:/usr/local/ElegantJChartsDesigner/lib/EJChartsDesigner.jar
If you are using Bourne Shell, commands are,
CLASSPATH= $CLASSPATH:.:/usr/local/ElegantJChartsDesigner/lib/EJChartsDesigner.jar:export CLASSPATH
8.1.3Running the ElegantJ Charts Designer
Ø Move to EJChartsDesigner
Ø Run Rundesigner.bat file (only for Windows) or use following commands in command prompt.
java -cp .;./lib/EJChartsDesigner.jar com.graphdesigner.GraphDesigner
OR
java –jar /lib/EJChartsDesigner.jar
It will open ElegantJ Charts Designer. Using designer, you can design and customize chart and save them as XML template.
This designer IDE with our unique process is a software with slick features that help you in designing Java Charts that suit your requirements.
Here are the features:
Ø A platform independent 100% Java tool
Ø Real-time point-and-click WYSIWYG environment
Ø Huge collection of ready-to-use XML templates
Ø Ensures ultimate interoperability, integration and deployment through XML
Ø Eliminates need for third party IDEs
Ø Reduces development cost
Ø Saves development time
Ø Least technical skills requirement
Ø Empowers end users to create attractive Java Charts
ElegantJ Chart Designer IDE is a platform independent graphical designer tool that can be operated from most desktop computers. With an intuitive interface, Chart Designer helps a developer in creating XML templates for visually stunning charts in minutes.
How can using ElegantJ Chart Designer help you?
Ø This Chart Designer supports EJXML to help you dynamically control the visual properties of Java charts
Ø Point-and-click graphical user interface will allow faster chart creation with utmost flexibility
Ø A state-of-art interoperability and integration options with ready to use XML templates to suit your presentation requirements will speed up a complex process for you
Ø Even Graphic designers or novice programmers can use ElegantJCharts to configure complex and eye-catching charts
Ø You can easily import these templates as Java Charts into your application, with minimum source code
EJXML format is superset of XML. Whereas XML is a general and loose format for describing data, EJXML is a rigid and robust XML document type created specifically for defining ElegantJ Charts. EJXML format supports Java Chart configuration options as well as chart data.
Please refer ElegantJ Charts Designer User Manual for more information on using the XML.
|
Description: You have over 50 different types of charts to choose from to suit your requirement. To select a particular chart type, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Choose option of sub type of the chart from Chart Type combo box. |
Code Snippet:
|
Create Instance of Chart //For Bar Chart com.elegantj.graphx.bar.BarGraph chart = new com.elegantj.graphx.bar.BarGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PYRAMID_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PYRAMID_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_PYRAMID_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_PYRAMID_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_PYRAMID_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_PYRAMID_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.CYLINDER_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.CYLINDER_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_CYLINDER_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_CYLINDER_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_CYLINDER_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_CYLINDER_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.CONE_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.CONE_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_CONE_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_CONE_HBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_CONE_VBAR_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_CONE_HBAR_GRAPH); // For Line Chart com.elegantj.graphx.line.LineGraph chart = new com.elegantj.graphx.line.LineGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.LINE_GRAPH/ com.elegantj.graphx.GraphConstants.STRIP_GRAPH/ com.elegantj.graphx.GraphConstants.POINT_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_LINE_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_STRIP_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_POINT_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_LINE_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_STRIP_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_POINT_GRAPH); //For Area Chart com.elegantj.graphx.surface.AreaGraph chart = new com.elegantj.graphx.surface.AreaGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.AREA_GRAPH/ com.elegantj.graphx.GraphConstants.AREA_STACK_GRAPH/ com.elegantj.graphx.GraphConstants.AREA_PERCENTAGE_GRAPH); //For Pie Chart com.elegantj.graphx.pie.PieGraph chart = new com.elegantj.graphx.pie.PieGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.PIE_GRAPH); //For Radar Chart com.elegantj.graphx.radar.RadarGraph chart = new com.elegantj.graphx.radar.RadarGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.RADAR_GRAPH/ com.elegantj.graphx.GraphConstants.DRILLED_RADAR_GRAPH/ com.elegantj.graphx.GraphConstants.DRILLED_STACKED_RADAR_GRAPH); //For Combined Chart com.elegantj.graphx.mix.CombinedGraph chart = new com.elegantj.graphx.mix.CombinedGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.COMBINED_GRAPH); //For Histogram Chart com.elegantj.graphx.histogram.HistogramGraph chart = new com.elegantj.graphx.histogram.HistogramGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.HISTOGRAM_GRAPH); //For XYScatter Chart com.elegantj.graphx.scatter.XYScatterGraph chart = new com.elegantj.graphx.scatter.XYScatterGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.SCATTER_LINE_GRAPH/ com.elegantj.graphx.GraphConstants.SCATTER_POINT_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_SCATTER_LINE_GRAPH/ com.elegantj.graphx.GraphConstants.STACKED_SCATTER_POINT_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_SCATTER_LINE_GRAPH/ com.elegantj.graphx.GraphConstants.PERCENTAGE_SCATTER_POINT_GRAPH); //For Bubble Chart com.elegantj.graphx.bubble.BubbleGraph chart = new com.elegantj.graphx.bubble.BubbleGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.BUBBLE_GRAPH); //For Candle Chart com.elegantj.graphx.candle.CandleGraph chart = new com.elegantj.graphx.candle.CandleGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.CANDLE_STICK_GRAPH/ com.elegantj.graphx.GraphConstants.HIGH_LOW_OPEN_CLOSE_GRAPH); //For Doughnut Chart com.elegantj.graphx.doughnut.DoughnutGraph chart = new com.elegantj.graphx.doughnut.DoughnutGraph(); chart.setGraphType(com.elegantj.graphx.GraphConstants.DOUGHNUT_GRAPH); |
|
Description: ElegantJ Charts allows the charts data to be automatically sorted and resized. To enable data sorting and resizing, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Click on Data Sorting Enable checkbox. |
Code Snippet:
|
chart.setSortDataEnable(true/false); |
|
Description: A variety of fonts is available to select for charts. The options are Dialog, Sans Serif, Monospaced, etc. ElegantJ Charts gives the option of sizing these fonts and also of displaying the selected font as bold, plain, italicized, etc. To select font name, type, and size, enable data sorting and resizing, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Click on Chart Font button. It opens font chooser dialog box. |
|
4 |
Choose from available font options |
Code Snippet:
|
chart.setFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); |
|
Description: To enhance the Chart visuals, ElegantJ Charts lets you set your chart size. To set the chart width and height, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Write width and height of chart in Chart Width and Chart Height text box. |
Code Snippet:
|
chart.setGraphSize(new java.awt.Dimension(600,400)); |
|
Description: Drill-Down effect is aimed to allow a better understanding and analysis of your data. ElegantJ Charts lets you enable or disable this effect. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Click on Drill-Down Enable checkbox |
Code Snippet:
|
chart.setDrillDownEnable(true/false); |
|
Description: To display your data effectively, you can choose from various display formats available. Follow the steps given below for the same: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Format tab of Y-Axis tab in Customizer. |
|
3 |
Write values to format data on chart from format of Y-Axis tab. |
Code Snippet:
|
chart.setComputationType(com.elegantj.graphx.GraphConstants.NONE_COMPUTATION/ com.elegantj.graphx.GraphConstants.SUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.VALID_COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.AVERAGE_COMPUTATION / com.elegantj.graphx.GraphConstants.VALID_AVERAGE_COMPUTATION/ com.elegantj.graphx.GraphConstants.MAXIMUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.MINIMUM_COMPUTATION); chart.setYAxisMaxLabelValue(100.0); //Setting Maximum Plot Value chart.setYAxisMinLabelValue(0.0); //Setting Minimum Plot Value chart.setYDivisionValue(5.0); //Setting Scale (Divisional Value) chart.setYAxisUnitLabel("Kg"); //Setting Unit Text |
|
Description: You can export your chart in formats like GIF, JPEG, etc. These files can be then used as a PhotoChart of your chart and its data. |
Code Snippet:
|
chart.saveAsImageBMP(outputStream); chart.saveAsImageJPEG(outputStream); |
|
Description: To select from 2D or 3D option, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Click on 3D Effect Enable checkbox. |
Code Snippet:
|
chart.setGraph3Deffect(true/false); |
|
Description: ElegantJ Charts gives you the option of applying you 3D horizontal offset to your chart data. This allows a comprehensive understanding of the data. To apply the 3D horizontal offset option, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Write 3D Horizontal offset into Horizontal Offset for 3D Effect text box. |
Code Snippet:
|
chart.setGraph3DHorizontalOffset(10); |
|
Description: ElegantJ Charts gives you the option of applying you 3D vertical offset to your chart data. This allows a comprehensive understanding of the data. To apply the 3D vertical offset option, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Common tab in Customizer. |
|
3 |
Write 3D vertical offset into Vertical Offset for 3D Effect text box. |
Code Snippet:
|
chart.setGraph3DVerticalOffset(10); |
9.2.1.1 How to Set Chart Background Visible?
|
Description: For enhanced look and feel, better visual effects, etc., you can include a background in your chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area Background tab in Customizer. |
|
3 |
Click on Background Visible checkbox. |
Code Snippet:
|
chart.setGraphAreaBackgroundVisible(true/false); |
9.2.1.2 How to Set Chart Background Color?
|
Description: Background color added to your chart can enhance the look of the chart. You can select and add a background color to the chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area Background tab in Customizer. |
|
3 |
Select color from Background Color combo box. |
Code Snippet:
|
chart.setGraphAreaBackground(new java.awt.Color(123,222,200)); |
9.2.1.3
How to Set Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Primary aim of Gradient effect is to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area Background tab in Customizer. |
|
3 |
Click Gradient Property and set the gradient properties. |
Code Snippet:
|
chart.setGraphAreaGradientVisible(true/false); chart.setGraphAreaGradientColor(new java.awt.Color(222,210,198)); chart.setGraphAreaGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.2.2.1
How to Set Border Effect
(None/Solid/Dash/Dot/
DashDot/DashDotDot/Raised/Lowered)?
|
Description: You can select and set the chart border from a variety of borders available. Also, the width of the border and colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Background tab in Customizer. |
|
3 |
Click Border Property button to set the border properties. |
Code Snippet:
|
chart.setGraphBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setGraphBorderColor(new java.awt.Color(222,210,198)); chart.setGraphBorderWidth(2); |
9.2.2.2 How to Set Chart Background Visible?
|
Description: The background of the chart can be set to be visible or you can choose not to have a background in your chart display. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Chart Area tab in Customizer. |
|
3 |
Click on Background Visible checkbox. |
Code Snippet:
|
chart.setGraphBackgroundVisible(true/false); |
9.2.2.3 How to Set Chart Background Color?
|
Description: The background of the chart can be set in a variety of colors. These colors can be selected from a palette provided. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Chart Area tab in Customizer. |
|
3 |
Select color from Background Color combo box. |
Code Snippet:
|
chart.setBackground(new java.awt.Color(120,230,150)); |
9.2.2.4 How to Set Background Image?
|
Description: The background of the chart can be an image selected from a location specified by you. Select the image and display it as your graphical background. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Background tab in Customizer |
|
3 |
Click on Background Image button. Browse location and select an image file from file chooser dialog box. |
Code Snippet:
|
chart.setBackgroundImage(<imageObject>); Or chart.setBgImageFromPath(“image path”); |
9.2.2.5
How to Use Image Rotation
(Horizontal/Vertical/
Both) Feature?
|
Description: The image selected to be the background of the chart can be rotated horizontally or vertically or both ways. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Background tab in Customizer. |
|
3 |
Select option from Background Image Display Type combo box. |
Code Snippet:
|
chart.setBgImageFlipType(com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_FLIP_NONE/ com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_FLIP_HORIZONTAL/ com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_FLIP_VERTICAL/ com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_FLIP_BOTH); |
9.2.2.6
How to Select Image Display
Pattern (Center/
Stretch/Tiled)?
|
Description: The image selected to be the background of the chart can be displayed in the center, stretched, or tiled. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Background tab in Customizer. |
|
3 |
Select option from Background Image Flip Type combo box |
Code Snippet:
|
chart.setBgImageDisplay(com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_DISPLAY_STRETCH/ com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_DISPLAY_TILE/ com.elegantj.graphx.GraphConstants.BACKGROUND_IMAGE_DISPLAY_CENTER); |
9.2.3.1 How to Use MouseOver Effect Feature?
|
Description: ElegantJ Charts provides the MouseOver Effect feature for navigational ease. To use this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Click on Enable checkbox. |
Code Snippet:
|
chart.setMouseOverEffectEnable(true/false); |
9.2.3.2 How to Use Macro-Enabled MouseOver Text Feature?
|
Description: ElegantJ Charts provides the MouseOver Text feature for navigational ease. It is macro enabled. To do this, follow steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Click on MouseOver Text Enable checkbox. |
Code Snippet:
|
chart.setMouseOverTextEnable(true/false); |
9.2.3.3
How to Use MouseOver Text
Alignment (Top/
Center/Bottom)?
|
Description: The MouseOver Text can be aligned on the top, center, or bottom . To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Select option from MouseOver Text Alignment combo box. |
Code Snippet:
|
chart.setMouseOverTextAlignment(com.elegantj.graphx.GraphConstants.TOP/ com.elegantj.graphx.GraphConstants.CENTER/ com.elegantj.graphx.GraphConstants.BOTTOM ); |
9.2.3.4 How to Set Text Font, Foreground, and Background?
|
Description: The text Font, foreground and background for the MouseOver properties can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Click Font button and select color from Foreground and Background Color combo box. |
Code Snippet:
|
chart.setMouseOverTextFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setMouseOverTextForeground(new java.awt.Color(222, 210, 198)); chart.setMouseOverTextBackground(new java.awt.Color(222, 210, 198)); |
9.2.3.5
How to Select Shadow Effect
(None/Glow/Fade/
Hard)?
|
Description: The MouseOver properties can be enhanced visually by using the shadow effect. These effects can be chosen from the options of None, Glow, Fade, and Hard. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Click Border/Shadow Property button to set the shadow properties. |
Code Snippet:
|
chart.setMouseOverTextShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE / com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setMouseOverTextShadowColor(new java.awt.Color(222,210,198)); chart.setMouseOverTextShadowWidth(5); |
9.2.3.6
How to Set Border Effect
(None/Solid/Dash/Dot/
DashDot/DashDotDot/Raised/Lowered)?
|
Description: The border can be selected to be from a variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised and Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select MouseOver tab in Customizer. |
|
3 |
Click Border Property button to set the border properties. |
Code Snippet:
|
chart.setMouseOverTextBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID / com.elegantj.graphx.GraphicsEx.DR_LINE_DASH / com.elegantj.graphx.GraphicsEx.DR_LINE_DOT / com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT / com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT / com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED / com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setMouseOverTextBorderColor(new java.awt.Color(222, 210, 198)); chart.setMouseOverTextBorderWidth(2); |
9.2.4.1 How to Set Macro Enabled Text?
|
Description: The Macro enabled Text for the tool tip text can be set as follows: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and enter the new value. |
Code Snippet:
|
chart.setTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. //com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. //com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). //com.elegantj.graphx.GraphConstants.SIZE_VALUE //(Only Bubble Chart) Displays the size of the bubble. //com.elegantj.graphx.GraphConstants.PERCENT_VALUE //(Only Pie Chart) Displays the percentage of data amongst the data series. |
9.2.4.2 How to Set Text Show Interval?
|
Description: The interval for displaying the text for the Tooltip text can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Enter value in Tooltip Show Interval text box. |
Code Snippet:
|
chart.setTooltipShowInterval(200); //value in milliseconds |
9.2.4.3 How to Set Text Visible Interval?
|
Description: The text visibility interval for the Tooltip text can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Enter value in Tooltip Visible Interval text box. |
Code Snippet:
|
chart.setTooltipVisibleInterval(1500); //value in milliseconds |
9.2.4.4 How to Set Text Font, Foreground and Background?
|
Description: The text font, foreground and background for the Tooltip Text properties can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Click Text Font button and select color from Foreground and Background Color combo box. |
Code Snippet:
|
chart.setTooltipFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setTooltipForeground(new java.awt.Color(222, 210, 198)); chart.setTooltipBackground(new java.awt.Color(222, 210, 198)) |
9.2.4.5
How to Set Border Effect
(None/Solid/Dash/Dot/
DashDot/DashDotDot/Raised/Lowered)?
|
Description: The border can be selected from variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised, or Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Click Border Property button to set the border properties. |
Code Snippet:
|
chart.setTooltipBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setTooltipBorderColor(new java.awt.Color(222,210,198)); chart.setTooltipBorderWidth(2); |
9.2.4.6
How to Select Shadow Effect
(None/Glow/Fade/
Hard)?
|
Description: The Tooltip Text can be enhanced visually by using the shadow effect. These effects can be chosen from the options of None, Glow, Fade, and Hard. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Click Border/Shadow Properties button to set the shadow properties. |
Code Snippet:
|
chart.setTooltipShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setTooltipShadowColor(new java.awt.Color(222,210,198)); chart.setTooltipShadowWidth(5); |
9.2.5.1 How to Set Position (Top/Bottom)?
|
Description: The position of the Title can be set at the top or bottom of the chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Title tab in Customizer. |
|
3 |
Select title position from Position combo box |
Code Snippet:
|
chart.setTitleAlign(com.elegantj.graphx.GraphConstants.TOP/ com.elegantj.graphx.GraphConstants.BOTTOM); |
9.2.5.2 How to Select Alignment (Left/Right/Center)?
|
Description: The chart title can be aligned on left, right or center. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Title tab in Customizer. |
|
3 |
Select title alignment from Alignment combo box. |
Code Snippet:
|
chart.setTitleAlign(com.elegantj.graphx.GraphConstants.LEFT / com.elegantj.graphx.GraphConstants.RIGHT/ com.elegantj.graphx.GraphConstants.CENTER); |
9.2.5.3 How to Set Font, Foreground and Background?
|
Description: The text font, foreground and background for the Title can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Title tab in Customizer. |
|
3 |
Click Font button and select color from Foreground and Background Color combo box. |
Code Snippet:
|
chart.setGraphTitleFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setGraphTitleForeground(new java.awt.Color(222,210,198)); chart.setGraphTitleBackground(new java.awt.Color(222,210,198)); |
9.2.5.4
How to Set Border Effect
(None/Solid/Dash/Dot/
DashDot/DashDotDot/Raised/Lowered)?
|
Description: The border can be selected from a variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised, or Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Title tab in Customizer. |
|
3 |
Click Border/Shadow Properties button to set the border properties. |
Code Snippet:
|
chart.setTitleBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE / com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID / com.elegantj.graphx.GraphicsEx.DR_LINE_DASH / com.elegantj.graphx.GraphicsEx.DR_LINE_DOT / com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT / com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT / com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED / com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setTitleBorderColor(new java.awt.Color(222,210,198)); chart.setTitleBorderWidth(2); |
9.2.5.5
How to Select Shadow Effect
(None/Glow/Fade/
Hard)?
|
Description: The Title can be enhanced visually by using the shadow effect. These effects can be chosen from the options of None, Glow, Fade, and Hard. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Title tab in Customizer. |
|
3 |
Click Border/Shadow Properties button to set the shadow properties. |
Code Snippet:
|
chart.setTitleShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setTitleShadowColor(new java.awt.Color(222,210,198)); chart.setTitleShadowWidth(5); |
|
Description: The axis name for chart axis can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Select Name Visible checkbox under Name tab. |
Code Snippet:
|
chart.setXAxisName("X-Axis"); chart.setYAxisName("Y-Axis"); chart.setZAxisName("Z-Axis"); |
9.2.6.2
How to Set Axis Name Alignment
(Left/Right/
Center)?
|
Description: The axis name can be aligned on the left, right, or center. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Select alignment from Alignment combo box under Name tab. |
Code Snippet:
|
chart.setXAxisNameAlign(com.elegantj.graphx.GraphConstants.LEFT/ com.elegantj.graphx.GraphConstants.RIGHT / com.elegantj.graphx.GraphConstants.CENTER ); chart.setYAxisNameAlign(com.elegantj.graphx.GraphConstants.LEFT/ com.elegantj.graphx.GraphConstants.RIGHT/ com.elegantj.graphx.GraphConstants.CENTER); chart.setZAxisNameAlign(com.elegantj.graphx.GraphConstants.LEFT/ com.elegantj.graphx.GraphConstants.RIGHT / com.elegantj.graphx.GraphConstants.CENTER); |
9.2.6.3
How to Select Axis Name Border
Effect (None/
Solid/Dash/Dot/DashDot/DashDotDot/Raised/
Lowered)?
|
Description: The border can be selected from a variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised or Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click Border Properties button under Name tab to set the border properties. |
Code Snippet:
|
chart.setXAxisNameBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setXAxisNameBorderColor(new java.awt.Color(222,210,198)); chart.setXAxisNameBorderWidth(2); chart.setYAxisNameBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setYAxisNameBorderColor(new java.awt.Color(222,210,198)); chart.setYAxisNameBorderWidth(2); |
9.2.6.4 How to Set Axis Name Font, Foreground and Background?
|
Description: The text font, foreground, and background for the axis name can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click Font button under Name tab and select color from Foreground and Background Color combo box. |
Code Snippet:
|
chart.setXAxisNameFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setXAxisNameForeground(new java.awt.Color(222,210,198)); chart.setXAxisNameBackground(new java.awt.Color(222,210,198)) chart.setYAxisNameFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setYAxisNameForeground(new java.awt.Color(222,210,198)); chart.setYAxisNameBackground(new java.awt.Color(222,210,198)) chart.setZAxisNameFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setZAxisNameForeground(new java.awt.Color(222,210,198)); chart.setZAxisNameBackground(new java.awt.Color(222,210,198)) |
9.2.6.5
How to Set Axis Name Shadow
Effect (None/
Glow/Fade/Hard)?
|
Description: The axis name display can be enhanced visually by using the shadow effect. These effects can be chosen from the options of None, Glow, Fade, and Hard. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click Border Property button under Name tab to set the shadow properties. |
Code Snippet:
|
chart.setXAxisNameShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setXAxisNameShadowColor(new java.awt.Color(222,210,198)); chart.setXAxisNameShadowWidth(5); chart.setYAxisNameShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setYAxisNameShadowColor(new java.awt.Color(222,210,198)); chart.setYAxisNameShadowWidth(5); |
9.2.6.6 How to Set Label Font, Foreground and Background?
|
Description: The label font, and foreground and background can be set. To do this, follow steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click open Font button under Label tab and select color from Foreground and Background Color combo box. |
Code Snippet:
|
chart.setXAxisLabelFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setXAxisLabelForeground(new java.awt.Color(222,210,198)); chart.setXAxisLabelBackground(new java.awt.Color(222,210,198)) chart.setYAxisLabelFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setYAxisLabelForeground(new java.awt.Color(222,210,198)); chart.setYAxisLabelBackground(new java.awt.Color(222,210,198)) chart.setZAxisLabelFont(new java.awt.Font(java.awt.Font.Dialog, java.awt.Font.PLAIN, 12); chart.setZAxisLabelForeground(new java.awt.Color(222,210,198)); chart.setZAxisLabelBackground(new java.awt.Color(222,210,198)) |
9.2.6.7 How to Enable Label Drill-Down (Enable/Disable)?
|
Description: The Label Drill-Down of the chart can be enabled or disabled. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click on Drill-Down Enable checkbox under Label tab. |
Code Snippet:
|
chart.SetXAxisLabelDrillDownEnable(true/false); chart.SetYAxisLabelDrillDownEnable(true/false); chart.SetZAxisLabelDrillDownEnable(true/false); |
9.2.6.8 How to Set Label Tooltip Text?
|
Description: Labels can also be assigned Tooltip Text. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Click Tooltip Text button under Label tab to open Macro Editor dialog box. |
Code Snippet:
|
chart.setXAxisLabelTooltipText(<text>); chart.setYAxisLabelTooltipText(<text>); chart.setZAxisLabelTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.2.6.9
How to Select Grid Style
(None/Solid/
Dash/Dot/DashDot/DashDotDot)?
|
Description: The grid style can be selected from a variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised, or Lowered for an enhanced look and feel. To do this, follow the steps below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis or Y-Axis tab in Customizer. |
|
3 |
Select color and style from Grid Line Color and Grid Line Style combo box under Grid tab. |
Code Snippet:
|
chart.setXAxisGridLineColor(new java.awt.Color(255, 0, 255)); chart.setXAxisGridLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setYAxisGridLineColor(new java.awt.Color(255, 0, 255)); chart.setYAxisGridLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setZAxisGridLineColor(new java.awt.Color(255, 0, 255)); chart.setZAxisGridLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); |
9.2.6.10 How to Select Grid Strip Color for X-Axis?
|
Description: The grid strip color can be selected from a variety of colors provided in the color palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select X-Axis tab in Customizer. |
|
3 |
Select color from Grid Strip Color combo box under Grid tab. |
Code Snippet:
|
chart.setXAxisGridStripColor(new java.awt.Color(204, 255, 255)); chart.setYAxisGridStripColor(new java.awt.Color(204, 255, 255)); |
9.2.6.11
How to Select Computation Type
(None/
Sum/Average/Valid Average/Count/Valid Count/
Maximum/Minimum) on Y-Axis?
|
Description: The computation type for the data on the Y-axis (None/Sum/Average/Valid Average/Count/Valid Count/Maximum/Minimum) can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Y-Axis tab in Customizer. |
|
3 |
Select computation from Value Computation combo box under Format tab. |
Code Snippet:
|
chart.setComputationType(com.elegantj.graphx.GraphConstants.NONE_COMPUTATION/ com.elegantj.graphx.GraphConstants.SUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.VALID_COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.AVERAGE_COMPUTATION/ com.elegantj.graphx.GraphConstants.VALID_AVERAGE_COMPUTATION/ com.elegantj.graphx.GraphConstants.MAXIMUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.MINIMUM_COMPUTATION); |
9.2.6.12 How to Set Axis Maximum Value on Y-Axis?
|
Description: The maximum value on the Y-axis can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Y-Axis tab in Customizer. |
|
3 |
Write value in Maximum Value text box under Format tab. |
Code Snippet:
|
chart.setYAxisMaximumValue(10.0); //default value is Double.MAX_VALUE |
9.2.6.13 How to Set Axis Minimum Value on Y-Axis?
|
Description: The minimum value on the Y-axis can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Y-axis tab in Customizer. |
|
3 |
Write value in Minimum Value text box under Format tab. |
Code Snippet:
|
chart.setYAxisMinimumValue(-10.0); //default value is Double.MAX_VALUE |
9.2.6.14 How to Set Axis Division Value on Y-Axis?
|
Description: The division value on the Y-axis can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Y-Axis tab in Customizer. |
|
3 |
Write value in Division Value text box under Format tab. |
Code Snippet:
|
chart.setYAxisDivisionValue(5); |
9.2.6.15 How to Set Axis Unit Text on Y-Axis?
|
Description: To set the Unit text, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Y-Axis tab in Customizer. |
|
3 |
Write value in Unit Value text box under Format tab. |
Code Snippet:
|
chart.setYAxisUnitLabel("Unit"); |
9.2.6.16 How to Set Position (East/West/North/South) for the Legend?
|
Description: The legend can be positioned in the direction of choice. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Legend tab in Customizer. |
|
3 |
Select legend position from Position combo box under Display tab. |
Code Snippet:
|
chart.setZAxisPosition(com.elegantj.graphx.GraphConstants.EAST/ com.elegantj.graphx.GraphConstants.WEST/ com.elegantj.graphx.GraphConstants.NORTH/ com.elegantj.graphx.GraphConstants.SOUTH); |
9.2.6.17
How to Select Alignment
(Left/Right/Top/
Bottom/Center) for the Legend?
|
Description: The legend can be aligned on the left, right, top, bottom, or center. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Legend tab in Customizer. |
|
3 |
Select legend alignment from Alignment combo box under Display tab. |
Code Snippet:
|
chart.setXAxisNameAlign(com.elegantj.graphx.GraphConstants.CENTER / com.elegantj.graphx.GraphConstants.LEFT / com.elegantj.graphx.GraphConstants.RIGHT / com.elegantj.graphx.GraphConstants.TOP / com.elegantj.graphx.GraphConstants.BOTTOM ); chart.setYAxisNameAlign(com.elegantj.graphx.GraphConstants.CENTER / com.elegantj.graphx.GraphConstants.LEFT / com.elegantj.graphx.GraphConstants.RIGHT / com.elegantj.graphx.GraphConstants.TOP / com.elegantj.graphx.GraphConstants.BOTTOM ); chart.setZAxisNameAlign(com.elegantj.graphx.GraphConstants.CENTER / com.elegantj.graphx.GraphConstants.LEFT / com.elegantj.graphx.GraphConstants.RIGHT / com.elegantj.graphx.GraphConstants.TOP / com.elegantj.graphx.GraphConstants.BOTTOM ); |
9.2.6.18
How to Select Legend Border
Effect (None/Solid/
Dash/Dot/DashDot/DashDotDot/Raised/Lowered)?
|
Description: The legend border can be selected from a variety of options like None, Solid, Dash, Dot, DashDot, DashDotDot, Raised, or Lowered for an enhanced look and feel. The steps are as follows: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Legend tab in Customizer. |
|
3 |
Click Border Properties button under Display tab to set the border properties. |
Code Snippet:
|
chart.setZAxisNameBorderStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_NONE/ com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOTDOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_RAISED/ com.elegantj.graphx.GraphicsEx.DR_LINE_LOWERED); chart.setZAxisNameBorderColor(new java.awt.Color(222,210,198)); chart.setZAxisNameBorderWidth(2); |
9.2.6.19
How to Select Legend Shadow
Effect (None/Glow/
Fade/Hard)?
|
Description: The legend can be enhanced visually by using the shadow effect. These effects can be chosen from the options of None, Glow, Fade, and Hard. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Legend tab in Customizer. |
|
3 |
Click Border Properties button under Display tab to set the shadow properties. |
Code Snippet:
|
chart.setZAxisNameShadowStyle(com.elegantj.graphx.GraphConstants.DR_SHADOW_NONE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_GLOW/ com.elegantj.graphx.GraphConstants.DR_SHADOW_FADE/ com.elegantj.graphx.GraphConstants.DR_SHADOW_HARD); chart.setZAxisNameShadowColor(new java.awt.Color(222,210,198)); chart.setZAxisNameShadowWidth(5); |
9.2.6.20 How to Allow User to Select Color for Legend Value?
|
Description: The legend can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Legend tab in Customizer. |
|
3 |
Select color from Foreground Color combo box under Label tab. |
Code Snippet:
|
chart.setZAxisLabelForeground(new java.awt.Color(222,210,198)); |
9.3.1.1 How to Select Bar Colors?
|
Description: The bar colors can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select colors button, it will open Bar Color Chooser dialog. |
|
4 |
Set color for each bar. |
Code Snippet:
|
Create Instance of Bar Chart com.elegantj.graphx.bar.BarGraph Chart = new com.elegantj.graphx.bar.BarGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setBarColors(colorVector); |
9.3.1.2 How to Set Bar Border Visible?
|
Description: The border of a Bar Chart can be made visible or invisible. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select border Style from the Border Style combo box. |
Code Snippet:
|
chart.setBarBorderVisible(true/false); |
9.3.1.3 How to Set the Border Color?
|
Description: The chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select border color from the Border Color combo box. |
Code Snippet:
|
chart.setBarBorderColor(new java.awt.Color(222, 233, 239)); |
9.3.1.4 How to Set the Transparency Level?
|
Description: The transparency of the Chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setBarTransperancyInPercent(50); |
9.3.1.5
How to Set the Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect is primarily used to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette available. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Click Gradient Properties button to select Gradient Style from the combo box. |
Code Snippet:
|
chart.setBarGradientVisible(true/false); chart.setBarGradientExtent(100); chart.setBarGradientAngle(45); chart.setBarGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.1.6 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert Tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Click on Tooltip Text button set tooltip text feature. |
Code Snippet:
|
chart.setBarTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE
//Displays the value of particular data (default display). |
9.3.1.7 How to Set the Bar Width?
|
Description: The bar width of the Bar chart can be set: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Write width of bar in Width text box. |
Code Snippet:
|
chart.setBarWidth(20); |
9.3.1.8 How to Set the Gap between Bars in Percentage?
|
Description: The gap between the Bars in the Chart can be set in percentage as follows: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Write value in Gap in Percentage text box. |
Code Snippet:
|
chart.setBarGapInPercent(50); //default value is (-1) |
9.3.2.1
How to Select Line Style
(Solid/Dash/Dot/
DashDot)?
|
Description: The line style can be selected from a variety of options like Solid, Dash, Dot, and DashDot for enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Select line style from Line Style combo box. |
Code Snippet:
|
Create Instance of Line Chart com.elegantj.graphx.line.LineGraph Chart = new com.elegantj.graphx.line.LineGraph(); chart.setGraphLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT); |
9.3.2.2
How to Set the Line Position
(Front/Middle/
Back)?
|
Description: The position of the line can be selected to be at front, middle, or back. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Select line position from Position combo box. |
Code Snippet:
|
chart.setLinePosition(com.elegantj.graphx.GraphConstants.FRONT/ com.elegantj.graphx.GraphConstants.MIDDLE/ com.elegantj.graphx.GraphConstants.BACK); |
9.3.2.3 How to Enable Curve Line?
|
Description: The curve line can be set to be visible or you can choose not to have a curve line in your chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Curve Enable checkbox. |
Code Snippet:
|
chart.setLineCurveEnable(true/false); |
9.3.2.4 How to Set Line Colors?
|
Description: The line chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button to select color from the Line Color combo box. |
Code Snippet:
|
java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.line.LineGraphRowInfo info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(200, 233, 199)); colorVector.add(info); info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(133, 233, 100)); colorVector.add(info); chart.setLineDetailProperties(colorVector); |
9.3.2.5 How to Set Line Width?
|
Description: The line width of the Line chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button to select the line from the Line Width combo box. |
Code Snippet:
|
chart.setLineWidth(3); |
9.3.2.6
How to Set Data Point Style
(None/Square/
Circle/Triangle/Diamond/Star/Plus)?
|
Description: The Data Point shape can be set to None, Square, Circle, Triangle, Diamond, Star, or Plus. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select Data Point Shape from the combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDataPointShape(com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_NONE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_SQUARE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_CIRCLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_TRIANGLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_DIAMOND/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_STAR/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_PLUS); |
9.3.2.7 How to Select Data Point Color?
|
Description: The data point shape can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select Data Point Color from the combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeColor(new java.awt.Color(100, 150, 200); |
9.3.2.8 How to Set Data Point Size (Width/Height)?
|
Description: The data point size (width or height) of the Line Chart is set by following the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button. Write width and height of data point in Data Point Width and Data Point Height text box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeWidth(6); info.setDPShapeHeight(6); |
9.3.2.9 How to Select Data Point Border Color?
|
Description: The data point border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Data Point Border Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeBorderVisible(Color.black); |
9.3.2.10 How to Select Strip Border Color?
|
Description: The strip border color can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Line Strip Border Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setStripBorderColor(Color.black); |
9.3.2.11 How to Set Strip Width?
|
Description: The strip width of the Line chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line properties button and write width of line strip in Line Strip Width text box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setStripWidth(10); |
9.3.2.12 How to Set the Transparency Level?
|
Description: The transparency of the Chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Set the Color Transparency. |
Code Snippet:
|
chart.setTransperancyInPercent(50); |
9.3.2.13 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Tooltip Text button and set Tooltip text feature. |
Code Snippet:
|
chart.setLineTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from //starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data //series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular //data series. com.elegantj.graphx.GraphConstants.DATA_VALUE
//Displays the value of particular data (default //display). |
9.3.3.1 How to Select Area Colors?
|
Description: The area colors can be chosen from the options provided in the palette. This is done as follows: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Select colors button, it will open Area Color Chooser dialog. |
|
4 |
Set color for each area. |
Code Snippet:
|
Create Instance of AreaGraph com.elegantj.graphx.surface.AreaGraph Chart = new com.elegantj.graphx.surface.AreaGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100,233)); colorVector.add(info); chart.setAreaColors(colorVector); |
9.3.3.2 How to Set Area Border Visible?
|
Description: The area border of Area chart can be made visible or invisible. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Click on Border Visible checkbox. |
Code Snippet:
|
chart.setAreaBorderVisible(true/false); |
9.3.3.3 How to Set the Border Color?
|
Description: The Chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Select border color from the Border Color combo box. |
Code Snippet:
|
chart.setAreaBorderColor(new java.awt.Color(222, 233, 239)); |
9.3.3.4 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setAreaTransperancyInPercent(50); |
9.3.3.5
How to Set the Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect is primarily used to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Click on Gradient Properties button and select Gradient Style from the combo box. |
Code Snippet:
|
chart.setAreaGradientVisible(true/false); chart.setAreaGradientExtent(100); chart.setAreaGradientAngle(45); chart.setAreaGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.3.6 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the Chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Click on Tooltip Text button and set Tooltip Text feature. |
Code Snippet:
|
chart.setAreaTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.3.7 How to Set the Area Width?
|
Description: The area width of the Area chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Write width of area in Width text box. |
Code Snippet:
|
chart.setAreaWidth(20); |
9.3.3.8 How to Set the Gap between Areas in Percentage?
|
Description: The gap between the areas in the chart can be set in percentage. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Write value in Gap in Percentage text box. |
Code Snippet:
|
chart.setAreaGapInPercent(50); //
default value is (-1) |
9.3.4.1 How to Set Pie Colors?
|
Description: The Pie Chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Area tab in Customizer. |
|
3 |
Select colors button, it will open Pie Color Chooser dialog. |
|
4 |
Set color for each pie. |
Code Snippet:
|
Create Instance of Pie Chart com.elegantj.graphx.pie.PieGraph Chart = new com.elegantj.graphx.pie.PieGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); Info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setPieColors(colorVector); |
9.3.4.2 How to Use Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Click on Pie Tooltip Text button under Pie tab and set Tooltip Text feature. |
Code Snippet:
|
chart.setPieTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). com.elegantj.graphx.GraphConstants.PERCENT_VALUE //(Only Pie Chart) Displays the percentage of data amongst the data series. |
9.3.4.3
How to Set Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient aims to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Click on Gradient Properties button under Pie tab and select Gradient Style from combo box. |
Code Snippet:
|
chart.setPieGradientVisible(true/false); chart.setPieGradientExtent(100); chart.setPieGradientAngle(45); chart.setPieGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.4.4 How to Set the Border Color?
|
Description: The border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Select color from the Border Color combo box under Pie tab. |
Code Snippet:
|
chart.setPieBorderColor(new java.awt.Color(222, 233, 239)); |
9.3.4.5 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Set Pie Transparency under Pie tab. |
Code Snippet:
|
chart.setPieTranperancyInPercent(50); |
9.3.4.6 How to Set Pie Size (Width/Height/Depth)?
|
Description: The pie size (width or height or depth) of the Pie chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Write width, height, and depth of pie in Width, Height, and Depth text boxes under Layout tab. |
Code Snippet:
|
chart.setPieWidth(300); chart.setPieHeight(175); chart.setPieDepth(50); |
9.3.4.7 How to Set Gap between Pie?
|
Description: The gap between the pies in the chart can be set as follows: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Write gap between pie in Gap text box under Layout tab. |
Code Snippet:
|
chart.setPieGap(20); |
9.3.4.8 How to Select Pie Draw in Number of Row?
|
Description: To select pie draw in number of rows, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Write row number of pie in Row text box under Layout tab. |
Code Snippet:
|
chart.setPieRow(3); |
9.3.4.9 How to Select Pie Draw in Number of Columns?
|
Description: To select Pie draw in number of columns, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Write column number of pie in Col text box under Layout. |
Code Snippet:
|
chart.setPieColumn(2); |
9.3.4.10 How to Select Pie Start Angle?
|
Description: To select Pie start angle, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Write start angle of pie in Start Angle text box under Layout tab. |
Code Snippet:
|
chart.setPieStartAngle(0); |
9.3.4.11
How to Set Border Style
(None/Simple/Raised/
Lowered)?
|
Description: The border can be selected from a variety of options like None, Simple, Raised and Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Select border style from Border Style combo box under Pie tab. |
Code Snippet:
|
chart.setPieBorderStyle(com.elegantj.editors.AWTBorder.NONE/ com.elegantj.editors.AWTBorder.SIMPLE/ com.elegantj.editors.AWTBorder.RAISED/ com.elegantj.editors.AWTBorder.LOWERED); |
9.3.4.12 How to Set Border Width?
|
Description: The border width of the Pie chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Pie tab in Customizer. |
|
3 |
Select border width from Border Width combo box under Pie tab. |
Code Snippet:
|
chart.setPieBorderWidth(2); |
9.3.5.1 How to Set Colors for the Radar Chart?
|
Description: The Radar chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Select colors button, it will open Radar Color Chooser dialog. |
Code Snippet:
|
Create Instance of Radar Chart com.elegantj.graphx.radar.RadarGraph Chart = new com.elegantj.graphx.radar.RadarGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setRadarColors(colorVector); |
9.3.5.2 How to Set Radar Diameter?
|
Description: The Radar chart diameter can be set to allow you to choose the size of your chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Write value in Diameter text box. |
Code Snippet:
|
chart.setRadarDiameter(300); |
9.3.5.3 How to Set the Border Width?
|
Description: The border width of the Radar chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Select border width from Border Width combo box. |
Code Snippet:
|
chart.setRadarBorderWidth(2); |
9.3.5.4 How to Set Border Color?
|
Description: The Radar chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Select color from Border Color combo box. |
Code Snippet:
|
chart.setRadarBorderColor(Color.black); |
9.3.5.5 How to Set Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setRadarTransperancyInPercent(50); |
9.3.5.6
How to Use Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect is a new feature added to the ElegantJ Charts. Its primary aim is to enhance the chart appearance. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Radar tab in Customizer. |
|
3 |
Click on Gradient Properties button and set the Gradient Properties. |
Code Snippet:
|
chart.setRadarGradientVisible(true/false) chart.setRadarGradientExtent(100); chart.setRadarGradientAngle(45); chart.setRadarGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.5.7 How to Insert Tooltip Text?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Tooltip tab in Customizer. |
|
3 |
Click on Tooltip Text button and enter the new value of Macro text. |
Code Snippet:
|
chart.setRadarTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.6.1 How to Select Bar Colors?
|
Description: The bar colors can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select colors button, it will open Bar Color Chooser dialog. |
|
4 |
Set color for each bar. |
Code Snippet:
|
Create Instance of Combined Chart com.elegantj.graphx.mix.CombinedGraph Chart = new com.elegantj.graphx.mix.CombinedGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setBarColors(colorVector); |
9.3.6.2 How to Set Border Visible?
|
Description: The bar border of Combined chart can be made visible or invisible. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select border Style from the Border Style combo box. |
Code Snippet:
|
chart.setBarBorderVisible(true/false); |
9.3.6.3 How to Set the Border Color?
|
Description: The chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Select border color from the Border Color combo box. |
Code Snippet:
|
chart.setBarBorderColor(new java.awt.Color(222, 233, 239)); |
9.3.6.4 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setBarTransperancyInPercent(50); |
9.3.6.5
How to Set the Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect is primarily used to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Click on Gradient Properties button and select Gradient Style from the combo box. |
Code Snippet:
|
chart.setBarGradientVisible(true/false); chart.setBarGradientExtent(100); chart.setBarGradientAngle(45); chart.setBarGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.6.6 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Click on Tooltip Text button and set Tooltip Text feature. |
Code Snippet:
|
chart.setBarTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.6.7 How to Set the Bar Width?
|
Description: The bar width of the Combined Chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Write width of bar in Width text box. |
Code Snippet:
|
chart.setBarWidth(20); |
9.3.6.8 How to Set the Gap between Areas in Percentage?
|
Description: The gap between the areas in the chart can be set in percentage. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bar tab in Customizer. |
|
3 |
Write value in Gap in Percentage text box. |
Code Snippet:
|
chart.setBarGapInPercent(50); //default value is (-1) |
9.3.6.9
How to Select Line Style
(Solid/Dash/Dot/
DashDot)?
|
Description: The line style can be selected from a variety of options like Solid, Dash, Dot, and DashDot for enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Select line style from Line Style combo box. |
Code Snippet:
|
chart.setGraphLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT); |
9.3.6.10
How to Set the Line Position
(Front/Middle/
Back)?
|
Description: The position of the line can be selected to be at the front, middle or back. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Select line position from Position combo box. |
Code Snippet:
|
chart.setLinePosition(com.elegantj.graphx.GraphConstants.FRONT/ com.elegantj.graphx.GraphConstants.MIDDLE/ com.elegantj.graphx.GraphConstants.BACK); |
9.3.6.11 How to Enable Curve Line?
|
Description: The curve line can be set to be visible or you can choose not to have a curve line in your chart. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Curve Enable checkbox. |
Code Snippet:
|
chart.setLineCurveEnable(true/false); |
9.3.6.12 How to Set Line Colors?
|
Description: The Combined chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Line Color combo box. |
Code Snippet:
|
java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.line.LineGraphRowInfo info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(200, 233, 199)); colorVecto.add(info); info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(133, 233, 100)); colorVecto.add(info); chart.setLineDetailProperties(colorVector); |
9.3.6.13 How to Set Line Width?
|
Description: The line width of the Combined chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select the line from the Line Width combo box. |
Code Snippet:
|
chart.setLineWidth(3); |
9.3.6.14
How to Set Data Point Shape
Style (None/Square/
Circle/Triangle/Diamond/Star/Plus)?
|
Description: The Data Point shape can be set to None, Square, Circle, Triangle, Diamond, Star, or Plus. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select Data Point Shape from the combo box. |
9.3.6.15 How to Select Data Point Color?
|
Description: The data point shape can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select Data Point Color from the combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDataPointShape(com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_NONE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_SQUARE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_CIRCLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_TRIANGLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_DIAMOND/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_STAR/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_PLUS); info.setDPShapeColor(new java.awt.Color(100, 150, 200)) |
9.3.6.16 How to Set Data Point Size (Width/Height)?
|
Description: The data point size (width or height) of the Combined chart is set by following the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and write width and height of data point in Data Point Width and Data Point Height text box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeWidth(6); info.setDPShapeHeight(6); |
9.3.6.17 How to Select Data Point Border Color?
|
Description: The data point border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Data Point Border Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeBorderVisible(Color.black); |
9.3.6.18 How to Select Strip Border Color?
|
Description: The strip border color can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Line Strip Border Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setStripBorderColor(Color.black); |
9.3.6.19 How to Set Strip Width?
|
Description: The strip width of the Combined chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Line Properties button and write width of line strip in Line Strip Width text box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setStripWidth(10); |
9.3.6.20 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Set the Color Transparency. |
Code Snippet:
|
chart.setTransperancyInPercent(50); |
9.3.6.21 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the Chart data. You can insert tool tip in your Chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Click on Tooltip Text button and set tooltip text feature. |
Code Snippet:
|
chart.setLineTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.7.1 How to Indicate Start of a Section?
|
Description: The starting of a session can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Write start of section value in Start of Section text box. |
Code Snippet:
|
Create Instance of Histogram Chart. com.elegantj.graphx.histogram.HistogramGraph Chart = new com.elegantj.graphx.histogram.HistogramGraph(); chart.setStartOfSection(20); // It can be number, date, or time. |
9.3.7.2 How to Indicate End of a Section?
|
Description: The ending of a section can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Write end of section value in End of Section text box. |
Code Snippet:
|
chart.setEndOfSection(100); //It can be number, date, or time. |
9.3.7.3 How to Set the Width of the Section?
|
Description: The width of a section of the histogram can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Write width of section value in Width of Section text box. |
Code Snippet:
|
chart.setWidthOfSection(10); |
9.3.7.4 How to Select Bar Colors?
|
Description: The Histogram chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Click on Colors button and set the bar colors. |
Code Snippet:
|
java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVecto.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setBarColors(colorVector); |
9.3.7.5 How to Set the Bar Width?
|
Description: The Bar width of the Histogram can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Write width of bar in Width text box. |
Code Snippet:
|
chart.setBarWidth(15); |
9.3.7.6 How to Set Gap between Bars in Percentage?
|
Description: The gap between the bars in the chart can be set in percentage. To do this, follow the steps mentioned below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Write value in Gap in Percentage text box. |
Code Snippet:
|
chart.setBarGapInPercent(50); |
9.3.7.7
How to Select Border Style
(None/Simple/Raised/
Lowered)?
|
Description: The border can be selected from a variety of options like None, Simple, Raised and Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Select the border style from the Border Style combo box. |
Code Snippet:
|
chart.setBarBorderStyle(com.elegantj.editors.AWTBorder.NONE/ com.elegantj.editors.AWTBorder.SIMPLE/ com.elegantj.editors.AWTBorder.RAISED/ com.elegantj.editors.AWTBorder.LOWERED); |
9.3.7.8 How to Set Border Width?
|
Description: The border width of the Histogram can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Select the border width from the Border Width combo box. |
Code Snippet:
|
chart.setBarBorderWidth(2); |
9.3.7.9 How to Set Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setBarInPercent(50); |
9.3.7.10 How to Use Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and set the tooltip text feature. |
Code Snippet:
|
chart.setBarTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.7.11
How to Set Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect aims to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Histogram tab in Customizer. |
|
3 |
Click on Gradient Properties button and select gradient style from the Gradient Style combo box. |
Code Snippet:
|
chart.setBarGradientVisible(true/false); chart.setBarGradientExtent(100); chart.setBarGradientAngle(45); chart.setBarGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.8.1
How to Select Line Style
(Solid/Dash/Dot/
DashDot)?
|
Description: The line style can be selected to be from a variety of options like Solid, Dash, Dot, and DashDot for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Line tab in Customizer. |
|
3 |
Select line style from Line Style combo box. |
Code Snippet:
|
Create Instance of XYScatter Chart. com.elegantj.graphx.scatter.XYScatterGraph Chart = new com.elegantj.graphx.scatter.XYScatterGraph(); chart.setGraphLineStyle(com.elegantj.graphx.GraphicsEx.DR_LINE_SOLID/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASH/ com.elegantj.graphx.GraphicsEx.DR_LINE_DOT/ com.elegantj.graphx.GraphicsEx.DR_LINE_DASHDOT); |
9.3.8.2
How to Set the Line Position
(Front/Middle/
Back)?
|
Description: The line position of the XYScatter Line chart can be set to front, back, or middle. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Select line position from the Position combo box. |
Code Snippet:
|
chart.setLinePosition(com.elegantj.graphx.GraphConstants.FRONT/ com.elegantj.graphx.GraphConstants.MIDDLE/ com.elegantj.graphx.GraphConstants.BACK); |
9.3.8.3 How to Enable Curve Line?
|
Description: The property of XYScatter Line Chart can be set in order to enable curved lines. To do this, follow the steps below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Curve Enable checkbox. |
Code Snippet:
|
chart.setLineCurveEnable(true/false); |
9.3.8.4 How to Set Line Colors?
|
Description: The XYScatter chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Line Color combo box. |
Code Snippet:
|
java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.line.LineGraphRowInfo info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(200,233, 199)); colorVector.add(info); info = new com.elegantj.graphx.line.LineGraphRowInfo(); info.setLineColor(new java.awt.Color(133, 233, 100)); colorVector.add(info); chart.setLineDetailProperties(colorVector); |
9.3.8.5 How to Set Line Width?
|
Description: The line width of the XYScatter chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and select the line from the Line Width combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setLineWidth(3); |
9.3.8.6
How to Set Data Point Shape
Style (None/Square/
Circle/Triangle/Diamond/Star/Plus)?
|
Description: The data point shape style can be select
from the options of None/Square/ |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and select the shape from the Data Point Shape combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDataPointShape(com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_NONE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_SQUARE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_CIRCLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_TRIANGLE/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_DIAMOND/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_STAR/ com.elegantj.graphx.line.LineGraph.DATAPOINT_SHAPE_PLUS); |
9.3.8.7 How to Select Data Point Color?
|
Description: The data point shape can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Data Point Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeColor(new java.awt.Color(100, 150, 200)) |
9.3.8.8 How to Set Data Point Size (Width/Height)?
|
Description: The strip width of the Line chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and write width and height of data point in Data Point Width and Data Point Height text boxes. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeWidth(6); info.setDPShapeHeight(6); |
9.3.8.9 How to Select Data Point Border Color?
|
Description: The data point border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Line Properties button and select color from the Data Point Border Color combo box. |
Code Snippet:
|
com.elegantj.graphx.line.LineGraphRowInfo info = chart.getLineDetailProperties(); info.setDPShapeBorderVisible(Color.black); |
9.3.8.10 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Set the Color Transparency. |
Code Snippet:
|
chart.setTransperancyInPercent(50); |
9.3.8.11 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tool tip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select XYScatter tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and set tooltip text feature. |
Code Snippet:
|
chart.setLineTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.9.1
How to Set the Bubble Position
(Front/Middle/
Back)?
|
Description: The bubble position in the Bubble chart can be set to front, back, or middle. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Select bubble position from Position combo box. |
Code Snippet:
|
Create Instance of Bubble Chart. com.elegantj.graphx.bubble.BubbleGraph chart = new com.elegantj.graphx.bubble.BubbleGraph(); chart.setPosition(com.elegantj.graphx.GraphConstants.FRONT / com.elegantj.graphx.GraphConstants.MIDDLE / com.elegantj.graphx.GraphConstants.BACK); |
9.3.9.2 How to Set Bubble Colors?
|
Description: The Bubble chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Click on Colors button and set the bubble color. |
Code Snippet:
|
java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setBubbleColors(colorVector); |
9.3.9.3 How to Set Border Width?
|
Description: The bubble border width of the Bubble chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Select border width from the Border Width combo box. |
Code Snippet:
|
chart.setBorderVisible(true/false); chart.setBorderWidth(2); chart.setBorderColor(new java.awt.Color(222, 233, 199)); |
9.3.9.4 How to Set the Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setTransperancyInPercent(50); |
9.3.9.5 How to Set the Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and set the tooltip text feature. |
Code Snippet:
|
chart.setBubbleTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). com.elegantj.graphx.GraphConstants.SIZE_VALUE
//(Only Bubble Chart) Displays the size of the bubble. |
9.3.9.6 How to Make Bubble Center Visible?
|
Description: The bubble center can be enabled. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Click on Center Visible checkbox. |
Code Snippet:
|
chart.setCenterVisible(true/false); |
9.3.9.7
How to Select Bubble
Computation Type (None/
Sum/Average/Valid Average/Count/Valid Count/
Maximum/Minimum)?
|
Description: The computation type for the data on the Y-axis (None/Sum/Average/Valid Average/Count/Valid Count/Maximum/Minimum) can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Select bubble computation from the Computation combo box. |
Code Snippet:
|
chart.setBubbleComputationType(com.elegantj.graphx.GraphConstants.NONE_COMPUTATION/ com.elegantj.graphx.GraphConstants.SUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.VALID_COUNT_COMPUTATION/ com.elegantj.graphx.GraphConstants.AVERAGE_COMPUTATION/ com.elegantj.graphx.GraphConstants.VALID_AVERAGE_COMPUTATION/ com.elegantj.graphx.GraphConstants.MAXIMUM_COMPUTATION/ com.elegantj.graphx.GraphConstants.MINIMUM_COMPUTATION); |
9.3.9.8
How to Set Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: Gradient effect aims to enhance the chart graphics. You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette available. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Bubble tab in Customizer. |
|
3 |
Click on Gradient Properties button and select Gradient Style from combo box. |
Code Snippet:
|
chart.setBubbleGradientVisible(true/false); chart.setBubbleGradientExtent(100); chart.setBubbleGradientAngle(45); chart.setBubbleGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
9.3.10.1 How to Set the Start of A Session?
|
Description: The starting of a session can be set. To do this, follow steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Write value of start of session in Session Start text box. |
Code Snippet:
|
chart.setSessionStart(10); //It can be a number, date, or time. |
9.3.10.2 How to Set the End of a Session?
|
Description: The ending of a session can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Write value of end of session in Session End text box. |
Code Snippet:
|
Create Instance of Candle Chart com.elegantj.graphx.candle.CandleGraph Chart = new com.elegantj.graphx.candle.CandleGraph(); chart.setSessionEnd(100); //It can be a number, date, or time. |
9.3.10.3 How to Set the Real Body Width?
|
Description: The real body width of the Candle chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Write value in Real Body Width text box. |
Code Snippet:
|
chart.setRealBodyWidth(20); |
9.3.10.4 How to Select the Filled Body Color?
|
Description: The filled body color can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select body color from the Filled Body Color combo box. |
Code Snippet:
|
chart.setRealBodyColor(new java.awt.Color(123, 222, 190)); |
9.3.10.5 How to Select the Empty Body Color?
|
Description: The empty body color can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select body color from the Empty Body Color combo box. |
Code Snippet:
|
chart.setEmptyBodyColor(new java.awt.Color(125, 111, 145)); |
9.3.10.6 How to Set the Shadow Line Width?
|
Description: The shadow line width of the Stock (candle) chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Write the width in Shadow Line Width text box. |
Code Snippet:
|
chart.setShadowLineWidth(8); |
9.3.10.7 How to Set the Shadow Line Color?
|
Description: The shadow line color can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select line color from the Shadow Line Color combo box. |
Code Snippet:
|
chart.setShadowLineColor(new java.awt.Color(111, 123, 255)); |
9.3.10.8 How to Set Border Width?
|
Description: The border width of the Stock chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select border from the Border Width combo box. |
Code Snippet:
|
chart.setBarBorderWidth(2); |
9.3.10.9 How to Set Border Color?
|
Description: The Chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select color from the Border Color combo box. |
Code Snippet:
|
chart.setBarBorderColor(Color.black); |
9.3.10.10
How to Set Border Style
(None/Simple/Raised/
Lowered/)?
|
Description: The border can be selected from a variety of options like None, Simple, Raised and Lowered for an enhanced look and feel. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Select border style from the Border Style combo box. |
Code Snippet:
|
chart.setBarBorderStyle(com.elegantj.editors.AWTBorder.NONE/ com.elegantj.editors.AWTBorder.SIMPLE/ com.elegantj.editors.AWTBorder.RAISED/ com.elegantj.editors.AWTBorder.LOWERED); |
9.3.10.11 How to Set Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setCandleTransperancyInPercent(50); |
9.3.10.12 How to Use Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Candle tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and set the tooltip text feature. |
Code Snippet:
|
chart.setCandleTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.11.1 How to Select Doughnut Colors?
|
Description: The Doughnut chart can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Select colors button, it will open Doughnut Color Chooser dialog. |
Code Snippet:
|
Create Instance of Doughnut Chart com.elegantj.graphx.doughnut.DoughnutGraph Chart = new com.elegantj.graphx.doughnut.DoughnutGraph(); java.util.Vector colorVector = new java.util.Vector(); com.elegantj.graphx.RowInfo info = new com.elegantj.graphx.RowInfo(new java.awt.Color(100, 200, 233)); colorVector.add(info); info = new com.elegantj.graphx.RowInfo(new java.awt.Color(150, 100, 233)); colorVector.add(info); chart.setDonutColors(colorVector); |
9.3.11.2 How to Set the Doughnut Size (Width/Height/Depth)?
|
Description: The size of the doughnut of the Doughnut chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Write width of doughnut in Width text box. |
Code Snippet:
|
chart.steDonutWidth(300); chart.setHeightInPercent(50);(Height is % of Width) chart.setDonutDepth(50); |
9.3.11.3 How to Set Border Width?
|
Description: The border width of the Doughnut chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Select border from the Border Width combo box. |
Code Snippet:
|
chart.setBorderWidth(2); |
9.3.11.4 How to Set Border Color?
|
Description: The Chart border can be enhanced visually by adding colors. These can be chosen from the options provided in the palette. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Select color from the Border Color combo box. |
Code Snippet:
|
chart.setBorderColor(new java.awt.Color(233, 222, 100)); |
9.3.11.5 How to Set Transparency Level?
|
Description: The transparency of the chart can be set. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Set the Transparency. |
Code Snippet:
|
chart.setTransperancyInPercent(50); |
9.3.11.6 How to Use Tooltip Text Feature?
|
Description: Tooltip text aims to provide a clearer understanding of the Chart data. You can insert tooltip in your chart for ease. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Click on Tooltip Text button to open Macro Editor and set tooltip text feature. |
Code Snippet:
|
chart.setDonutTooltipText(<text>); //Text can contain the macro. Macro can be one of the following values: com.elegantj.graphx.GraphConstants.SERIES_NAME //Displays the name of data series. com.elegantj.graphx.GraphConstants.SERIES_INDEX //Displays the number of data series from starting. com.elegantj.graphx.GraphConstants.ITEM_NAME //Displays the name of item in the particular data series. com.elegantj.graphx.GraphConstants.ITEM_INDEX //Displays the number of item in the particular data series. com.elegantj.graphx.GraphConstants.DATA_VALUE //Displays the value of particular data (default display). |
9.3.11.7
How to Set Gradient Effect
(Linear/Conical/
Square/Radial)?
|
Description: You can select the angle and the extent of the gradient. Also, the colors can be chosen from the palette available. To do this, follow the steps given below: |
|
|
1 |
Open Customizer of the chart. |
|
2 |
Select Doughnut tab in Customizer. |
|
3 |
Click on Gradient Properties button and select Gradient Style from combo box. |
Code Snippet:
|
chart.setDonutGradientVisible(true/false); chart.setDonutGradientExtent(100); chart.setDonutGradientAngle(45); chart.setDonutGradientMode(com.elegantj.graphx.GradientPainter.LINEAR_GRADIENT/ com.elegantj.graphx.GradientPainter.CONICAL_GRADIENT/ com.elegantj.graphx.GradientPainter.RADIAL_GRADIENT/ com.elegantj.graphx.GradientPainter.SQUARE_GRADIENT); |
To incorporate ElegantJ Charts in Java Enterprise Edition environment, please refer to section 6.1.1.
To incorporate ElegantJ Charts in JSP
environment, please refer to section 6.1.2.
To incorporate ElegantJ Charts in Servlet environment, please refer to section 6.1.3.
9.4.4How to incorporate Elegant J Charts in Java Application or Applet (Java Standard Edition)?
To incorporate ElegantJ Charts in Java
Application or Applet
(Java Standard Edition), please refer to Section 6.1.4.
Product & Support Information:
Ø You can find more information about ElegantJ Charts and it's features on www.ElegantJCharts.com.
Ø If you looking for further support apart from this documentation, then you can purchase our support package from the website.
Ø Forward your sales related queries to sales@ElegantJCharts.com.
Feedback and Suggestions:
Ø We will be pleased to get your feedback as well as suggestions about our products.
Ø Forward your feedback or suggestions to support@ElegantJCharts.com.