A Column chart
(1) Vertical single-line bar Histogram effect chart:
The above data is taken from the number of user registrations for six months of a Web site. As can be seen from the above data, the number of registered users in December is 0, the chart can be clearly compared with each month user registration changes.
Copy Code code as follows:
Monthly Report
function MonthReport () {
$.ajax ({
URL: "/home/about",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Axis_labels: ["January", "February", "March", "April", "May", "June"],
Legend: ["Serie1", "Serie2", "Serie3", "serie4", "serie5", "Serie6"],
Title: "Love Chart",
Size: "400x200"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myDIV");
}
});
}
(2) Vertical multi-row bar histogram effect chart:
The above data is similar to the first one, this is the quarterly statistic that is done here, and this is done in the first quarter and the second quarter of the relevant data statistics. Show results as shown in figure
Copy Code code as follows:
Quarterly Reports
function Quarterreport () {
$.ajax ({
URL: "/home/gettotalcount",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Axis_labels: ["First quarter", "two Quarter"],
Legend: ["Serie1", "Serie2", "Serie3"],
Title: "Love Chart",
Size: "400x200"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myQuarter");
}
});
}
(3) Horizontal bar multiple line histogram effect chart:
This situation is a disguised form of the above situation, but the horizontal ordinate modification.
Copy Code code as follows:
Quarterly Reports
function QUARTERREPORTBHG () {
$.ajax ({
URL: "/home/gettotalcount",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Axis_labels: ["First quarter", "two Quarter"],
Legend: ["Serie1", "Serie2", "Serie3"],
Title: "Love Chart",
Size: "400x200",
Type: "BHG"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myQuarterbhg");
}
});
}
Two stack diagrams
Stack diagrams are used to show how much data is changing, and it seems not too intuitive to show the scores in each section. But it's enough to show the effect here.
Copy Code code as follows:
Score statistics
function Scorereport () {
$.ajax ({
URL: "/home/getscore",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Axis_labels: ["He Sen", "Love", "wooden wood"],
Legend: ["Chinese", "mathematics", "English", "Synthesis"],
Title: "Love Chart",
Size: "400x200",
Type: "BHS"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myScoreReport");
}
});
}
Three Line chart
Line chart is very suitable for geographical distribution, temperature distribution map.
Copy Code code as follows:
Temperature Trend Chart
function Temperaturereport () {
$.ajax ({
URL: "/home/gettemperature",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Title: "Love Chart",
Axis_labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
Size: "400x200",
Type: "LC",
Bar_width: "5",
Bar_spacing: "5",
Fillarea:true
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myTemperature");
}
});
}
Four pie chart
In general, I am the most detailed pie chart, giving people the feeling is very good. The above two figures are actually just different types.
Copy Code code as follows:
Pie chart
function Quarterpie () {
$.ajax ({
URL: "/home/getquarterpie",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Title: "Love Chart",
Axis_labels: ["January", "February", "March", "April"],
Size: "400x200",
Type: "P"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myQuarterPie");
}
});
}
3D Pie Chart
function Quarter3dpie () {
$.ajax ({
URL: "/home/getquarterpie",
Success:function (data) {
var json = eval (data);
var opt = {
Data:json,
Title: "Love Chart",
Axis_labels: ["January", "February", "March", "April"],
Size: "400x200",
Type: "P3"
};
var API = new Jgcharts.api ();
JQuery (' '). attr (' src ', api.make (opt)). Appendto ("#myQuarter3DPie");
}
});
}
Five Code Analysis
From the above code can be seen, in fact, the use of this plug-in to make a chart of different types. The value that needs to be modified is type
The types supported by type are described here:
Line chart LC
Point line Diagram Lxy
Sparkline Graph LS
Stacked Horizontal bar Chart BHS
Superimposed vertical bar Chart BvS
Horizontal bar Chart BHG
Vertical bar Chart BVG
Pie chart P
Three-dimensional pie chart p3
Venn V (no effect is currently seen, you can try)
Scatter plot s (no effect currently seen, you can try)
Radar Map R (no effect currently seen, you can try)
Map T (no effect currently seen, you can try)
Instrument Gom
Six Plug-ins related parameter description
Data: A two-dimensional array with the following parameter types: [[153, 60, 52], [113, 70, 60], [120, 80, 40]]
Size: Picture display size (width x height) 300x200
Type: It's been said before.
Xis_labels: Horizontal text
Legend: Legend
Bar_width:20 default 20 bar width
Bar_spacing:1 Default 1 bar spacing
Colors: [' 4b9b41 ', ' 81419b ', ' 41599b '] legend display color
BG: ' e0e0e0 ' background color
BG_TRASPARENCY:50 Background Transparency
Bg_offset: ' 000000 ' gradient end color
Bg_angle: ' 45 ', default 90 gradient angle
Bg_type: ' gradient ' default solid gradient method
Bg_width: ' 10 ' default 10 gradient step
CHBG: ' FFFFFF ', chart area color
Chbg_offset: ' 4b9b41 ' chart area gradient end color
Chbg_angle: ' 45 ' default 90 gradient angle
Chbg_type: ' gradient ' default solid gradient method
Title: ' Bar Chart ', chart title
Title_color: ' a98147 ',
Title_size:20 Default 10
Grid:true, default false grid
Grid_x:5, default x-axis grid width
Grid_y:5, default width of grid
Grid_line:5, default
grid_blank:0 Default Degree
Fillarea:true Default chart Area
Fillbottom:true Default Lower End
Filltop:true default Full Upper
Lines: [[4,2,2],[6,3,3]] dotted chart, [line width, dot width, blank width]
Seven code samples download
Click to download, the code is part of the use of the database data, so the runtime may have problems, here need to make the corresponding changes!
Here is a brief introduction here, if you are interested can try to modify the effect to see the effect of the operation
