other/chart_presentation.html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;">
<meta name="viewport" content="text/html;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/theme/sky.min.css">
<style>
pre{background-color:#fbe8d4;border-radius:8px;}
div[flex_div]{height:75vh;margin:0;align-items:center;justify-content:center;}
img[rounded]{border-radius:16px;max-width:82%;}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P5KFWRNLRN"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-P5KFWRNLRN', { cookie_flags: 'SameSite=None;Secure' });
</script>
</head>

<body>
<!-- Generated by SeleniumBase - https://seleniumbase.io -->
<div class="reveal">
<div class="slides">

<section data-transition="zoom">
<p>Pie Chart</p>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script src="https://code.highcharts.com/9.0.1/highcharts.js"></script>
            <script src="https://code.highcharts.com/9.0.1/modules/exporting.js"></script>
            <script src="https://code.highcharts.com/9.0.1/modules/export-data.js"></script>
            <script src="https://code.highcharts.com/9.0.1/modules/accessibility.js"></script>
            
            <style>
            .highcharts-figure, .highcharts-data-table table {
                min-width: 320px;
                max-width: 660px;
                margin: 1em auto;
            }
            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #EBEBEB;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }
            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }
            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }
            .highcharts-data-table td, .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }
            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }
            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }
            </style>
            
            <figure class="highcharts-figure">
                <div id="chartcontainer1"></div>
                <p class="highcharts-description"></p>
            </figure>
            
            <script>
            // Build the chart
            Highcharts.chart('chartcontainer1', {
            credits: {
                enabled: false
            },
            title: {
                text: 'Automated Tests'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px',
                    },
                },
            categories: ['Passed','Untested','Failed',], crosshair: false},
            yAxis: {
                
                title: {
                    text: 'Values',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px'
                    }
                }
            },
            chart: {
                renderTo: 'statusChart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            
            tooltip: {
                enabled: true,
                useHTML: true,
                style: {
                    padding: '6px',
                    fontSize: '14px'
                },
                backgroundColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, 'rgba(255, 255, 255, 0.78)'],
                        [0.5, 'rgba(235, 235, 235, 0.76)'],
                        [1, 'rgba(244, 252, 255, 0.74)']
                    ]
                },
                hideDelay: 40,
                pointFormat: '<b>{point.y}</b><br /><b>{point.percentage:.1f}%</b>'
            },
            
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                series: {
                    states: {
                        inactive: {
                            opacity: 0.85
                        }
                    }
                },
                pie: {
                    size: "95%",
                    allowPointSelect: true,
                    animation: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                          if (this.y > 0) {
                            return this.point.name + ': ' + this.point.y
                          }
                        }
                    },
                    states: {
                        hover: {
                            enabled: true
                        }
                    },
                    showInLegend: true
                }
            },
            
            series: [{
            name: 'Series 1',
            colorByPoint: true,
            data: [
            
            {
            name: 'Passed',
            y: 7,
            color: '#95d96f'
            },
            
            {
            name: 'Untested',
            y: 2,
            color: '#eaeaea'
            },
            
            {
            name: 'Failed',
            y: 1,
            color: '#f1888f'
            },
            
            ]
                }]
            });
            </script>
            
<aside class="notes"></aside>
</section>

<section data-transition="zoom">
<p>Bar Chart</p>
            <figure class="highcharts-figure">
                <div id="chartcontainer2"></div>
                <p class="highcharts-description"></p>
            </figure>
            
            <script>
            // Build the chart
            Highcharts.chart('chartcontainer2', {
            credits: {
                enabled: false
            },
            title: {
                text: 'Language'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px',
                    },
                },
            categories: ['Python','JavaScript','HTML + CSS',], crosshair: false},
            yAxis: {
                
                title: {
                    text: 'Values',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px'
                    }
                }
            },
            chart: {
                renderTo: 'statusChart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'bar'
            },
            
            tooltip: {
                enabled: true,
                useHTML: true,
                style: {
                    padding: '6px',
                    fontSize: '14px'
                },
                backgroundColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, 'rgba(255, 255, 255, 0.78)'],
                        [0.5, 'rgba(235, 235, 235, 0.76)'],
                        [1, 'rgba(244, 252, 255, 0.74)']
                    ]
                },
                hideDelay: 40,
                pointFormat: '<b>{point.y}</b>'
            },
            
                allowPointSelect: true,
                cursor: 'pointer',
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                states: {
                    hover: {
                        enabled: true
                    }
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: false,
                        animation: false,
                        shadow: false,
                        lineWidth: 3,
                        fillOpacity: 0.5,
                        marker: {
                            enabled: true
                        }
                    }
                },
                
            series: [{
            name: 'Series 1',
            colorByPoint: false,
            data: [
            
            {
            name: 'Python',
            y: 33,
            color: 'Orange'
            },
            
            {
            name: 'JavaScript',
            y: 27,
            color: 'Teal'
            },
            
            {
            name: 'HTML + CSS',
            y: 21,
            color: 'Purple'
            },
            
            ]
                }]
            });
            </script>
            
<aside class="notes"></aside>
</section>

<section data-transition="zoom">
<p>Column Chart</p>
            <figure class="highcharts-figure">
                <div id="chartcontainer3"></div>
                <p class="highcharts-description"></p>
            </figure>
            
            <script>
            // Build the chart
            Highcharts.chart('chartcontainer3', {
            credits: {
                enabled: false
            },
            title: {
                text: 'Colors'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px',
                    },
                },
            categories: ['Red','Green','Blue',], crosshair: false},
            yAxis: {
                
                title: {
                    text: 'Values',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px'
                    }
                }
            },
            chart: {
                renderTo: 'statusChart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'column'
            },
            
            tooltip: {
                enabled: true,
                useHTML: true,
                style: {
                    padding: '6px',
                    fontSize: '14px'
                },
                backgroundColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, 'rgba(255, 255, 255, 0.78)'],
                        [0.5, 'rgba(235, 235, 235, 0.76)'],
                        [1, 'rgba(244, 252, 255, 0.74)']
                    ]
                },
                hideDelay: 40,
                pointFormat: '<b>{point.y}</b>'
            },
            
                allowPointSelect: true,
                cursor: 'pointer',
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                states: {
                    hover: {
                        enabled: true
                    }
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: false,
                        animation: false,
                        shadow: false,
                        lineWidth: 3,
                        fillOpacity: 0.5,
                        marker: {
                            enabled: true
                        }
                    }
                },
                
            series: [{
            name: 'Series 1',
            colorByPoint: false,
            data: [
            
            {
            name: 'Red',
            y: 10,
            color: 'Red'
            },
            
            {
            name: 'Green',
            y: 25,
            color: 'Green'
            },
            
            {
            name: 'Blue',
            y: 15,
            color: 'Blue'
            },
            
            ]
                }]
            });
            </script>
            
<aside class="notes"></aside>
</section>

<section data-transition="zoom">
<p>Line Chart</p>
            <figure class="highcharts-figure">
                <div id="chartcontainer4"></div>
                <p class="highcharts-description"></p>
            </figure>
            
            <script>
            // Build the chart
            Highcharts.chart('chartcontainer4', {
            credits: {
                enabled: false
            },
            title: {
                text: 'Last Week\'s Data'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px',
                    },
                },
            categories: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat',], crosshair: false},
            yAxis: {
                
                title: {
                    text: 'Values',
                    style: {
                        fontSize: '14px'
                    }
                },
                labels: {
                    useHTML: true,
                    style: {
                        fontSize: '14px'
                    }
                }
            },
            chart: {
                renderTo: 'statusChart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'line'
            },
            
            tooltip: {
                enabled: true,
                useHTML: true,
                style: {
                    padding: '6px',
                    fontSize: '14px'
                },
                backgroundColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, 'rgba(255, 255, 255, 0.78)'],
                        [0.5, 'rgba(235, 235, 235, 0.76)'],
                        [1, 'rgba(244, 252, 255, 0.74)']
                    ]
                },
                hideDelay: 40,
                pointFormat: '<b>{point.y}</b>'
            },
            
                allowPointSelect: true,
                cursor: 'pointer',
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                states: {
                    hover: {
                        enabled: true
                    }
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true
                        },
                        showInLegend: true,
                        animation: false,
                        shadow: false,
                        lineWidth: 3,
                        fillOpacity: 0.5,
                        marker: {
                            enabled: true
                        }
                    }
                },
                
            series: [{
            name: 'Series 1',
            colorByPoint: false,
            data: [
            
            {
            name: 'Sun',
            y: 5,
            color: ''
            },
            
            {
            name: 'Mon',
            y: 10,
            color: ''
            },
            
            {
            name: 'Tue',
            y: 20,
            color: ''
            },
            
            {
            name: 'Wed',
            y: 40,
            color: ''
            },
            
            {
            name: 'Thu',
            y: 80,
            color: ''
            },
            
            {
            name: 'Fri',
            y: 65,
            color: ''
            },
            
            {
            name: 'Sat',
            y: 50,
            color: ''
            },
            
            ]
                }]
            });
            </script>
            
<aside class="notes"></aside>
</section>

</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/js/reveal.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script>Reveal.initialize({showNotes: false, slideNumber: true, progress: true, hash: false, autoSlide: 0.0,});</script>
</body>
</html>