Submit
Path:
~
/
home
/
arcadescientific
/
public_html
/
admin
/
demofiles
/
File Content:
chart_data_example.js
// REAL TIME DATA GENERATOR /* * Real-time data generators for the example graphs in the documentation section. */ (function() { /* * Class for generating real-time data for the area, line, and bar plots. */ var RealTimeData = function(layers) { this.layers = layers; this.timestamp = ((new Date()).getTime() / 1000)|0; }; RealTimeData.prototype.rand = function() { return parseInt(Math.random() * 100) + 50; }; RealTimeData.prototype.history = function(entries) { if (typeof(entries) != 'number' || !entries) { entries = 60; } var history = []; for (var k = 0; k < this.layers; k++) { history.push({ values: [] }); } for (var i = 0; i < entries; i++) { for (var j = 0; j < this.layers; j++) { history[j].values.push({time: this.timestamp, y: this.rand()}); } this.timestamp++; } return history; }; RealTimeData.prototype.next = function() { var entry = []; for (var i = 0; i < this.layers; i++) { entry.push({ time: this.timestamp, y: this.rand() }); } this.timestamp++; return entry; } window.RealTimeData = RealTimeData; /* * Gauge Data Generator. */ var GaugeData = function() {}; GaugeData.prototype.next = function() { return Math.random(); }; window.GaugeData = GaugeData; /* * Heatmap Data Generator. */ var HeatmapData = function(layers) { this.layers = layers; this.timestamp = ((new Date()).getTime() / 1000)|0; }; window.normal = function() { var U = Math.random(), V = Math.random(); return Math.sqrt(-2*Math.log(U)) * Math.cos(2*Math.PI*V); }; HeatmapData.prototype.rand = function() { var histogram = {}; for (var i = 0; i < 1000; i ++) { var r = parseInt(normal() * 12.5 + 50); if (!histogram[r]) { histogram[r] = 1; } else { histogram[r]++; } } return histogram; }; HeatmapData.prototype.history = function(entries) { if (typeof(entries) != 'number' || !entries) { entries = 60; } var history = []; for (var k = 0; k < this.layers; k++) { history.push({ values: [] }); } for (var i = 0; i < entries; i++) { for (var j = 0; j < this.layers; j++) { history[j].values.push({time: this.timestamp, histogram: this.rand()}); } this.timestamp++; } return history; }; HeatmapData.prototype.next = function() { var entry = []; for (var i = 0; i < this.layers; i++) { entry.push({ time: this.timestamp, histogram: this.rand() }); } this.timestamp++; return entry; } window.HeatmapData = HeatmapData; })(); var chartData = {}; chartData['barchart_demo'] = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "", fillColor: "rgba(84, 121, 170, 0.5)", strokeColor: "rgba(84, 121, 170, 0.8)", highlightFill: "rgba(84, 121, 170, 0.5)", highlightStroke: "rgba(84, 121, 170, 0.5)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "", fillColor: "rgba(78, 78, 78, 0.5)", strokeColor: "rgba(78, 78, 78, 0.8)", highlightFill: "rgba(78, 78, 78, 0.5)", highlightStroke: "rgba(78, 78, 78, 0.5)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; chartData['linechart_demo'] = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "", fillColor: "rgba(84, 121, 170, 0.5)", strokeColor: "rgba(84, 121, 170, 0.8)", pointColor: "rgba(84, 121, 170, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(84, 121, 170, 0.5)", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "", fillColor: "rgba(117, 176, 69, 0.5)", strokeColor: "rgba(117, 176, 69, 0.8)", pointColor: "rgba(117, 176, 69, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(117, 176, 69, 0.5)", data: [28, 48, 40, 19, 86, 27, 90] } ] }; chartData['radarchart_demo'] = { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [ { label: "My First dataset", fillColor: "rgba(84, 121, 170, 0.5)", strokeColor: "rgba(84, 121, 170, 0.8)", pointColor: "rgba(84, 121, 170, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(84, 121, 170, 1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "My Second dataset", fillColor: "rgba(117, 176, 69, 0.5)", strokeColor: "rgba(117, 176, 69, 0.8)", pointColor: "rgba(117, 176, 69, 1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(117, 176, 69, 1)", data: [28, 48, 40, 19, 96, 27, 100] } ] }; chartData['polarareachart_demo'] = [ { value: 300, color:"rgba(84, 121, 170, 0.6)", highlight: "rgba(84, 121, 170, 0.8)", label: "Blue" }, { value: 50, color: "rgba(117, 176, 69, 0.6)", highlight: "rgba(117, 176, 69, 0.8)", label: "Green" }, { value: 100, color: "rgba(189, 81, 81, 0.6)", highlight: "rgba(189, 81, 81, 0.8)", label: "Red" }, { value: 40, color: "rgba(78, 78, 78, 0.6)", highlight: "rgba(78, 78, 78, 0.8)", label: "Grey" }, { value: 120, color: "rgba(187, 96, 150, 0.6)", highlight: "rgba(187, 96, 150, 0.8)", label: "Purple" } ]; chartData['piechart_demo'] = [ { value: 300, color:"rgba(84, 121, 170, 0.6)", highlight: "rgba(84, 121, 170, 0.8)", label: "Blue" }, { value: 50, color: "rgba(117, 176, 69, 0.6)", highlight: "rgba(117, 176, 69, 0.8)", label: "Green" }, { value: 100, color: "rgba(78, 78, 78, 0.6)", highlight: "rgba(78, 78, 78, 0.8)", label: "Yellow" } ] ///////////////////// // CHARTS /////////// ///////////////////// jQuery(document).ready(function() { Chart.defaults.global = { animation: true, animationSteps: 60, animationEasing: "easeOutQuart", showScale: true, scaleOverride: false, scaleSteps: null, scaleStepWidth: null, scaleStartValue: null, scaleLineColor: "rgba(0,0,0,0.05)", scaleLineWidth: 1, scaleShowLabels: true, scaleLabel: "<%=value%>", scaleIntegersOnly: true, scaleBeginAtZero: false, scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", scaleFontSize: 12, scaleFontStyle: "normal", scaleFontColor: "rgba(0,0,0,0.2)", responsive: true, maintainAspectRatio: true, showTooltips: true, customTooltips: false, tooltipEvents: ["mousemove", "touchstart", "touchmove"], tooltipFillColor: "#1a2a42", tooltipFontFamily: "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", tooltipFontSize: 12, tooltipFontStyle: "normal", tooltipFontColor: "#fff", tooltipTitleFontFamily: "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", tooltipTitleFontSize: 12, tooltipTitleFontStyle: "normal", tooltipTitleFontColor: "#fff", tooltipYPadding: 6, tooltipXPadding: 6, tooltipCaretSize: 8, tooltipCornerRadius: 2, tooltipXOffset: 10, tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", multiTooltipTemplate: "<%= value %>", onAnimationProgress: function(){}, onAnimationComplete: function(){} } jQuery('.bar-chart').each(function() { var options = { barShowStroke : false, barStrokeWidth : 2, barValueSpacing : 6, barDatasetSpacing : 2 } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var crBarChart = new Chart(ctx).Bar(chartData[data], options); }); jQuery('.line-chart').each(function() { var options = { } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var crLineChart = new Chart(ctx).Line(chartData[data], options); }); jQuery('.radar-chart').each(function() { var options = { } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var myRadarChart = new Chart(ctx).Radar(chartData[data], options); }); jQuery('.polararea-chart').each(function() { var options = { } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var myPolarAreaChart = new Chart(ctx).PolarArea(chartData[data], options); }); jQuery('.pie-chart').each(function() { var options = { } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var myPieChart = new Chart(ctx).Pie(chartData[data],options); }); jQuery('.doughnut-chart').each(function() { var options = { } var data = jQuery(this).attr('cr-data'); var ctx = jQuery(this).get(0).getContext("2d"); var myDoughnutChart = new Chart(ctx).Doughnut(chartData[data],options); }); if (jQuery('#morris-line-example').length > 0) { Morris.Line({ element: 'morris-line-example', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], lineColors: ['rgba(84, 121, 170, 0.6)', 'rgba(117, 176, 69, 0.6)'] }); } if (jQuery('#morris-bar-example').length > 0) { Morris.Bar({ element: 'morris-bar-example', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], barColors: ['rgba(78, 78, 78, 0.6)', 'rgba(84, 121, 170, 0.6)'] }); } if (jQuery('#morris-donut-example').length > 0) { Morris.Donut({ element: 'morris-donut-example', data: [ {label: "Download Sales", value: 12}, {label: "In-Store Sales", value: 30}, {label: "Mail-Order Sales", value: 20} ], colors: ['rgba(84, 121, 170, 0.6)', 'rgba(117, 176, 69, 0.6)', 'rgba(78, 78, 78, 0.6)'] }); } jQuery('.inlinesparkline').sparkline('html', { type:'line' }); jQuery('.inlinebarsparkline').sparkline('html', { type:'bar' }); jQuery('.discretechart').sparkline('html', { type:'discrete' }); jQuery('.inlinepiesparkline').sparkline('html', { type:'pie' }); jQuery("span.peity-pie").peity("pie") jQuery("span.peity-donut").peity("donut") jQuery("span.peity-line").peity("line") jQuery("span.peity-bar").peity("bar") var updatingChart = jQuery(".peity-updating-chart").peity("line", { width: 64 }) setInterval(function() { var random = Math.round(Math.random() * 10) var values = updatingChart.text().split(",") values.shift() values.push(random) updatingChart .text(values.join(",")) .change() }, 1000) $('#quote-carousel').carousel({ pause: true, interval: 4000, }); // EPOCH examples var values = []; var data1 = [ {label: 'Cos', values: []}, {label: 'Sin', values: []} ]; var data2 = [ {label: 'Sqrt', values: []}, {label: 'Cbrt', values: []}, {label: '4th', values: []} ]; for (var i = 0; i <= 128; i++) { var x = 4 * Math.PI * (i / 128); data1[0].values.push({x: x, y: Math.cos(x) + 1}); data1[1].values.push({x: x, y: Math.sin(x) + 1}); var x2 = 20 * (i / 128); data2[0].values.push({x: x2, y: Math.sqrt(x2)}); data2[1].values.push({x: x2, y: Math.pow(x2, (1/3)) }); data2[2].values.push({x: x2, y: Math.pow(x2, (1/4)) }); } var data = [data1, data2]; var area = $('#basic-area-example').epoch({ type: 'area', data: data1, axes: ['bottom', 'left', 'right'] }); $('.basic-area-data').on('click', function(e) { e.preventDefault(); $('.basic-area-data').removeClass('active'); $(e.target).addClass('active'); var index = parseInt($(e.target).attr('data-value')); area.setData(data[index]); area.draw(); }); // bubbles var DATA_LENGTH = 24; var data2 = [ { label: 'A', values: [] }, { label: 'B', values: [] } ]; for (var i = 0; i < DATA_LENGTH; i++) { for (var j = 0; j < data2.length; j++) { data2[j].values.push({ x: (Math.random() * 1000), y: (Math.random() * 200), r: Math.random()*15 + 1 }); } } var chart = $('#basic-bubble-example').epoch({ type: 'scatter', data: data2, axes: ['top', 'bottom', 'left', 'right'] }); // Real time epoch var data3 = new RealTimeData(3); var chart = $('#real-time-bar').epoch({ type: 'time.bar', data: data3.history(), axes: ['left', 'bottom', 'right'] }); setInterval(function() { chart.push(data3.next()); }, 1000); chart.push(data3.next()); // line var data4 = new RealTimeData(2); var chart2 = $('#real-time-line').epoch({ type: 'time.line', data: data4.history(), axes: ['left', 'bottom', 'right'] }); setInterval(function() { chart2.push(data4.next()); }, 1000); chart2.push(data4.next()) });
Edit
Rename
Chmod
Delete
FILE
FOLDER
Name
Size
Permission
Action
jvectormap
---
0755
.htaccess
127 bytes
0444
chart_data_example.js
15800 bytes
0644
demoimage.gif
712 bytes
0644
N4ST4R_ID | Naxtarrr