初始化

Face.Web/Theme/js/demo/chartjs-demo.js

@@ -0,0 +1,217 @@
+$(function () {
+
+    var lineData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [
+            {
+                label: "Example dataset",
+                fillColor: "rgba(220,220,220,0.5)",
+                strokeColor: "rgba(220,220,220,1)",
+                pointColor: "rgba(220,220,220,1)",
+                pointStrokeColor: "#fff",
+                pointHighlightFill: "#fff",
+                pointHighlightStroke: "rgba(220,220,220,1)",
+                data: [65, 59, 80, 81, 56, 55, 40]
+            },
+            {
+                label: "Example dataset",
+                fillColor: "rgba(26,179,148,0.5)",
+                strokeColor: "rgba(26,179,148,0.7)",
+                pointColor: "rgba(26,179,148,1)",
+                pointStrokeColor: "#fff",
+                pointHighlightFill: "#fff",
+                pointHighlightStroke: "rgba(26,179,148,1)",
+                data: [28, 48, 40, 19, 86, 27, 90]
+            }
+        ]
+    };
+
+    var lineOptions = {
+        scaleShowGridLines: true,
+        scaleGridLineColor: "rgba(0,0,0,.05)",
+        scaleGridLineWidth: 1,
+        bezierCurve: true,
+        bezierCurveTension: 0.4,
+        pointDot: true,
+        pointDotRadius: 4,
+        pointDotStrokeWidth: 1,
+        pointHitDetectionRadius: 20,
+        datasetStroke: true,
+        datasetStrokeWidth: 2,
+        datasetFill: true,
+        responsive: true,
+    };
+
+
+    var ctx = document.getElementById("lineChart").getContext("2d");
+    var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
+
+    var barData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [
+            {
+                label: "My First dataset",
+                fillColor: "rgba(220,220,220,0.5)",
+                strokeColor: "rgba(220,220,220,0.8)",
+                highlightFill: "rgba(220,220,220,0.75)",
+                highlightStroke: "rgba(220,220,220,1)",
+                data: [65, 59, 80, 81, 56, 55, 40]
+            },
+            {
+                label: "My Second dataset",
+                fillColor: "rgba(26,179,148,0.5)",
+                strokeColor: "rgba(26,179,148,0.8)",
+                highlightFill: "rgba(26,179,148,0.75)",
+                highlightStroke: "rgba(26,179,148,1)",
+                data: [28, 48, 40, 19, 86, 27, 90]
+            }
+        ]
+    };
+
+    var barOptions = {
+        scaleBeginAtZero: true,
+        scaleShowGridLines: true,
+        scaleGridLineColor: "rgba(0,0,0,.05)",
+        scaleGridLineWidth: 1,
+        barShowStroke: true,
+        barStrokeWidth: 2,
+        barValueSpacing: 5,
+        barDatasetSpacing: 1,
+        responsive: true
+    }
+
+
+    var ctx = document.getElementById("barChart").getContext("2d");
+    var myNewChart = new Chart(ctx).Bar(barData, barOptions);
+
+    var polarData = [
+        {
+            value: 300,
+            color: "#a3e1d4",
+            highlight: "#1ab394",
+            label: "App"
+        },
+        {
+            value: 140,
+            color: "#dedede",
+            highlight: "#1ab394",
+            label: "Software"
+        },
+        {
+            value: 200,
+            color: "#b5b8cf",
+            highlight: "#1ab394",
+            label: "Laptop"
+        }
+    ];
+
+    var polarOptions = {
+        scaleShowLabelBackdrop: true,
+        scaleBackdropColor: "rgba(255,255,255,0.75)",
+        scaleBeginAtZero: true,
+        scaleBackdropPaddingY: 1,
+        scaleBackdropPaddingX: 1,
+        scaleShowLine: true,
+        segmentShowStroke: true,
+        segmentStrokeColor: "#fff",
+        segmentStrokeWidth: 2,
+        animationSteps: 100,
+        animationEasing: "easeOutBounce",
+        animateRotate: true,
+        animateScale: false,
+        responsive: true,
+
+    };
+
+    var ctx = document.getElementById("polarChart").getContext("2d");
+    var myNewChart = new Chart(ctx).PolarArea(polarData, polarOptions);
+
+    var doughnutData = [
+        {
+            value: 300,
+            color: "#a3e1d4",
+            highlight: "#1ab394",
+            label: "App"
+        },
+        {
+            value: 50,
+            color: "#dedede",
+            highlight: "#1ab394",
+            label: "Software"
+        },
+        {
+            value: 100,
+            color: "#b5b8cf",
+            highlight: "#1ab394",
+            label: "Laptop"
+        }
+    ];
+
+    var doughnutOptions = {
+        segmentShowStroke: true,
+        segmentStrokeColor: "#fff",
+        segmentStrokeWidth: 2,
+        percentageInnerCutout: 45, // This is 0 for Pie charts
+        animationSteps: 100,
+        animationEasing: "easeOutBounce",
+        animateRotate: true,
+        animateScale: false,
+        responsive: true,
+    };
+
+
+    var ctx = document.getElementById("doughnutChart").getContext("2d");
+    var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
+
+
+    var radarData = {
+        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+        datasets: [
+            {
+                label: "My First dataset",
+                fillColor: "rgba(220,220,220,0.2)",
+                strokeColor: "rgba(220,220,220,1)",
+                pointColor: "rgba(220,220,220,1)",
+                pointStrokeColor: "#fff",
+                pointHighlightFill: "#fff",
+                pointHighlightStroke: "rgba(220,220,220,1)",
+                data: [65, 59, 90, 81, 56, 55, 40]
+            },
+            {
+                label: "My Second dataset",
+                fillColor: "rgba(26,179,148,0.2)",
+                strokeColor: "rgba(26,179,148,1)",
+                pointColor: "rgba(26,179,148,1)",
+                pointStrokeColor: "#fff",
+                pointHighlightFill: "#fff",
+                pointHighlightStroke: "rgba(151,187,205,1)",
+                data: [28, 48, 40, 19, 96, 27, 100]
+            }
+        ]
+    };
+
+    var radarOptions = {
+        scaleShowLine: true,
+        angleShowLineOut: true,
+        scaleShowLabels: false,
+        scaleBeginAtZero: true,
+        angleLineColor: "rgba(0,0,0,.1)",
+        angleLineWidth: 1,
+        pointLabelFontFamily: "'Arial'",
+        pointLabelFontStyle: "normal",
+        pointLabelFontSize: 10,
+        pointLabelFontColor: "#666",
+        pointDot: true,
+        pointDotRadius: 3,
+        pointDotStrokeWidth: 1,
+        pointHitDetectionRadius: 20,
+        datasetStroke: true,
+        datasetStrokeWidth: 2,
+        datasetFill: true,
+        responsive: true,
+    }
+
+    var ctx = document.getElementById("radarChart").getContext("2d");
+    var myNewChart = new Chart(ctx).Radar(radarData, radarOptions);
+
+});

Face.Web/Theme/js/demo/morris-demo.js

@@ -0,0 +1,89 @@
+$(function() {
+
+    Morris.Line({
+        element: 'morris-one-line-chart',
+            data: [
+                { year: '2008', value: 5 },
+                { year: '2009', value: 10 },
+                { year: '2010', value: 8 },
+                { year: '2011', value: 22 },
+                { year: '2012', value: 8 },
+                { year: '2014', value: 10 },
+                { year: '2015', value: 5 }
+            ],
+        xkey: 'year',
+        ykeys: ['value'],
+        resize: true,
+        lineWidth:4,
+        labels: ['Value'],
+        lineColors: ['#1ab394'],
+        pointSize:5,
+    });
+
+    Morris.Area({
+        element: 'morris-area-chart',
+        data: [{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
+            { period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
+            { period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
+            { period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
+            { period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
+            { period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
+            { period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
+            { period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
+            { period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
+            { period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 } ],
+        xkey: 'period',
+        ykeys: ['iphone', 'ipad', 'itouch'],
+        labels: ['iPhone', 'iPad', 'iPod Touch'],
+        pointSize: 2,
+        hideHover: 'auto',
+        resize: true,
+        lineColors: ['#87d6c6', '#54cdb4','#1ab394'],
+        lineWidth:2,
+        pointSize:1,
+    });
+
+    Morris.Donut({
+        element: 'morris-donut-chart',
+        data: [{ label: "Download Sales", value: 12 },
+            { label: "In-Store Sales", value: 30 },
+            { label: "Mail-Order Sales", value: 20 } ],
+        resize: true,
+        colors: ['#87d6c6', '#54cdb4','#1ab394'],
+    });
+
+    Morris.Bar({
+        element: 'morris-bar-chart',
+        data: [{ y: '2006', a: 60, b: 50 },
+            { 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'],
+        hideHover: 'auto',
+        resize: true,
+        barColors: ['#1ab394', '#cacaca'],
+    });
+
+    Morris.Line({
+        element: 'morris-line-chart',
+        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'],
+        hideHover: 'auto',
+        resize: true,
+        lineColors: ['#54cdb4','#1ab394'],
+    });
+
+});

Face.Web/Theme/js/demo/peity-demo.js

@@ -0,0 +1,33 @@
+$(function() {
+    $("span.pie").peity("pie", {
+        fill: ['#1ab394', '#d7d7d7', '#ffffff']
+    })
+
+    $(".line").peity("line",{
+        fill: '#1ab394',
+        stroke:'#169c81',
+    })
+
+    $(".bar").peity("bar", {
+        fill: ["#1ab394", "#d7d7d7"]
+    })
+
+    $(".bar_dashboard").peity("bar", {
+        fill: ["#1ab394", "#d7d7d7"],
+        width:100
+    })
+
+    var updatingChart = $(".updating-chart").peity("line", { fill: '#1ab394',stroke:'#169c81', 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);
+
+});

Face.Web/Theme/js/demo/rickshaw-demo.js

@@ -0,0 +1,103 @@
+$(function() {
+    var graph = new Rickshaw.Graph( {
+        element: document.querySelector("#chart"),
+        series: [{
+            color: '#1ab394',
+            data: [
+                { x: 0, y: 40 },
+                { x: 1, y: 49 },
+                { x: 2, y: 38 },
+                { x: 3, y: 30 },
+                { x: 4, y: 32 } ]
+        }]
+    });
+    graph.render();
+
+    var graph2 = new Rickshaw.Graph( {
+        element: document.querySelector("#rickshaw_multi"),
+        renderer: 'area',
+        stroke: true,
+        series: [ {
+            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 20 }, { x: 4, y: 16 } ],
+            color: '#1ab394',
+            stroke: '#17997f'
+        }, {
+            data: [ { x: 0, y: 22 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 46 } ],
+            color: '#eeeeee',
+            stroke: '#d7d7d7'
+        } ]
+    } );
+    graph2.renderer.unstack = true;
+    graph2.render();
+
+    var graph3 = new Rickshaw.Graph({
+        element: document.querySelector("#rickshaw_line"),
+        renderer: 'line',
+        series: [ {
+            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
+            color: '#1ab394'
+        } ]
+    } );
+    graph3.render();
+
+    var graph4 = new Rickshaw.Graph({
+        element: document.querySelector("#rickshaw_multi_line"),
+        renderer: 'line',
+        series: [{
+            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
+            color: '#1ab394'
+        }, {
+            data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
+            color: '#d7d7d7'
+        }]
+    });
+    graph4.render();
+
+    var graph5 = new Rickshaw.Graph( {
+        element: document.querySelector("#rickshaw_bars"),
+        renderer: 'bar',
+        series: [ {
+            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
+            color: '#1ab394'
+        } ]
+    } );
+    graph5.render();
+
+    var graph6 = new Rickshaw.Graph( {
+        element: document.querySelector("#rickshaw_bars_stacked"),
+        renderer: 'bar',
+        series: [
+            {
+                data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
+                color: '#1ab394'
+            }, {
+                data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
+                color: '#d7d7d7'
+            } ]
+    } );
+    graph6.render();
+
+    var graph7 = new Rickshaw.Graph( {
+        element: document.querySelector("#rickshaw_scatterplot"),
+        renderer: 'scatterplot',
+        stroke: true,
+        padding: { top: 0.05, left: 0.05, right: 0.05 },
+        series: [ {
+            data: [ { x: 0, y: 15 },
+                { x: 1, y: 18 },
+                { x: 2, y: 10 },
+                { x: 3, y: 12 },
+                { x: 4, y: 15 },
+                { x: 5, y: 24 },
+                { x: 6, y: 28 },
+                { x: 7, y: 31 },
+                { x: 8, y: 22 },
+                { x: 9, y: 18 },
+                { x: 10, y: 16 }
+            ],
+            color: '#1ab394'
+        } ]
+    } );
+    graph7.render();
+
+});

Face.Web/Theme/js/demo/sparkline-demo.js

@@ -0,0 +1,51 @@
+$(function () {
+    $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52, 25], {
+        type: 'line',
+        lineColor: '#17997f',
+        fillColor: '#1ab394',
+    });
+    $("#sparkline2").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
+        type: 'bar',
+        barColor: '#1ab394',
+        negBarColor: '#c6c6c6'});
+
+    $("#sparkline3").sparkline([1, 1, 2], {
+        type: 'pie',
+        sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
+
+    $("#sparkline4").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
+        type: 'line',
+        lineColor: '#17997f',
+        fillColor: '#ffffff',
+    });
+
+    $("#sparkline5").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
+        type: 'tristate',
+        posBarColor: '#1ab394',
+        negBarColor: '#bfbfbf'});
+
+
+    $("#sparkline6").sparkline([4, 6, 7, 7, 4, 3, 2, 1, 4, 4, 5, 6, 3, 4, 5, 8, 7, 6, 9, 3, 2, 4, 1, 5, 6, 4, 3, 7, ], {
+        type: 'discrete',
+        lineColor: '#1ab394'});
+
+    $("#sparkline7").sparkline([52, 12, 44], {
+        type: 'pie',
+        height: '150px',
+        sliceColors: ['#1ab394', '#b3b3b3', '#e4f0fb']});
+
+    $("#sparkline8").sparkline([5, 6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4, 12, 14, 4, 2, 14, 12, 7], {
+        type: 'bar',
+        barWidth: 8,
+        height: '150px',
+        barColor: '#1ab394',
+        negBarColor: '#c6c6c6'});
+
+    $("#sparkline9").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
+        type: 'line',
+        lineWidth: 1,
+        height: '150px',
+        lineColor: '#17997f',
+        fillColor: '#ffffff',
+    });
+});