Thought Starter:

Charts helps in 4 major way which in turns defines our choice of charts

1. Understanding compositions

· Anything that is stacked is composition

· Stacked[column |Area|] charts

2. Comparing two or or more elements of same kind

· Comparing items

For Column Charts

Large no of Items : Bar Charts

· Comparing two/more variable over time [Line Charts]

3. Relationship

· Comparing two variables: Scatter chart

· Comparing more than two variables: Bubble chart

4. Distribution

· Histograms

· Pie Charts

Why Graphs?

-->

· Summarizes numerical data for better understanding of complex information

-->

BAR CHART

To display and compare the number, frequency or other measure (e.g. mean) for different discrete categories or groups.

x- axis/domain	y-axis/range
Groups	frequency

HISTOGRAMS

Bar charts with continuous frequency/grouping of data

Pie charts

Visually display data distribution

Line charts

Line graphs are usually used to show time series data - that is how one or more variables vary over a continuous period of time.

SCATTER PLOT

How to represent charts ?

-->


Area Chart	Represents data as a filled in area.
Bar Chart	Represents data as a series of vertical bars.
Bubble Chart	Represents data by the location and size of the round (bubble) data marker.
Combo Chart	Represents data as a combination of area, bar, or line markers.
HorizontalBar Chart	Represents data as a series of horizontal bars.
Area Chart	Represents data as a filled in area.
HorizontalBar Chart	Represents data as a series of horizontal bars.
Line Chart	Represents data as a series of lines.
Pie Chart	Displays values that are parts of a whole, where each value is shown as a sector of a circle.
Scatter Chart	Represents data by the location of data markers on a two-dimensional plane.
Spark Chart	Simple, condensed chart that displays trends or variations in a single data value, typically stamped in the column of a table or in line with related text.
HorizontalBar Chart	Represents data as a series of horizontal bars.
Line Chart	Represents data as a series of lines.
Pie Chart	Displays values that are parts of a whole, where each value is shown as a sector of a circle.

Scatter Chart	Represents data by the location of data markers on a two-dimensional plane.
Spark Chart	Simple, condensed chart that displays trends or variations in a single data value, typically stamped in the column of a table or in line with related text.

JFREECHARTS

Pass data & options to Chart Factory

  JFreeChart barChart = ChartFactory.createBarChart(  
      chartTitle,        
      "Category",        
      "Score",        
      createDataset(),       
      PlotOrientation.VERTICAL,        
      true, true, false);

GOOGLE CHARTS

Step 1 : Include

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js/>

Step 2: Define div that will contain the chart

Step 3: Create Chart ,pass data & options into the chart

The following code shows populating code from server side responce data

  /* var jsonData = $.ajax({  
      url: "getData.php",  
      dataType: "json",  
      async: false  
      }).responseText;  
      */   
   /*   var jsonData = {  
                "cols": [  
                   {"id":"","label":"Topping","pattern":"","type":"string"},  
                   {"id":"","label":"Slices","pattern":"","type":"number"}  
                  ],  
                "rows": [  
                   {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},  
                   {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},  
                   {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},  
                   {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},  
                   {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}  
                  ]  
               }; */  
    // Create our data table out of JSON data loaded from server.  
    var data = new google.visualization.DataTable(jsonData);

DataTables and DataViews

This page discusses the internal data representation used by charts, the DataTable and DataView classes used to pass data into a chart, and the various ways of instantiating and populating a DataTable.

How Data is Represented in a Chart

All charts store their data in a table. Here's a simplified representation of a populated two-column data table:

index: 0 type: string label: 'Task'	index: 1 type: number label: 'Hours per Day'
'Work'	11
'Eat'	2
'Commute'	2
'Watch TV'	2
'Sleep'	7

Data is stored in cells referenced as (row, column), where row is a zero-based row index, and column is either a zero-based column index or a unique ID that you can specify.

Here is a more complete list of the supported elements and properties of the table; see the Format of the Constructor's JavaScript Literal Parameter for more details:

Table - An array of columns and rows, plus an optional map of arbitrary name/value pairs that you can assign. Table-level properties aren't currently used by charts.
Columns - Each column supports a required data type, plus an optional string label, ID, pattern, and map of arbitrary name/value properties. The label is a user-friendly string that can be displayed by the chart; the ID is an optional identifier that can be used in place of a column index. A column can be referred to in code either by zero-based index, or by the optional ID. See the DataTable.addColumn() for a list of supported data types.
Rows - A row is an array of cells, plus an optional map of arbitrary name/value pairs that you can assign.
Cells - Each cell is an object containing an actual value of the column type, plus an optional string-formatted version of the value that you provide. For example: a numeric column might be assigned the value 7 and the formatted value "seven". If a formatted value is supplied, a chart will use the actual value for calculations and rendering, but might show the formatted value where appropriate, for example if the user hovers over a point. Each cell also has an optional map of arbitrary name/value pairs.

What Table Schema Does My Chart Use?

Different charts use tables in different formats: for example, a pie chart expects a two-column table with a string column and a number column, where each row describes a slice, and the first column is the slize label and the second column is the slice value. A scatter chart, however, expects a table consisting of two numeric columns, where each row is a point, and the two columns are the X and Y values of the point. Read your chart's documentation to learn what data format it requires.

DataTables and DataViews

A chart data table is represented in JavaScript by either a DataTable object or a DataView object. In some cases, you might see a JavaScript literal or JSON version of a DataTable used, for instance when data is sent over the Internet by a Chart Tools Datasource, or as a possible input value for a ChartWrapper.

A DataTable is used to create the original data table. A DataView is a convenience class that provides a read-only view of a DataTable, with methods to hide or reorder rows or columns quickly without modifying the linked, original data. Here is a brief comparison of the two classes:

DataTable	DataView
Read/Write	Read-only
Can be created empty and then populated	Is a reference to an existing `DataTable`. Cannot be populated from scratch; must be instantiated with a reference to an existing `DataTable`.
Data takes storage space.	Data is a reference to an existing `DataTable`, and does not consume space.
Can add/edit/delete rows, columns, and data, and all changes are persistent.	Can sort or filter rows without modifying the underlying data. Rows and columns can be hidden and revealed repeatedly.
Can be cloned	Can return a `DataTable` version of the view
Is source data; does not contain references	A live reference to a `DataTable`; any changes in the `DataTable` data is immediately reflected in the view.
Can be passed into a chart as a data source	Can be passed into a chart as a data source
Does not support calculated columns	Supports calculated columns, which are columns with a value calculated on the fly by combining or manipulating other columns.
No row or column hiding	Can hide or show selected columns

Creating and Populating a DataTable

There are several different ways of creating and populating a DataTable:

Reference
https://developers.google.com/chart/interactive/docs/datatables_dataviews

_________________________________________________________________________________

JFREE CHART

In broad terms, JFreeChart achieves this by
Step 1: obtaining data from a Dataset, and
Step 2: Delegating the drawing to a Plot object (which, in turn, delegates the drawing of individual data items to a CategoryItemRenderer or a XYItemRenderer,depending on the plot type).
Step 3:
The JFreeChart class can work with many different Dataset implementations,
and even more Plot subclasses. The following table summarises the combinations that are currently available:

Steps to create chart

//1. Create a data set...
DefaultPieDataset data = new DefaultPieDataset();
data.setValue("Category 1", new Double(43.2));
data.setValue("Category 2", new Double(27.9));
data.setValue("Category 3", new Double(79.5));

//2. Create a chart...

JFreeChart chart = ChartFactory.createPieChart("Sample Pie Chart", data, true);

//3. Create and display a frame...
JFreeChartFrame frame = new JFreeChartFrame("Test", chart);
frame.pack();
frame.setVisible(true);

_________________________________________________________________________________

Types of Dataset

Category Data Set : In this dataset, the domain is a set of

categories represented by any java.lang.Object. The categories are required to be unique (they are used to access the data values) and the toString() method is used to generate category labels. You’ll probably find it convenient to use the String class for your categories.The range for a CategoryDataset is numerical, with values represented by Number objects. You can use null values to represent missing or unknown data.

XY Data Set :To access data values in the form of (x, y) pairs.The domain values (x-values) are always numbers, even though sometimes theywill be presented in a chart as dates. The range values (y-values) are always numbers too.

___________________________________________________________________

CUSTOMIZATION

__________________________________________________________________________________________

Customizing Charts

1)Title

TextTitle title = new TextTitle("New Chart Title");
myChart.addTitle(title);

2)Setting back ground color of chart

chart.setBackgroundPaint(Color.blue);

3)Paint interface chart

Paint p = new GradientPaint(0, 0, Color.white, 1000, 0, Color.green));

chart.setBackgroundPaint(p);

4)Using back ground image

setBackgroundImage(...)

setBackgroundImageAlpha(...)

5)Antialiasing

antialiasing feature to draw smooth looking

charts

// turn on antialiasing...
chart.setAntiAlias(true);
// turn off antialiasing...

chart.setAntiAlias(false);
____________________________________________________________________

Customizing Plots

Drawing chart

Plot plot = myChart.getPlot();

Plot plot = myChart.getPlot();

plot.setBackgroundPaint(Color.white);

You can use any implementation of the Paint interface, including the Java
classes Color, GradientPaint and TexturePaint. You can also set the background

paint to null.

Changing the color for different series

Plot plot = myChart.getPlot();
Paint[] myPaintArray = new Paint[] { Color.red, Color.green, Color.blue

}; plot.setSeriesPaint(myPaintArray);

Customizing AXES

JFreeChart have two axes, the domain axis and the range axis,
although some plots (for example, the PiePlot class) don’t use axes at all. In the cases where axes are used, you can make many changes to the appearance of your chart by changing axis properties.

// get an axis reference...
CategoryPlot myPlot = myChart.getCategoryPlot();
CategoryAxis domainAxis = myPlot.getDomainAxis();
// change axis properties...
domainAxis.setLabel("Categories");

domainAxis.setLabelFont(someFont);

XYPlot myPlot = myChart.getXYPlot();
NumberAxis rangeAxis = (NumberAxis)myPlot.getRangeAxis();

rangeAxis.setAutoRange(false);

Rotating Category Labels

CategoryPlot myPlot = myChart.getCategoryPlot();
HorizontalCategoryAxis axis = (HorizontalCategoryAxis)myPlot.getDomainAxis();

axis.setVerticalCategoryLabels(true);

HorizontalNumberAxis
HorizontalDateAxis

Hiding Tick Labels

CategoryPlot myPlot = myChart.getCategoryPlot();
ValueAxis axis = myPlot.getRangeAxis();

axis.setTickLabelsVisible(false);
setTickUnit(...)
setStandardTickUnits(TickUnits

collection)

XYPlot myPlot = myChart.getXYPlot();
NumberAxis axis = (NumberAxis)myPlot.getRangeAxis();
TickUnits units = TickUnits.createIntegerTickUnits();

axis.setStandardTickUnits(units);

____________________________________________________________________

Charts Using Category Datasets

_______________________________________________________________

Good reads
https://blog.udacity.com/2016/03/12-best-charting-libraries-for-web-developers.html

https://github.com/AnthonyGiretti/Angular4-GoogleCharts

http://anthonygiretti.com/2017/10/12/using-google-charts-in-angular-4-project-part-2/

https://www.npmjs.com/package/ng2-google-charts

https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_group

Cosmi

Tuesday, December 5, 2017

Understanding Charts

Pass data & options to Chart Factory

GOOGLE CHARTS

Step 1 : Include

Step 2: Define div that will contain the chart

Step 3: Create Chart ,pass data & options into the chart

DataTables and DataViews

Contents

How Data is Represented in a Chart

What Table Schema Does My Chart Use?

DataTables and DataViews

Creating and Populating a DataTable

No comments:

Post a Comment