Highchart Line Chart Code
$ (function () {var chartline = new Highcharts.chart ({Chart: {type: ' line ', <em><span style= "color: #ff0000;" >renderto: ' Container2 ' </span></em>}, Title: {text: ' Last month's repayment amount versus this month's bill amount than the result '}, subtitle: {text: '}, Xaxis: {Categor IES: []}, YAxis: {title: {text: ' Unit (yuan) '} }, tooltip: {enabled:false, formatter:function () {R Eturn ' <b> ' + this.series.name + ' </b><br> ' + this.x + ': ' + this.y + ' °c '; }}, Plotoptions: {line: {datalabels: {E Nabled:true}, Enablemousetracking:false}}, Series: [{name: ' Last month repayment amount ', Data: []}, {name: ' Consumption this month Amount ', Data: []}]}); function Getformline () {return $http. Get ("/billsdetail/twomonthchartdata"). Success (function (response) { Set the value for the chart <strong><span style= "color: #ff0000;" >chartline.series[0].setdata (Response.data.lastMonth); Chartline.series[1].setdata (Response.data.thisMonth); Chartline.xaxis[0].setcategories (eval (Response.data.categorys));</span></strong>}). Error (function (response) {$log. Debug ("Request timed out or network failure!)" Failed to get list! ") }); } getformline (); });
Back-end spelling JSON code
public Jsonobject Listlastmonthandthismonthbillsdata () {jsonobject JSON =new JSON Object (); List<string> categorys =new arraylist<string> (); List<double> lastmonthdata=new arraylist<double> (); List<double> thismonthdata=new arraylist<double> (); String sql= "Select Lastmonth_repayment,thismonth_bill,period from Credit_card_bills ORDER by period ASC"; list<jsonobject> resultdata = billsdetaildao.list (sql); for (Jsonobject dataitem:resultdata) {Categorys.add (dataitem.getstring ("period")); Lastmonthdata.add (dataitem.getdouble ("lastmonth_repayment")); Thismonthdata.add (dataitem.getdouble ("Thismonth_bill")); } json.put ("Categorys", Categorys); Json.put ("Lastmonth", lastmonthdata); Json.put ("Thismonth", thismonthdata); return JSON; }
HTML code
<div id= "Container2" > </div>
Dynamically get JSON-formatted data using ANGULARJS combined with Highchart charts