ashwani422/chartjs_decimation.html

## chartjs_decimation.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart js decimation test</title>
    <!----------------------------------------------------
-- Bootstrap(v5.0) CSS
----------------------------------------------------->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <!----------------------------------------------------
-- Bootstrap(v5.0) JS Bundle
----------------------------------------------------->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>

    <!-- chartjs -->
    <!-- <script src="./node_modules/chart.js/dist/chart.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>

</head>

<body>

    <div class="container-md">
        <canvas id="myChart"></canvas>
    </div>

    <script>

        const decimation = {
            enabled: true,
            algorithm: 'lttb',
            samples: 5,
            threshold: 12
        };

        // const labels = [
        //     'January',
        //     'February',
        //     'March',
        //     'April',
        //     'May',
        //     'June',
        // ];


        const data = {
            datasets: [{
                label: 'My First dataset',
                data: [{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 4}, {x: 4, y: 5}, {x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 5},
                    {x: 8, y: 2.8}, {x: 9, y: 3.6}, {x: 10, y: 4.4}, {x: 11, y: 5.7}, {x: 12, y: 2.5}, {x: 13, y: 3.1}, {x: 14, y: 5.2},],
                borderColor: 'rgb(255, 20, 132)',
                borderWidth: 1,
            }]
        };

        console.log([{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 4}, {x: 4, y: 5}, {x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 5},])

        const config = {
            type: 'line',
            data: data,
            options: {
                animation: false,
                parsing: false,
                responsive: true,
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                },
                plugins: {
                    decimation: decimation,
                    legend: {
                        position: 'bottom',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Line Chart'
                    }
                },
                scales: {
                    x: {
                        type: 'linear',
                    }
                }
            }
        };


        var myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chart js decimation test</title>
	<!----------------------------------------------------
	-- Bootstrap(v5.0) CSS
	----------------------------------------------------->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<!----------------------------------------------------
	-- Bootstrap(v5.0) JS Bundle
	----------------------------------------------------->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
	crossorigin="anonymous"></script>

	<!-- chartjs -->
	<!-- <script src="./node_modules/chart.js/dist/chart.min.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>

	</head>

	<body>

	<div class="container-md">
	<canvas id="myChart"></canvas>
	</div>

	<script>

	const decimation = {
	enabled: true,
	algorithm: 'lttb',
	samples: 5,
	threshold: 12
	};

	// const labels = [
	// 'January',
	// 'February',
	// 'March',
	// 'April',
	// 'May',
	// 'June',
	// ];


	const data = {
	datasets: [{
	label: 'My First dataset',
	data: [{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 4}, {x: 4, y: 5}, {x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 5},
	{x: 8, y: 2.8}, {x: 9, y: 3.6}, {x: 10, y: 4.4}, {x: 11, y: 5.7}, {x: 12, y: 2.5}, {x: 13, y: 3.1}, {x: 14, y: 5.2},],
	borderColor: 'rgb(255, 20, 132)',
	borderWidth: 1,
	}]
	};

	console.log([{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 4}, {x: 4, y: 5}, {x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 5},])

	const config = {
	type: 'line',
	data: data,
	options: {
	animation: false,
	parsing: false,
	responsive: true,
	interaction: {
	mode: 'nearest',
	axis: 'x',
	intersect: false
	},
	plugins: {
	decimation: decimation,
	legend: {
	position: 'bottom',
	},
	title: {
	display: true,
	text: 'Chart.js Line Chart'
	}
	},
	scales: {
	x: {
	type: 'linear',
	}
	}
	}
	};





	var myChart = new Chart(
	document.getElementById('myChart'),
	config
	);
	</script>

	</body>

	</html>