JQuery jgCharts chart plug-in

JgCharts is not an independent plug-in

Actually, Google Charts is encapsulated to make Google Charts easier to call and more jquery-based.

Call instance:

<Script type = "text/javascript">
$ (Function (){
Var api = new jGCharts. Api ();
JQuery (' '). attr ('src', api. make ({data: [[153, 60, 52], [113, 70, 60], [120, 80, 40]}). appendTo ("# bar1 ");
});
</Script>
<Div id = "bar1"> </div>

 

Display result

Api. make options

 

Data: [[153, 60, 52], [113, 70, 60], [120, 80, 40]-two-dimensional array

Size: '400x400' // default 300x200 (width x height)-maximum size 300,000 pixels

Type: 'bhg '// default bvg
-Line chart lc
-Line chart lxy
-Sparkline graph ls
-Stacked horizontal bar chart bhs
-Stacked vertical bar chart bvs
-Horizontal bar chart bhg
-Vertical bar chart bvg
-Pie Chart p
-3D pie chart p3
-Wayne v
-Scatter chart s
-Radar chart r
-Map t
-Meter gom

Xis_labels: ['000000', '000000', '000000'], // default 2008, 2 etc...-horizontal axis text

Legend: ['serie1', 'serie2', 'serie3'] // default none-legend

Bar_width: 10, // default 20 Bar Width

Bar_spacing: 10 // default 1 bar spacing

Colors: ['4b9b41', '81419b', '99b']

Bg: 'e0e0e0' // default false
-Bg_trasparency: 50-default false-also chbg_trasparency background transparency
-Bg_offset: '123', gradient ending color
-Bg_angle: '45', // default 90 gradient Angle
-Bg_type: 'gradient' // default solid gradient mode
-Bg_width: '10' // default 10-min 10 gradient pace

Chbg: 'ffffff', // default false chart area color
-Chbg_offset: '4b9b41 ', the ending color of the gradient in the chart area
-Chbg_angle: '45', // default 90 gradient Angle
-Chbg_type: 'gradient' // default solid gradient mode

Title: 'bar chart', // default false chart title
-Title_color: 'a98147 ',
-Title_size: 20 // default 10

Grid: True, // default false Grid
-Grid_x: 5, // default 10 x axis grid width
-Grid_y: 5, // default 10 y axis grid width
-Grid_line: 5, // default 10 gridline width
-Grid_blank: 0 // default 0 network white block width

Fillarea: true // default false fill chart area

Fillbottom: true // default false fill the lower end

Filltop: true // default false fill the upper end

Lines: [[, 2], [, 3] line chart, [line width, point width, blank width]

Example

<Script type = "text/javascript">
$ (Function (){
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make ({
Data: [[153, 60, 52], [113, 70, 60], [120, 80, 40],
Axis_labels: ['20160301', '20160301', '20160301'], // text displayed on the X axis
Legend: ['serie1', 'serie2', 'serie3'] // legend
}). AppendTo ("# bar1 ");
});
</Script>
<Div id = "bar1"> </div>

 

 

 

 

<Script type = "text/javascript">
$ (Function (){
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make ({
Data: [[153, 60, 52], [113, 70, 60], [120, 80, 40],
Type: 'p3 ',
Size: '400x200'
}). AppendTo ("# bar1 ");
});
</Script>
<Div id = "bar1"> </div>

 

 

Download point here