Highcharts (1)

Highcharts is a JS chart library, official site: http://www.highcharts.com/

Example 1: Obtain json data using an ajax request and use Highcharts to display the data. Some code is as follows:

The following foreground HTML code:

<Div id = "divMain">
<Div id = "divContainer" style = "min-width: 400; width: 90%; min-height: pixel; margin: 0 auto">
</Div>

</Div>

 

The following is the JS Code:

Function query (){
If (! CheckBeforeQuery ()){
Return false;
}
Var gChart;
Var reqUrl = "/Sale/Product ";
// Department Code
Var vDeptCode = jddlProductDept. find ("option: selected"). text ();
// Product code
Var vLineCode = jddlProductLine. find ("option: selected"). text ();
If (vLineCode = "select "){
VLineCode = "";
}
// Style code
Var vStyleCode = jtxtStyle. attr ("code ");
// Product code
Var vProductCode = jtxtProduct. attr ("code ");
// Product code
Var vSkuId = jtxtSKU. attr ("code ");

Var vQueryDate = jdtQueryBeginDate. val ();
Var vExecDate = jdtExecBeginDate. val ();

$. Wmspost ({
Url: reqUrl,
Async: false,
Data: {deptCode: vDeptCode, lineCode: vLineCode, styleCode: vStyleCode,
ProductCode: vProductCode, skuId: vSkuId,
QueryDate: vQueryDate, execDate: vExecDate
},
Success: function (retData ){
FillGrid (retData );
Var arrCategory = []; // month
Var arrSjxl = []; // actual sales volume
Var arrSjcxl = []; // actual sales promotion
$. Each (retData, function (idx, item ){
ArrCategory. push (item. PredictedDate. substring (0, item. PredictedDate. lastIndexOf ("/")));
ArrSjxl. push (item. ActualQty );
ArrSjcxl. push (item. PromotionQty );//
});
// DivContainer is the div id, which is used to display charts.
Var vOption = createChartOption ("divContainer", "line", "department sales statistics", null, "month", "sales (pieces )");
// X axis
$. Each (arrCategory, function (idx, item ){
VOption. xAxis. categories. push (item );
});

// Actual sales volume
VOption. series. push (createSeries (arrSjcxl, "actual sales", "square "));
// Actual sales promotion
VOption. series. push (createSeries (arrSjcxl, "actual sales promotion", "triangle "));

// Create a chart
GChart = new Highcharts. Chart (vOption );
},
Error: function (xhrObj, textStatus, errObj ){

}
});
}

Function createSeries (arrData, seriesName, seriesSymbol ){
Var objSeries = {
Name: seriesName,
Data: [],
Marker :{
Symbol: seriesSymbol
}
};
$. Each (arrData, function (idx, item ){
ObjSeries. data. push (item );
});
Return objSeries;
}
Function createChartOption (pRenderId, chartType, mainTitle, subTitle, xAxisTitle, yAxisTitle ){
Var vOption = {
Chart :{
RenderTo: pRenderId,
Type: chartType,
MarginRight: 130,
MarginBottom: 25
},
Title :{
Text: mainTitle
},
Subtitle :{
Text: subTitle
},
XAxis :{
Title :{
Text: xAxisTitle
},
Categories: []
},
YAxis :{
Title :{
Text: yAxisTitle
},
PlotLines :[{
Value: 0,
Width: 1,
Color: "#808080"
}]
},
Tooltip :{
Crosshairs: true,
Shared: true
},
Legend :{
Layout: "vertical ",
Align: "right ",
VerticalAlign: "top ",
X:-10,
Y: 100,
BorderWidth: 0,
Floating: true
},
PlotOptions :{
Series :{
Cursor: "pointer ",
Point :{
Events :{
Click: function (){
Alert (this. series. name + "=" + this. x + "=" + this. y );
}
}
}
}
},
Series: []
};
Return vOption;

}