JavaScript Data Visualization Programming Learning (i) FLOTR2, contains simple, histogram, line chart, pie chart, scatter graph __ algorithm

Refer to this article http://www.cnblogs.com/chengxs/p/7857233.html

First, the basic column chart

Second, the basis of the line chart

Three, the basis of the pie chart

Four, the basis of the scatter chart

First, the basic column chart

If you haven't figured out what kind of chart you're going to use to show your data, you should first consider whether you can make a bar chart. A histogram can represent the process of changing data or the difference between multiple data.

1. Introduction of Javascrippt

Use the FLOTR2 JavaScript library to create a chart. There is no need to introduce additional JavaScript libraries (such as jquery) before using FLOTR2, but FLOTR2 must rely on the support of HTML5 canvas elements. The mainstream browsers supported by Canvas are: Chrome,safari,firefox, and above IE9. If you do not want to support the IE8, you can introduce an additional library excanvas.min.js

First look at the HTML code

2. Create a DIV element that contains a chart container

Create a div to wrap the chart, asking that the DIV element must specify his width and height, and the chart can be built. The following example uses an inline method to specify the CSS style of a div.

<! DOCTYPE html>
 

 

The above is a simple code framework.


3. Define Data

With the code framework, you should consider how to display the data.

Display data: 1, can be local data, 2, can be the AJAX request to get the data

Building three-dimensional arrays

<script>
            var win = [[2006, M], [
                    2007, one],
                    [2008,], [
                    2009,],
                    [2010 , [], [a], [a]]
            ;
        </script>
 

 
In [X,y], X represents the year, and y represents the winning matches. We nested several x,y combinations using an outer array, which is a sequence of nested arrays. We nest an outer array outside of this sequence so that we can store multiple sequences in the future.

Note: (1) The first layer of the array: each independent data itself is an array containing x,y.

(2) The second layer of the array: several independent data together constitute an array, which becomes a sequence.

(3) The third layer of the group: Several sequences form the complete data used by the FLOTR2 rendering chart, which is also an array.


4. Draw the chart

Simply draw a chart and call the FLOTR2 library.

Window.onload = function () {
                Flotr.draw (
                    document.getElementById ("chart"), wins, {
                        bars: {
                            show:true
                        }
                    }
                );
            };
 
Code, Window.onload This function, after we need to load the document to the completion of the call, after the Window.onload event triggered, we execute the function Flotr.draw, and pass 3 parameters to it, these three parameters include: the HTML element of the chart itself, the chart data just defined, some configurable chart selection Item

If your page has jquery, you can use the JQ method to rewrite the code.



5. Improve ordinate

The above picture has a problem:

(1) The scale of the longitudinal axis. FLOTR2 defaults to automatically set the maximum and minimum values in the data to the range of coordinates. 2007 corresponds to 11, but the feeling is 0, this situation needs to be avoided.

(2) The format of the longitudinal axis. FLOTR2 the default will be accurate to the next decimal point, in the callout or more than one extra ". 0".

Flotr.draw (
                    document.getElementById ("chart"), wins, {
                        bars: {
                            show:true,
                        },
                        yaxis:{
                            min:0 ,
                            tickdecimals:0,
                        }
                    }
                );
 

 
Note: FLOTR2 is case-sensitive.

The Flotr.draw function sets the minimum value of the longitudinal axis through the Min property;

The decimal precision is told by the Ticketdecimals property to show the callout. We don't want decimals, set to 0.




Simple to configure the chart options. The problem of longitudinal axis minimum value and scale format is solved.


6, improve the horizontal axis

At the same time there will be 2 problems, (1) The horizontal axis will also be labeled by default to have 1 decimal digits, (2) Horizontal two columns between the lack of spacing.

To solve the first problem: the Axis data Unit is the year, we can use the vertical axis of the Tickdecimals property, set to 0, but this practice is not universal. If the horizontal axis is not a numeric type (such as a team name), this solution cannot be solved. In order to apply the more general situation

Let's first change the data structure and create a new array years, in which there is an index number pairing for each year. Modifies the previous wins array and replaces the original year with the corresponding index number so that the two arrays establish a query relationship.


var wins = [[[
                    0],
                    [1, one],
                    [2,],
                    [3,],
                    [4,], [5,]
                    ,
                    [6,]]
            ] ;
            var years = [[0, "2006"],[1, "2007"],[2, "2008"],[3, "2009"],[4, "2010"],[5, "2011"],[6, "2012"]];
 

We then map these integers in the newly defined years array to the corresponding string. Our string here maps to the year number and can be replaced with any string if needed.