Jquery highcharts chart controls show multiple groups of data
Highcharts Official Website: http://www.highcharts.com
Highcharts official site example: http://www.highcharts.com/demo/
Highcharts documentation: http://www.highcharts.com/documentation/how-to-use
Implementation results
Code:
ASP. NET foreground script code:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "workdonechartbycenter. aspx. cs" inherits = "workdonechartbycenter" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> workload statistics </title>
<SCRIPT type = "text/JavaScript" src = "jscript/jquery. Min. js"> </SCRIPT>
<SCRIPT src = "jscript/highcharts. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "jscript/modules/exporting. js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<SCRIPT type = "text/JavaScript">
VaR chart;
$ (Document). Ready (function (){
Chart = new highcharts. Chart ({
Chart :{
Renderto: 'Container', // container for placing charts
// Defaultseriestype: 'column ', // chart type
Inverted: True // displayed on the left and right. The default value is forward and forward.
},
Title :{
Text: 'itoms workload statistics-Center', // the title of the icon
Style: {}// title Style
},
Subtitle :{
Text: 'source: itoms '// subtitle of the icon
},
Xaxis :{
Categories: <% = strxaxiscategories %>, // coordinate value of the X axis
Labels :{
Rotation:-45,
Align: 'right ',
Style: {Font: 'normal 13px '}
}
},
Yaxis :[{
Labels :{
Formatter: function (){
Return this. value;
},
Style :{
Color: '# 89a54e'
}
},
Title :{
Text: 'number of task tickets, actual work hours, and planned work hours ',
Style :{
Color: '# 89a54e'
}
}
},{
Title :{
Text: 'employee qty'
},
Labels :{
Formatter: function (){
Return this. value;
},
Style :{
Color: '#4572a7'
}
},
Opposite: True
}],
Legend: {// [legend] position Style
Layout: 'horizontal ', // The style displayed in [legend]: horizontal/vertical)
Backgroundcolor: '# ffff ',
Bordercolor: '# CCC ',
Borderwidth: 1,
Align: 'center ',
Verticalalign: 'top ',
Enabled: True,
Y: 50,
Shadow: True
},
Tooltip :{
Formatter: function () {// formatting prompt when the cursor mounts the data point
Return '<B>' + this. X + '</B> <br/>' + this. series. name + ':' + highcharts. numberformat (this. y, 1 );
}
},
Credits :{
Enabled: false
},
Plotoptions :{
Column :{
Pointpadding: 0.2, // The value of the chart Column
Borderwidth: 0 // width of the chart Column
}, Bar :{
Datalabels :{
Enabled: false
}
}
},
Series: <% = seriesdata. tostring () %>
});
});
</SCRIPT>
<Div id = "Container" style = "Min-width: 800px; Height: 500px; margin: 0 2em"> </div>
<Div class = "result"> </div>
</Form>
</Body>
</Html>
Code segment for CS to obtain and process data:
Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using itoms. businesslogic. Report;
Using system. text;
Public partial class workdonechartbycenter: system. Web. UI. Page
{
Public String strxaxiscategories = "";
Public stringbuilder seriesdata = new stringbuilder ();
Protected void page_load (Object sender, eventargs E)
{
If (! Ispostback)
{
Stringbuilder xaxiscategories = new stringbuilder ();
Stringbuilder taskcount = new stringbuilder (); // number of task tickets
Stringbuilder planhours = new stringbuilder (); // scheduled working hours (hours)
Stringbuilder lelecount = new stringbuilder (); // actual number of people
Stringbuilder realhours = new stringbuilder (); // actual working hours (hours)
Xaxiscategories. append ("[");
Reportlogic logic = new reportlogic ();
Datatable datalist = logic. getworkdonebycenter ();
Foreach (datarow DR in datalist. Rows)
{
Xaxiscategories. append ("'");
Xaxiscategories. append (Dr ["centername"] = NULL? "Unknown Center": Dr ["centername"]. tostring ());
Xaxiscategories. append ("',");
Taskcount. append (dr. isnull ("taskcount ")? "0": Dr ["taskcount"]);
Taskcount. append (",");
Planhours. append (dr. isnull ("planhours ")? "0": Dr ["planhours"]);
Planhours. append (",");
Realhours. append (dr. isnull ("realhours ")? "0": Dr ["realhours"]);
Realhours. append (",");
Lelecount. append (dr. isnull ("peoplecount ")? "0": Dr ["peoplecount"]);
Lelecount. append (",");
}
Strxaxiscategories = xaxiscategories. Replace (",", "", xaxiscategories. Length-1, 1). append ("]"). tostring ();
Seriesdata. append ("[{Name: 'number of task tickets ', type: 'column', data :[");
Seriesdata. append (taskcount. Replace (",", "", taskcount. Length-1, 1 ));
Seriesdata. append ("]}, {Name: 'scheduled working hours (hours) ', type: 'column', data :[");
Seriesdata. append (planhours. Replace (",", "", planhours. Length-1, 1 ));
Seriesdata. append ("]}, {Name: 'actual working hours (hours) ', type: 'column', data :[");
Seriesdata. append (realhours. Replace (",", "", realhours. Length-1, 1 ));
Seriesdata. append ("]}, {Name: 'employee qty ', type: 'spline', yaxis: 1, data :[");
Seriesdata. append (lelecount. Replace (",", "", peoplecount. Length-1, 1 ));
Seriesdata. append ("]}]");
}
}
}
This article describes how to process the code in the actual development process,
If you need help, please contact MSN: zheng331773812@hotmail.com
Welcome to join us!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
