Question about horizontal scrolling bar

Hello everyone,

This is my first post. I will try to describe my question as clear as possible.

Basically, my job is to combine two functions below:

Goal

1. Generate multiple charts (click me). For this function,You can find the original question here (click me).

2. Horizontal Scroll Bar (click me)

So what I want is to generate multiple charts inside the horizontal scroll bar. However, the data of charts comes from mysql database. Also, the number of chart will be different depends on the query. I finish this part, but the result doesn't go well.

Problems

The following are my problems:

1. For example, my query result generate 20 charts. I can't see them on my browser. I think it is because the width of dragBar

<div id="dragBar"></div>

doesn't change. I have seen the jquery.horizontal.scroll.js file in Horizontal Scroll Bar (click me). I think the width of the dragBar should change depends on the number of chart in order to scroll through all of them, but I don't know how to sync the number of chart with the code inside the js file to change the width.

2. In Horizontal Scroll Bar (click me), you can click on the track part.

<div id="track"></div>

Then the dragBar should move to the position you click. However, it doesn't work for me. When I click the track, my dragBar always go back to the left end. I don't know why.

I am also wondering if it is the problem with my css file. because my layout of Horizontal Scroll Bar (click me)

<ul id="horiz_container_outer"></ul>

is different from Horizontal Scroll Bar (click me) when I use the developer mode in safari.

I provide part of my code with database below to be clear.

<section id="ib">
    <div class="ib container">
        <div class="container-inside">
            <div class="search-box">
                <form>
                    <input type="text" name="q" id="search" placeholder="Search for company...">
                    <span></span>
                    <input type="submit" value="Submit" style="display: none;">
                    </form>
            </div>
        </div>
        <?php
            $servername = "localhost";
            $username = "root";
            $password = "root"; 
            $dbname = "xxx";
                    
            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            } 

            $sql_cid = "select xxx from xxx where xxx=\"".$_GET['q']."\"";
            $result_cid = $conn->query($sql_cid);

            if (mysqli_num_rows($result_cid) > 0){
                while($row = mysqli_fetch_assoc($result_cid)) {
                    $cid = $row['U3_ID'];
                }
            }
            $sql = "select * from xxx where xxx=".$cid;
            $result = $conn->query($sql);
            $pds = array();
                    
            if (mysqli_num_rows($result) > 0) {
                while($row = mysqli_fetch_assoc($result)) {
                    $pds[] = array_values($row);
                }
                $count = count($pds);
            } else {
                echo "0 results";
            }
            ?>
            <script>
                window.onload = function() {
                        
                    var charts = []; 
                    var chartCount = <?php echo $count?>;
                    var maxCount = charts.length + Number(chartCount);
                    var all_data = <?php echo json_encode($pds, JSON_NUMERIC_CHECK); ?>;
                        
                    for(var i = charts.length; i < maxCount; i++){
                        var data = all_data[i];
                        var pd   = data.slice(2, data.length);
                        var date = data[2];
                        pd = pd.map(function (row, index) {
                                return {
                                    x: index,
                                    y: row
                                };
                            });
                        var li = document.createElement("li");
                        li.setAttribute("style", "width : 500px; height : 300px");
                        li.id = "horiz_container" + i;
                        document.getElementById("horiz_container").appendChild(li);

                        charts[i]= new CanvasJS.Chart("horiz_container"+i, {
                                zoomEnabled: true,
                                theme: "light2",
                                backgroundColor: "#F5DEB3",
                                title :{
                                  text: date
                                },
                                axisX:{
                                    title: "Time"
                                },
                                data: [{
                                  type: "line",
                                  dataPoints: pd
                                }]
                            });
                            charts[i].render();
                        }
                        document.getElementById("horiz_container").style.width =  "<?php echo 505*$count ?>px";
                        }
            </script>
            <div class="container-image">
                <ul id="horiz_container_outer">
                    <li id="horiz_container_inner">
                        <ul id="horiz_container">
                            <li></li>
                        </ul>
                    </li>
                </ul>
                <div id="scrollbar">
                    <a id="left_scroll" class="mouseover_left" href="#"></a>
                    <div id="track">
                        <div id="dragBar"></div>
                    </div>
                    <a id="right_scroll" class="mouseover_right" href="#"></a>
                </div>
            </div>
        </div>
    </section>

By the way, you can see I put

<li></li>

in

<ul id="horiz_container">

first. The reason is because if I don't do this, when I scroll the window of the horizontal scroll bar with my mouse, it scroll vertically, which I don't know why either... Hope you can help me out. I really want this to work. If you need more information, such as my css file or others. Please let me know. I will reply as soon as possible.

Thank you