help chart vertical X axis notches #11752

paolodecaro · 2024-04-26T08:25:15Z

paolodecaro
Apr 26, 2024

Good morning, sorry if I insist on these requests, but unfortunately I can't solve my problem.
I have this graph that works perfectly, I need to orient the x axis notches vertically, how can I modify the source that I attach without making any mess. Furthermore, having 24 x-axis values, how can I do so that the graph can fit inside the configured canvas without shrinking it. Thank you

`

<title>Dynamic Chart</title> <style type="text/css"> BODY { width:70%; padding-left: 12%; }

            #chart-container {
                width: 100%;
                height: auto;
            }
    </style>
    <script type="text/javascript" src="../JS/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/Chart.min.js"></script>
</head>
<body>
    <center>
    ____________________________________________________________________________________________
    <h1>BAR CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>
    <center>
    ____________________________________________________________________________________________
    <h1>LINE CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas1"></canvas>
    </div>
    <center>
    ____________________________________________________________________________________________
    <h1>RADAR CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas2"></canvas>
    </div>
    <center>
    ____________________________________________________________________________________________
    <h1>BIE CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas3"></canvas>
    </div>
    <center>
    ____________________________________________________________________________________________
    <h1>POLARAREA CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas4"></canvas>
    </div>
    <center>
    ____________________________________________________________________________________________
    <h1>DOUGHNUT CHART</h1>
    _____________________________________________________________________________________________
    </center>
    <div id="chart-container">
        <canvas id="graphCanvas5"></canvas>
    </div>
<script>
    $(document).ready(function () {
         alert ("sono dentro il piccione 1");
        barChart();
        lineChart();
        radarChart();
        bieChart();
        polarAreaChart();
        doughnutCharts();
    });
    function barChart() {
        {
             // alert ("sono dentro il piccione 32");
            $.post("datas_temp.php",
            //  alert ("sono dentro il piccione 2");
            
            
            function (data)
            // alert ("sono dentro il piccione 2");
            {
                console.log(data);
                var name = [];
                var marks = [];
                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }
               // alert ("sono dentro il piccione 3");
                var chartdata = {
                    labels: name,
                    datasets: [
                        {
                            label: 'Student Marks',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                };
                var graphTarget = $("#graphCanvas");
                var barGraph = new Chart(graphTarget, {
                    type: 'bar',
                    data: chartdata,    
        borderWidth: 1
                });
            });
        }
    }
    function lineChart()
    {
        {
            $.post("datas_temp.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];

                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }

                var chartdata = {
                    // 
                    labels: name,
                    datasets: [
                        {
                            
                            label: 'Temperature',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                    
                    //___FINE
                };

                var graphTarget = $("#graphCanvas1");

                var barGraph = new Chart(graphTarget, {
                    type: 'line',
                    data: chartdata
                });
            });
        }
    }
    function radarChart()
    {
        {
            $.post("datas_temp.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];

                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }

                var chartdata = {
                    labels: name,
                    datasets: [
                        {
                            label: 'Student Marks',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                };

                var graphTarget = $("#graphCanvas2");

                var barGraph = new Chart(graphTarget, {
                    type: 'radar',
                    data: chartdata
                });
                



            });
        }
    }
    function bieChart()
    {
        {
            $.post("datas_temp.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];

                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }

                var chartdata = {
                    labels: name,
                    datasets: [
                        {
                            label: 'Student Marks',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                };

                var graphTarget = $("#graphCanvas3");

                var barGraph = new Chart(graphTarget, {
                    type: 'pie',
                    data: chartdata
                });
            });
        }
    }
    function polarAreaChart()
    {
        {
            $.post("datas_temp.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];

                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }

                var chartdata = {
                    labels: name,
                    datasets: [
                        {
                            label: 'Student Marks',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                             backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                };

                var graphTarget = $("#graphCanvas4");

                var barGraph = new Chart(graphTarget, {
                    type: 'polarArea',
                    data: chartdata
                });
            });
        }
    }
    function doughnutCharts()
    {
        {
            $.post("datas_temp.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];

                for (var i in data) {
                    name.push(data[i].Data_Ora);
                    marks.push(data[i].Temperatura);
                }

                var chartdata = {
                    labels: name,
                    datasets: [
                        {
                            label: 'Temperature',
                            backgroundColor: '#49e2ff',
                            borderColor: '#46d5f1',
                            hoverBackgroundColor: '#CCCCCC',
                            hoverBorderColor: '#666666',
                            data: marks,
                            
                             backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                };

                var graphTarget = $("#graphCanvas5");

                var barGraph = new Chart(graphTarget, {
                    type: 'doughnut',
                    data: chartdata
                });
            });
        }
    }
</script>

`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

help chart vertical X axis notches #11752

{{title}}

Replies: 0 comments

Select a reply

help chart vertical X axis notches #11752

paolodecaro Apr 26, 2024

Replies: 0 comments

paolodecaro
Apr 26, 2024