Graph will not display in chrome using HTML

Question

Graph will not display in chrome using HTML

338 Views Asked by Daniel W. At 19 April 2025 at 14:02

I am trying to create a line graph using HTML and Javascript. I am using the book Data Visualization with Javascript by Stephen A. Thomas as a guide. I am using Komodo Edit to write my code it. My code is as follows:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Military Opinion Practice</title>
</head>
<body>
    <div id="chart" style="width:600px; height:300px;"></div>
    <script type="text/javascript">
        var milOp = [
            [1975, 58],
            [1997, 57],
            [1979, 54],
            [1982, 50],
            [1983, 53],
            [1984, 58],
            [1985, 61],
            [1986, 63],
            [1987, 61],
            [1988, 63],
            [1989, 58],
            [1990, 68],
            [1991, 77],
            [1993, 67],
            [1994, 64],
            [1995, 64],
            [1996, 66],
            [1997, 60],
            [1998, 64],
            [1999, 68],
            [2000, 64],
            [2001, 66],
            [2002, 84],
            [2003, 83],
            [2004, 75],
            [2005, 74],
            [2006, 73],
            [2007, 69],
            [2008, 71],
            [2009, 82],
            [2010, 76],
            [2011, 78],
            [2012, 75],
            [2013, 76],
            [2014, 74],
            [2015, 72],
            [2016, 73]    
        ]
    //FUNCTION TO CALL GRAPH 
    window.onload = function callGraph() {
        Flotr.draw(
            document.getElementById("chart"),
            [{data: milOp, lines: {show:true} }]
        );
    }
    //TOP LEVEL CODE 
    callGraph()
    </script>


</body>
</html>

Can anyone please help me understand where my mistake is. It has been a couple of years since I have taken a JavaScript course and I may have gotten the order of my code wrong or forgot a fundamental step. Any guidance would be much appreciated.

Thank you!

Original Q&A

There are 2 best solutions below

**vapurrmaid** · Answer 1

Can you update your question with the console output? I am unsure what Flotr is and nowhere in your code have you included a library that would account for this.

I'd also suggest doing the following:

    function callGraph() {
    Flotr.draw(
        document.getElementById("chart"),
        [{data: milOp, lines: {show:true} }]
    );
}
window.onload = callGraph();  // note this line

**LiverpoolOwen** · Answer 2

You are forgetting to include the library. I just tried the following on my machine and it works after including the script.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Military Opinion Practice</title>
          <script type="text/javascript" src="../flotr2.min.js"></script>

</head>
<body>
    <div id="chart" style="width:600px; height:300px;"></div>
    <script type="text/javascript">
        var milOp = [
            [1975, 58],
            [1997, 57],
            [1979, 54],
            [1982, 50],
            [1983, 53],
            [1984, 58],
            [1985, 61],
            [1986, 63],
            [1987, 61],
            [1988, 63],
            [1989, 58],
            [1990, 68],
            [1991, 77],
            [1993, 67],
            [1994, 64],
            [1995, 64],
            [1996, 66],
            [1997, 60],
            [1998, 64],
            [1999, 68],
            [2000, 64],
            [2001, 66],
            [2002, 84],
            [2003, 83],
            [2004, 75],
            [2005, 74],
            [2006, 73],
            [2007, 69],
            [2008, 71],
            [2009, 82],
            [2010, 76],
            [2011, 78],
            [2012, 75],
            [2013, 76],
            [2014, 74],
            [2015, 72],
            [2016, 73]    
        ]
    //FUNCTION TO CALL GRAPH 
    window.onload = function callGraph() {
        Flotr.draw(
            document.getElementById("chart"),
            [{data: milOp, lines: {show:true} }]
        );
    }
    //TOP LEVEL CODE 
    callGraph()
    </script>


</body>
</html>

Ensure the script src path is correct.

Graph will not display in chrome using HTML

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FLOTR

Trending Questions

Popular # Hahtags

Popular Questions