A very simple and practical chart plug-in (jquery) in asp.net)

Column chart

(1) vertical single row bar histogram:

The above data is taken from the user registration volume of a website in six months. From the above data, we can see that the number of registered users in a month is 0, and the chart can clearly compare the changes in the number of user registrations in each month.

Copy codeThe Code is as follows: // Monthly Report
Function MonthReport (){
$. Ajax ({
Url: "/Home/About ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Axis_labels: ["August", "August"],
Legend: ["serie1", "serie2", "serie3", "serie4", "serie5", "serie6"],
Title: "sentiment Charts ",
Size: "400x200"
};
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make (opt). appendTo ("# myDIV ");
}
});
}

(2) vertical multi-row bar histogram:
The above data is similar to the first case. This is the quarterly statistics. The first and second quarter statistics are made here. Display resultCopy codeThe Code is as follows: // quarterly report
Function QuarterReport (){
$. Ajax ({
Url: "/Home/GetTotalCount ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Axis_labels: ["first quarter", "second quarter"],
Legend: ["serie1", "serie2", "serie3"],
Title: "sentiment Charts ",
Size: "400x200"
};
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make (opt). appendTo ("# myQuarter ");
}
});
}

(3) stripe histogram with multiple rows:

This is a disguised display of the above situation, but the horizontal and vertical coordinates are modified.

Copy codeThe Code is as follows: // quarterly report
Function QuarterReportBhg (){
$. Ajax ({
Url: "/Home/GetTotalCount ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Axis_labels: ["first quarter", "second quarter"],
Legend: ["serie1", "serie2", "serie3"],
Title: "sentiment Charts ",
Size: "400x200 ",
Type: "bhg"
};
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make (opt). appendTo ("# myQuarterbhg ");
}
});
}

2. Stack Diagram

The stack chart is mostly used to show the degree of data change. Here the scores of each subject are displayed, which does not seem to be too intuitive. However, it is enough to show this effect.

Copy codeThe Code is as follows: // score statistics
Function ScoreReport (){
$. Ajax ({
Url: "/Home/GetScore ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Axis_labels: ["He Chen", "affection", "Mu"],
Legend: ["Chinese", "Mathematics", "English", "Comprehensive"],
Title: "sentiment Charts ",
Size: "400x200 ",
Type: "bhs"
};
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make (opt). appendTo ("# myScoreReport ");
}
});
}

Three-line chart

The line chart is suitable for regional distribution and temperature distribution.

Copy codeThe Code is as follows: // temperature chart
Function TemperatureReport (){
$. Ajax ({
Url: "/Home/GetTemperature ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Title: "sentiment Charts ",
Axis_labels: ["May January", "May February", "May March", "May April", "May", "May June", "May July", "May August", "May September ", "August October", "August November", "August 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 ");
}
});
}

4-pie chart

In general, I have the finest pie chart, which gives people a good feeling. The above two figures are actually different in type.

Copy codeThe Code is as follows: // pie chart
Function QuarterPie (){
$. Ajax ({
Url: "/Home/GetQuarterPie ",
Success: function (data ){
Var json = eval (data );
Var opt = {
Data: json,
Title: "sentiment Charts ",
Axis_labels: ["August January", "August February", "August March", "August 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: "sentiment Charts ",
Axis_labels: ["August January", "August February", "August March", "August April"],
Size: "400x200 ",
Type: "p3"
};
Var api = new jGCharts. Api ();
JQuery (''). attr ('src', api. make (opt). appendTo ("# myQuarter3DPie ");
}
});
}

5. Code Analysis
From the code above, we can see that using this plug-in to create charts is of different types. The value of type needs to be modified.
Here we will introduce the types supported by type:
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 (no results currently. You can try it)
Scatter chart s (no effect currently. You can try it)
Radar chart r (no effect currently. You can try it)
Map t (no effect currently, you can try it)
Instrument gom

Six plug-in Parameters
Data: a two-dimensional array with the following parameter types: [153, 60, 52], [113, 70, 60], [120, 80, 40]
Size: The image size (width x height) 300x200
Type: As mentioned earlier, I will not describe it here.
Xis_labels: horizontal text
Legend: legend
Bar_width: 20 default 20 Bar Width
Bar_spacing: 1 The default value is 1 bar spacing.
Colors: ['4b9b41', '81419b', '000099b'] Legend color
Bg: 'e0e0e0' background color
Bg_trasparency: 50 background transparency
Bg_offset: '000000' gradient ending color
Bg_angle: '45', 90 gradient angle by default
Bg_type: 'gradient' default solid gradient mode
Bg_width: '10' default 10 gradient steps
Chbg: 'ffffff', chart area color
Chbg_offset: '4b9b41 'gradient ending color in the chart area
Chbg_angle: '45' default 90 gradient Angle
Chbg_type: 'gradient' default solid gradient mode
Title: 'bar chart', Chart title
Title_color: 'a98147 ',
Title_size: 20 default 10
Grid: true. The default value is false.
Grid_x: 5, 10 x axis grid width by default
Grid_y: 5, default grid width
Grid_line: 5, default
Grid_blank: 0 default
Fillarea: true Default Chart Area
Fillbottom: true default lower end
Filltop: true
Lines: [[, 2], [, 3] line chart, [line width, point width, blank width]

Seven sample code downloads
Click to download. Some of the Code is the database data used. Therefore, problems may occur during running. You need to modify the code here!
Here is a brief introduction. If you are interested, you can try to modify the effect to see the running effect.