CODEWITHSUNDEEP
javascriptjqueryflot
user5832358
user5832358

Reputation:

Graph display issue using flot

I'm totally new in flot. At first I want to display three chart(d1, d2, d3) data in the same page and after that when I click on new chart button first chart(d1) will hide and new chart(d4) will insert and three chart(d2,d3,d4) will show and continuing the process. But the problem is that graph is not displaying. If I use random data under a function then it is showing the graph like this but when I tried with different variables, the graph is not showing. How can I fix this problem?

Here is my code:

<html>
    <head>
        <title>Graph</title>
        <style>
            div.placeholder {
                width: 400px;
                height: 200px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="jquery.flot.js"></script>
        <script type="text/javascript">
            function getdata(){
                var d1 = [[0,1],[1,4],[2,4],[3,8],[4,2],[5,11],[6,19]];
                var d2 = [[7,1],[8,5],[9,4],[10,13],[11,2],[12,11],[13,19]];
                var d3 = [[14,10],[15,4],[16,14],[17,8],[18,2],[19,1],[20,19]];
                var d4 = [[21,4],[22,11],[23,18],[24,12],[25,1],[26,19],[27,8]];
                var d5 = [[28,5],[29,14],[30,13],[31,2],[32,11],[33,9]];
            }
            $(document).ready(function () {
                getdata();
                var dataset1 = [{ 
                    label: "Day1", 
                    data: d1, 
                    points: { symbol: "triangle" }
                }];
                var dataset2 = [{
                    label: "Day2",
                    data: d2,
                    points: { symbol: "cross" }
                }];
                var dataset3 = [{
                    label: "Day3",
                    data: d3,
                    points: { symbol: "square" }
                }];
                var dataset4 = [{
                    label: "Day4",
                    data: d4,
                    points: { symbol: "diamond" }
                }];
                var dataset5 = [{
                    label: "Day5",
                    data: d5,
                    points: { symbol: "circle", color: "black" }
                }];

                for(var i = 1, j = 0; i < dataset.length, j < $('div.placeholder').length; i++, j++){
                    $.plot("div.placeholder:eq("+j+")"),[dataset("+i+")];
                }
                function update() {
                    $('div.placeholder:visible:first').hide();
                    $('div.placeholder:last').after($('<div>').addClass('placeholder'));
                    $.plot("div.placeholder:last", [getdata()]); 
                }
                $('#btn').on('click', update);
            });
        </script>
    </head>

    <body>
        DAY 1<div class="placeholder"></div>
        DAY 2<div class="placeholder"></div>
        DAY 3<div class="placeholder"></div>
        <input id="btn" type="button" value=" New Chart " />
    </body>
</html>

Upvotes: 2

Views: 130

Answers (1)

Raidri
Raidri

Reputation: 17550

There are multiple of issues with your code, most of which are not specific to Flot:

  • The d1... arrays are local to the getdata() function and not defined outside of it where you try to use them

  • You use dataset in your for loop like an array, but there is not such variable defined

  • Your call of the plot() method makes no sense, you can't access variables like this: $.plot("div.placeholder:eq(" + j + ")"), [dataset("+i+")];

  • The call to plot() in the update() function tries to use the raw data, not you labeled data (but fails because of point 1 above).

Here is a fiddle with most of the issues fixed. It still does not handle the titles above the charts when updating and gives errors after updating more then two times (when your data is used up).

Upvotes: 1

Related Questions