Front-end data statistics for some histogram, pie, and line chart cases for bootstrap

Bootstrap, from Twitter, is currently the most Popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Bootstrap uses some HTML5 elements and CSS properties. In order for these to work properly, you need to use the HTML5 document type (Doctype). Therefore, include the following code snippet at the beginning of the project that uses Bootstrap.

<! DOCTYPE html>.   

Bootstrap 3 is designed to be mobile-first, then desktop. This is actually a very timely shift, as more and more users are now using mobile devices.

In order for Bootstrap to develop a website that is mobile-friendly, to ensure proper drawing and touch-screen scaling, the viewport meta tag needs to be added to the head of the Web page as follows:

<metaName="viewport"content="Width=device-width, initial-scale=1.0"> 

The Width property controls how wide the device is. Assuming your site will be browsed by a device with a different screen resolution, setting it to Device-width will ensure that it renders correctly on different devices.

initial-scale=1.0 ensures that when the page loads, it is rendered at a scale of 1:1 without any scaling.

On the mobile device browser, you can disable the zoom (zooming) feature by adding User-scalable=no to the viewport meta tag.

<metaName="viewport"content="Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no ">

Introduced so much, to the bottom, the following introduction to the diagram:
The first step is to introduce the JS Library of Bootstrap, including histogram, pie chart and line chart:

<!--sparkline Charts Needed scripts-->
<script src= "Assets/js/charts/sparkline/jquery.sparkline.js" ></script>
<script src= "Assets/js/charts/sparkline/sparkline-init.js" ></script>

<!--easy Pie Charts Needed scripts-->
<script src= "Assets/js/charts/easypiechart/jquery.easypiechart.js" ></script>
<script src= "Assets/js/charts/easypiechart/easypiechart-init.js" ></script>

<!--Page related scripts-->
<script src= "Assets/js/charts/flot/jquery.flot.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.orderbars.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.tooltip.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.resize.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.selection.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.crosshair.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.stack.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.time.js" ></script>
<script src= "Assets/js/charts/flot/jquery.flot.pie.js" ></script>
<script src= "Assets/js/charts/flot/flot-init.js" ></script>

The HTML code is as follows:

<div class= "col-xs-12 col-md-12 col-lg-12" >
<div class= "Col-xs-6" >
<div class= "Widgets" >
<div class= "Widget-header" >
<span id= "Clienttotal" class= "widget-caption" style= "Font-size:25px;font-weight:bold;color:black" ></span >
</div>
<div class= "Widget-body" >

<div class= "Row" >
<div class= "col-sm-12" >
<div id= "Selectable-charts" class= "chart Chart-lg" style= "padding:0px; position:relative; " ></div>

</div>
<!--<div class= "Row" >
<div class= "col-sm-12" >
<div class= "col-sm-12 col-md-6" >
<button class= "btn btn-default" id= "SetSelection" >select year 1994</button>
<button class= "btn btn-default" id= "clearselection" >clear selection</button>
</div>
<div class= "col-sm-12 col-md-6" >
<div class= "Pull-right" >
<label><input id= "Zoom" type= "checkbox"/>zoom to Selection</label>
</div>
</div>
</div>
</div>-->
</div>
</div>
</div>
</div>
<div class= "Col-xs-6" >
<div class= "Dashboard-box" >
<div class= "Box-header" >
<div id= "CustomerTotal" class= "Deadline" style= "font-size:15px;font-weight:bold;" >

</div>
</div>
<div class= "Box-tabbs" >
<div class= "Tabbable" >
<ul class= "nav nav-tabs tabs-flat nav-justified" id= "MYTAB11" >
<li class= "Active" >
<a data-toggle= "tab" href= "#visits" style= "font-size:25px;font-weight:bold;" >
Monthly Visit Volume Trend chart
</a>
</li>
</ul>
<div class= "tab-content tabs-flat no-padding" >
<div id= "Visits" class= "Tab-pane active animated Fadeinup" >
<div class= "Row" >
<div class= "col-lg-12 Chart-container" >
<div id= "dashboard-chart-visits" class= "chart chart-lg no-margin" ></div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

JS code is as follows

$ (window). Bind ("Load", function () {
/*sets themed Colors Based on themes*/
Themeprimary = getthemecolorfromcss (' themeprimary ');
Themesecondary = getthemecolorfromcss (' themesecondary ');
Themethirdcolor = getthemecolorfromcss (' Themethirdcolor ');
Themefourthcolor = getthemecolorfromcss (' Themefourthcolor ');
Themefifthcolor = getthemecolorfromcss (' Themefifthcolor ');

Sets the Hidden Chart Width
$ (' #dashboard-bandwidth-chart ')
. Data (' width ', $ ('. Box-tabbs ')
. Width ()-30);

------------------------------Visit Chart------------------------------------------------//
var username = $ ("#username"). Val ();
var status = $ ("#type"). Val ();
var d = new Date ()
var vyear = D.getfullyear ()
var Vmon = d.getmonth () + 1
var VDay = D.getdate ()
var day = new Date (vyear,vmon,0);
var lastdate = Day.getdate ();
s=vyear+ '-' + (vmon<10? "0" + Vmon:vmon + '-' + ' + ' + ' 00:00:00, ' +vyear+ '-' + (vmon<10? "0" + Vmon:vmon) + '-' +lastdate+ ' 23:59:59 ';
$.ajax ({
URL: ".. /clientvisit ",
Async:false,
Type: ' Post ',
Data: {' username ': username, ' time ': s, ' status ': status},
Success:function (data1) {
var data3 = $.parsejson (data1);
var data2 = [{
Color:themeprimary,
Label: "Number of visits",
DATA:DATA3,
Bars: {
Order:1,
Align: "center",
Show:true,
borderwidth:0,
barwidth:0.2,
LineWidth:. 4,
FillColor: {
Colors: [{
opacity:0.4
}, {
Opacity:1
}]
}
}
},
{
Color:themethirdcolor,
Label: "Number of visits",
DATA:DATA3,
Lines: {
Show:true,
Fill:false,
FillColor: {
Colors: [{
opacity:0.3
}, {
opacity:0
}]
}
},
Points: {
Show:true
}
}];
var options = {
Legend: {
Show:false
},
Xaxis: {
tickdecimals:0,
Position: "Bottom",
Color: ' #f3f3f3 ',
Align: "center",
Tickwidth:5
},
YAxis: {
min:0,
Color: ' #f3f3f3 ',
Tickformatter:function (val, axis) {
Return "";
},
},
Grid: {
Hoverable:true,
Clickable:false,
borderwidth:0,
Abovedata:false,
Color: ' #fbfbfb '

},
Tooltip:true,
Tooltipopts: {
Defaulttheme:false,
Content: "<b>%x day </b>, <b>%s</b>: <span>%y</span>",
}
};
var placeholder = $ ("#dashboard-chart-visits");
var plot = $.plot (placeholder, data2, options);

},
Error:function (data) {
}
});
$.ajax ({
URL: "Clientmanage",
Async:false,
Cache:false,
Type: ' Post ',
Data: {' username ': username, ' time ': s, ' status ': status},
Success:function (data1) {
var data = $.parsejson (DATA1);
var lskh3 = $.parsejson (data);
var data5 = [{
Color:themeprimary,
Label: "Customer Intent",
Data:yxkh3
},
{
Color:themethirdcolor,
Label: "Contracted Customer",
Data:qykh3
},
{
Color:themesecondary,
Label: "Long Tail customer",
Data:cwkh3
},
{
Color:themefourthcolor,
Label: "Churn Customer",
Data:lskh3
}];
var options = {
Series: {
Lines: {
Show:true
},
Points: {
Show:true
}
},
Legend: {
Nocolumns:4
},
Xaxis: {
tickdecimals:0,
Color:gridbordercolor
},
YAxis: {
min:0,
Color:gridbordercolor
},
Selection: {
Mode: "X"
},
Grid: {
Hoverable:true,
Clickable:false,
borderwidth:0,
Abovedata:false
},
Tooltip:true,
Tooltipopts: {
Defaulttheme:false,
Content: "<b>%s</b>: <span>%x Day </span>: <span>%y people </span>",
},
Crosshair: {
Mode: "X"
}
};

var placeholder = $ ("#selectable-charts");
Placeholder.bind ("plotselected", Function (event, ranges) {

var zoom = $ ("#zoom"). Is (": checked");

if (zoom) {
Plot = $.plot (placeholder, data, $.extend (true, {}, options, {
Xaxis: {
Min:ranges.xaxis.from,
Max:ranges.xaxis.to
}
}));
}
});
Placeholder.bind ("plotunselected", function (event) {
});
var plot = $.plot (placeholder, data5, options);

},
Error:function (data) {
}
});
Initiateeasypiechart.init ();
Initiatesparklinecharts.init ();
Initiateflotselectablechart.init ();
});

The effect is as follows:

Front-end data statistics for some histogram, pie, and line chart cases for bootstrap