So iv finaly font time to get it working on our page end comeing up with with a pice of JavaScript to update that data sets.

` Choose time period Year Month Day

                                <script type="text/javascript">
                                    //todo cahe where datas comeing from                                         
                                    //Supplied Datasets to display
                                    //hourly 1 upto 24
                                    let data1 = { "labels": $DataLabelsEncoded,"label": "Expected Usage: ", "datasets": [{ "label": "avg", "data": $dataAvgEncoded, "backgroundColor": "rgba(101, 209, 159, 0.6)", "borderColor": "rgba(101, 209, 159,1)", "borderWidth": 1 },{ "label": "Power usage", "data": $dataPointsEncoded, "backgroundColor": "rgba(93, 176, 201, 0.6)", "borderColor": "rgba(0, 10, 130, .4)", "borderWidth": 1 }] };
                                    //days upto 31 days
                                    let data2 = { "labels": $DataLabelsEncoded,"label": "Expected Usage:", "datasets": [{ "label": "avg", "data": $dataAvgEncoded, "backgroundColor": "rgba(101, 0, 0, 0.6)", "borderColor": "rgba(101, 209, 159,1)", "borderWidth": 1 },{ "label": "Power usage", "data": $dataPointsEncoded, "backgroundColor": "rgba(255, 255, 255, 0.6)", "borderColor": "rgba(0, 10, 130, .4)", "borderWidth": 1 }] };
                                    //months upto 12
                                    let data3 = { "labels": $DataLabelsEncoded,"label": "Expected Usage: ", "datasets": [{ "label": "avg", "data": $dataAvgEncoded, "backgroundColor": "rgba(101, 209, 159, 0.6)", "borderColor": "rgba(101, 209, 159,1)", "borderWidth": 1 },{ "label": "Power usage", "data": $dataPointsEncoded, "backgroundColor": "rgba(93, 176, 201, 0.6)", "borderColor": "rgba(0, 10, 130, .4)", "borderWidth": 1 }] };


                                    // Draw the initial chart
                                    let ctxL = $("#masterLineChart")[0].getContext('2d');
                                        let masterLineChart = new Chart(ctxL, {
                                            type: 'line',
                                            data: data1,
                                            options: {
                                                scales: {
                                                    yAxes: [{
                                                        ticks: {
                                                            beginAtZero: true
                                                        }
                                                    }]
                                                }
                                            }
                                        });

                                // Called on Change
                                $(document).ready(function(){
                                    $("select.dropdown").change(function(){
                                        let selectedChart = $(this).children("option:selected").val();

                                        if (selectedChart ==0){
                                        masterLineChart["config"]["data"] = data1; //<--- THIS WORKS!
                                        masterLineChart.update();
                                        }

                                        if (selectedChart ==1){
                                        masterLineChart["config"]["data"] = data2; //<--- THIS WORKS!
                                        masterLineChart.update();
                                        }

                                        if (selectedChart ==2){

                                        masterLineChart["config"]["data"] = data3; //<--- THIS WORKS!
                                        masterLineChart.update();
                                        }
                                    });
                                });

                            </script>`

if's far from perfect yet but it's functional and can now be improved on.

again thank you for trying to help me with this question.

i have the chart working as intended.i want to have 3 php mysql querrys and swap between then data returned by themim assuming ill have to implment ajax to enable something like that or is there a better way to do it?

const ctxL = document.getElementById("lineChart_Year").getContext('2d');
const gradientFill = ctxL.createLinearGradient(0, 0, 0, 350);
gradientFill.addColorStop(0, "rgba(242,38,19,0.5)");
gradientFill.addColorStop(1, "rgba(0,230,64,0.5)");
let LineChartYear = new Chart(ctxL, {
    type: 'line',
    data: {
        labels: <?php echo json_encode($dataLables, JSON_NUMERIC_CHECK); ?>,
        datasets: [{
            label: "Expected Usage",
            data: <?php echo json_encode($dataAvg, JSON_NUMERIC_CHECK); ?>,
            backgroundColor: [
                'rgba(0,0,0,0)',
            ],
            borderColor: [
                'rgba(0, 10, 130, .1)',
            ],
            borderWidth: 2
        },
            {
                label: "Power Used",
                data: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>,
                backgroundColor: gradientFill,
                borderColor: gradientFill,
                borderWidth: 2
            }
        ]
    },
    options: {
        responsive: true
    }
});

e

Hi, did you try use variables to set chart data and switch it using on click event? Something like this:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: myData,
  options: { <your options> }
});

firstDataset: { <here you first datasets> }
secondDataset: { <here you second datasets> }

$( "#firstButton" ).on( "click", () => {
  myData = firstDataset;
});
$( "#secondButton" ).on( "click", () => {
  myData = secondDataset;
});

Best, Grzegorz