0

I'm working with Flot Charts (http://www.flotcharts.org) and having problems getting some plugins to work. Below is my line graph and I can't get the tooltips plugin to show (https://github.com/krzysu/flot.tooltip). I also couldn't get an axis labels plugin to work either. However, the resize plugin works good. What's up with my code? I appreciate any help.

<head>

    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.tooltip.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
    <!--<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>-->
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function(){

    $.ajax({
            //usually, we'll just call the same URL, a script
            //connected to a database, but in this case we only
            //have static example files so we need to modify the
            //URL
        url: "views/sales_year_line_data.php",
        method: 'GET',
        dataType: 'json',
        success: onOutboundReceived
    });


        function onOutboundReceived(series) {
            var length = series.length;
            var finalData = series;
            var options = {
            lines: { show: true, fill: true},
            points: { show: true, hoverable:true },
            grid: { show: true, aboveData: false, color: "rgba(255, 255, 255, 1.0)", borderWidth: 0, hoverable: true, clickable: true },
            legend: {position: "sw", backgroundOpacity: 0},
            xaxis: { ticks: [[1,'Jan'],[2,'Feb'],[3,'Mar'],[4,'Apr'],[5,'May'],[6,'Jun'],[7,'Jul'],[8,'Aug'],[9,'Sep'],[10,'Oct'],[11,'Nov'],[12,'Dec']] },
            yaxis: { show: false },
            tooltip: { show: true, content: "%s | x: %x; y: %y"}

            };

    $.plot($("#test-flot"), finalData, options);
        }
    });     
    </script>

</head>
Cory
  • 173
  • 3
  • 11
  • Needs more information. Error messages, data format etc. If possible, build a [fiddle](http://jsfiddle.net) that shows the problem. – Raidri Oct 04 '15 at 15:46

1 Answers1

0

I used the jquery.flot.tooltip.js from cloudflare.com cdn and now the tooltips work.

<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
Cory
  • 173
  • 3
  • 11