Complete Highchart JS Example

Linear:

$.ajax ({type:' Post ', Url:appPages.urlListTjrll, cache:false, data:{year:year,month:month},//        //dataType: ' json ',//Asyncfalse, Success:function(data) {varStrjson =$.parsejson (data); //alert (strJson.clientList.length)                        varVip_custom=StrJson.clientList.vip_no; varPt_custom=StrJson.clientList.vip_mark; if(StrJson.clientList.length = = 0){                $("#container"). HTML ("No data"); }Else{                     $(' #container '). Highcharts ({chart: {type:' Pie ', Options3d: {enabled:true, Alpha:45, Beta:0}, BackgroundColor:' #0C2B2D ',                    },                   //Remove Logocredits: {enabled:false                   },                   //Remove Export buttonexporting:{Enabled:false}, Title: {text:year+ ' Year ' + month + ' Monthly traffic statistics ', Style: {color:' #71F5FF ',//ColorFontSize: ' 14px '//Font}}, tooltip: { Pointformat:' {series.name}: <b>{point.percentage:.1f}%</b> '}, Plotoptions: {pie: {allo Wpointselect:true, cursor:' Pointer ', Depth:35, DataLabels: {enabled:true, Format:' {point.name} ', Color:' #71F6FF ',                            }                        } }, Series: [{type:' Pie ', Name:year+ ' Year ' + month + ' Monthly traffic statistics ', data: [[' Special client (' +vip_custom+ ') person ", parseint (Vip_custom)], [' Ordinary client (' +pt_custom+ ') person ", parseint (Pt_custom)]                            }]                }); }        }    });

Pie shape:

$.ajax ({type:' Post ', Url:appPages.urlListTjrllfs, cache:false, data:{year:year,month:month,day:day},//        //dataType: ' json ',//Asyncfalse, Success:function(data) {varStrjson =$.parsejson (data); //alert (strJson.clientList.length)                        varVip_guid = strjson.clientlist[0].vip_guid; varpic_id = strjson.clientlist[0].pic_id; varvip_id = strjson.clientlist[0].vip_id; varVip_flag = strjson.clientlist[0].vip_flag; varVip_name = strjson.clientlist[0].vip_name; varVip_sex = strjson.clientlist[0].vip_sex; varvip_pic_id = strjson.clientlist[0].vip_pic_id; varVip_pic_file_name = strjson.clientlist[0].vip_pic_file_name; varIs_new = strjson.clientlist[0].is_new; varVip_ctype = strjson.clientlist[0].vip_ctype; varVip_no = strjson.clientlist[0].vip_no; varVip_tel = strjson.clientlist[0].vip_tel; varVip_guid_pt = strjson.clientlist[1].vip_guid; varPic_id_pt = strjson.clientlist[1].pic_id; varVip_id_pt = strjson.clientlist[1].vip_id; varVip_flag_pt = strjson.clientlist[1].vip_flag; varVip_name_pt = strjson.clientlist[1].vip_name; varVip_sex_pt = strjson.clientlist[1].vip_sex; varVip_pic_id_pt = strjson.clientlist[1].vip_pic_id; varVip_pic_file_name_pt = strjson.clientlist[1].vip_pic_file_name; varIs_new_pt = strjson.clientlist[1].is_new; varVip_ctype_pt = strjson.clientlist[1].vip_ctype; varVip_no_pt = strjson.clientlist[1].vip_no; varVip_tel_pt = strjson.clientlist[1].vip_tel; if(StrJson.clientList.length = = 0){                $("#container1"). HTML ("No data"); }Else{                     $(' #container1 '). Highcharts ({chart: {type:' Spline ', BackgroundColor:' #0C2B2D ', colors:"#000000",}, credits: {enabled:false}, exporting:{enabled:false}, Legend: {//legend Styleitemstyle:{Color:' #71F5FF ',//ColorFontSize: ' 14px ',//FontBackgroundColor: ' #ffffff '                                },                                //legend Check Styleitemhoverstyle: {color:' #7CB5EC '}}, Title: {text:
    ' + year + ' years ' + month + ' month ' + day + ' Daily traffic tick stats ', Style: {color:' #71F5FF ',//ColorFontSize: ' 14px '//Font                            }                    },                   /*subtitle: {text: ' + year + ' years ' + month + ' month ' + day + ' date ', style: {                    Color: ' #71F5FF ',//color fontSize: ' 12px '//font} }, */Xaxis: {linewidth:1, LineColor:"#71F5FF", Tickwidth:0, Labels: {y:20,//x-axis scale moves down 20pxstyle: {color:' #71F5FF ',//ColorFontSize: ' 14px '//Font}}, Categories: [' 00:00 ', ' 02:00 ', ' 04:00 ', ' 06:00 ', ' 08:00 ', ' 10:00 ',                            ' 12:00 ', ' 14:00 ', ' 16:00 ', ' 18:00 ', ' 20:00 ', ' 22:00 ', ' 23:59 ']}, YAxis: {gridlinecolor:' #71F5FF ', Title: {text:' Minutes of the traffic statistics ', Style: {color:' #71F5FF ',//ColorFontSize: ' 12px '//Font}}, Labels: {fo Rmatter:function () {                                return  This. Value; }, Style: {color:' #71F5FF ',//ColorFontSize: ' 14px '//Font                            }                        }                    },                    //color schemeColors: [' #058DC7 ', ' #50B432 ', ' #ED561B ', ' #DDDF00 ', ' #24CBE5 ', ' #64E572 ', ' #FF9655 ',                              ' #FFF263 ', ' #6AF9C4 '], tooltip: {crosshairs:true, GKFX:false}, Plotoptions: {spline: {m Arker: {radius:4, LineColor:' #000000 ', LineWidth:1,                            }                        } }, Series: [{name:' Special customers ', marker: {symbol:' Square '}, data: [parseint (Vip_guid), parseint (pi                                C_ID), parseint (vip_id), parseint (Vip_flag), parseint (Vip_name), parseint (vip_sex), parseint                               (vip_pic_id), parseint (Vip_pic_file_name), parseint (is_new),                               parseint (Vip_ctype), parseint (Vip_no), parseint (Vip_tel), parseint (Vip_guid)]}, {name:' Ordinary customers ', marker: {symbol:' Diamond '}, data: [parseint (VIP_GUID_PT), Parsein                                T (pic_id_pt), parseint (vip_id_pt), parseint (VIP_FLAG_PT),                                parseint (VIP_NAME_PT), parseint (VIP_SEX_PT),                                parseint (VIP_PIC_ID_PT), parseint (VIP_PIC_FILE_NAME_PT), parseint (IS_NEW_PT), parseint (vip_ctype_pt), pars                Eint (VIP_NO_PT), parseint (vip_tel_pt), parseint (VIP_GUID_PT)]}                            });    }        }    }); 

Complete Highchart JS Example