D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
shubmkcj
/
urbane.createerp.com
/
assets
/
pages
/
Filename :
jquery.chartjs.init.js
back
Copy
/** Template Name: Adminox Dashboard Author: CoderThemes Email: coderthemes@gmail.com File: Chartjs */ !function($) { "use strict"; var ChartJs = function() {}; ChartJs.prototype.respChart = function(selector,type,data, options) { // get selector by context var ctx = selector.get(0).getContext("2d"); // pointing parent container to make chart js inherit its width var container = $(selector).parent(); // enable resizing matter $(window).resize( generateChart ); // this function produce the responsive Chart JS function generateChart(){ // make chart width fit with its container var ww = selector.attr('width', $(container).width() ); switch(type){ case 'Line': new Chart(ctx, {type: 'line', data: data, options: options}); break; case 'Doughnut': new Chart(ctx, {type: 'doughnut', data: data, options: options}); break; case 'Pie': new Chart(ctx, {type: 'pie', data: data, options: options}); break; case 'Bar': new Chart(ctx, {type: 'bar', data: data, options: options}); break; case 'Radar': new Chart(ctx, {type: 'radar', data: data, options: options}); break; case 'PolarArea': new Chart(ctx, {data: data, type: 'polarArea', options: options}); break; } // Initiate new chart or Redraw }; // run function - render chart at first load generateChart(); }, //init ChartJs.prototype.init = function() { //creating lineChart var lineChart = { labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"], datasets: [ { label: "Sales Analytics", fill: false, lineTension: 0.05, backgroundColor: "#fff", borderColor: "#297ef6", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "#297ef6", pointBackgroundColor: "#fff", pointBorderWidth: 8, pointHoverRadius: 6, pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "#297ef6", pointHoverBorderWidth: 3, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40, 35, 30] } ] }; var lineOpts = { scales: { yAxes: [{ ticks: { max: 100, min: 20, stepSize: 10 } }] } }; this.respChart($("#lineChart"),'Line',lineChart, lineOpts); //donut chart var donutChart = { labels: [ "Desktops", "Tablets", "Mobiles", "Mobiles", "Tablets" ], datasets: [ { data: [80, 50, 100,121,77], backgroundColor: [ "#5553ce", "#297ef6", "#e52b4c", "#ffa91c", "#32c861" ], hoverBackgroundColor: [ "#5553ce", "#297ef6", "#e52b4c", "#ffa91c", "#32c861" ], hoverBorderColor: "#fff" }] }; this.respChart($("#doughnut"),'Doughnut',donutChart); //Pie chart var pieChart = { labels: [ "Desktops", "Tablets", "Mobiles", "Mobiles", "Tablets" ], datasets: [ { data: [80, 50, 100,121,77], backgroundColor: [ "#5553ce", "#297ef6", "#e52b4c", "#ffa91c", "#32c861" ], hoverBackgroundColor: [ "#5553ce", "#297ef6", "#e52b4c", "#ffa91c", "#32c861" ], hoverBorderColor: "#fff" }] }; this.respChart($("#pie"),'Pie',pieChart); //barchart var barChart = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "Sales Analytics", backgroundColor: "rgba(236, 103, 148, 0.3)", borderColor: "#ec6794", borderWidth: 2, hoverBackgroundColor: "rgba(236, 103, 148, 0.6)", hoverBorderColor: "#ec6794", data: [65, 59, 80, 81, 56, 55, 40,20] } ] }; this.respChart($("#bar"),'Bar',barChart); //radar chart var radarChart = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [ { label: "Desktops", backgroundColor: "rgba(179,181,198,0.2)", borderColor: "rgba(179,181,198,1)", pointBackgroundColor: "rgba(179,181,198,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(179,181,198,1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "Tablets", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", pointBackgroundColor: "rgba(255,99,132,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(255,99,132,1)", data: [28, 48, 40, 19, 96, 27, 100] } ] }; this.respChart($("#radar"),'Radar',radarChart); //Polar area chart var polarChart = { datasets: [{ data: [ 11, 16, 7, 18 ], backgroundColor: [ "#297ef6", "#45bbe0", "#ebeff2", "#1ea69a" ], label: 'My dataset', // for legend hoverBorderColor: "#fff" }], labels: [ "Series 1", "Series 2", "Series 3", "Series 4" ] }; this.respChart($("#polarArea"),'PolarArea',polarChart); }, $.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs }(window.jQuery), //initializing function($) { "use strict"; $.ChartJs.init() }(window.jQuery);