fixko/flotanimator

jQuery Flot Animator

flotanimator's Issues

Stacked horizontal chart not animated

Hey there,

So I tried to use your plugin to animate a stacked horizontal chart, but it didn't animate the entire chart. I just animated the first set of values of the stack.

Uhm... how would I solve this problem?

Not animating when being triggered in a Jquery post success function

Just like the title says, when I run this code outside of the $.post success function, it runs fine and the animation plays. But when I trigger it from inside the $.post function, no animation is played and it just waits a second before the animated material appears. Any thoughts?

`var graph_lines;
var graph_bars;
var d1 = new Array(12);
var d2 = new Array(12);
var d3 = new Array(12);
var mo = new Array(12);
$.post("/app/includes/ajax_get_numbers.php",{months:12},function(data){
data = JSON.parse(data);
//console.log(data);
var d1 = [
[0, 950], [1, 1300], [2, 1600], [3, 1900], [4, 2100], [5, 2500], [6, 2200], [7, 2000], [8, 1950], [9, 1900], [10, 2000], [11, 2120]
];

    for(i = 0; i < 12;i++){
        d1[i]= [12-(i+1),data[i]['processor']];
        d2[i]= [12-(i+1),data[i]['pp']];
        d3[i]= [12-(i+1),data[i]['pp']+data[i]['processor']];
        mo[i]= [12-(i+1),data[i]['month']];
    }
    graph_lines = [{
        label: "Line 1",
        data: d1,
        lines: {
            lineWidth: 2
        },
        shadowSize: 0,
        color: '#0090D9'
    }, {
        label: "Line 1",
        data: d1,
        points: {
            show: true,
            fill: true,
            radius: 6,
            fillColor: "#0090D9",
            lineWidth: 3
        },
        color: '#fff'
    }, {
        label: "Line 2",
        data: d2,
        animator: {
            steps: 300,
            duration: 1000,
            start: 0
        },
        lines: {
            fill: 0.7,
            lineWidth: 0,
        },
        color: '#18A689'
    }, {
        label: "Line 2",
        data: d2,
        points: {
            show: true,
            fill: true,
            radius: 6,
            fillColor: "#18A689",
            lineWidth: 3
        },
        color: '#fff'
    }, ];
    graph_bars = [{
        // Visitors
        data: d1,
        color: '#00b5f3'
    }, {
        // Returning Visitors
        data: d2,
        color: '#008fc0',
        points: {
            radius: 4,
            fillColor: '#008fc0'
        }
    }];
    lineCharts();
});
//d1.reverse();
    //d2.reverse();
    //mo.reverse();
    //console.log(d1);

    //var d2 = [
    //    [0, 450], [1, 500], [2, 600], [3, 550], [4, 600], [5, 800], [6, 900], [7, 800], [8, 850], [9, 830], [10, 1000], [11, 1150]
    //];

    //var tickArray = ['Janv', 'Fev', 'Mars', 'Apri', 'May', 'June', 'July', 'Augu', 'Sept', 'Nov'];

    /****  Line Chart  ****/


    function lineCharts(){
        var line_chart = $.plotAnimator($('#graph-lines'), graph_lines, {
            xaxis: {
                tickLength: 0,
                tickDecimals: 0,
                min: 0,
                ticks: mo,
                font: {
                    lineHeight: 12,
                    weight: "bold",
                    family: "Open sans",
                    color: "#8D8D8D"
                }
            },
            yaxis: {
                ticks: 3,
                tickDecimals: 0,
                tickColor: "#f3f3f3",
                font: {
                    lineHeight: 13,
                    weight: "bold",
                    family: "Open sans",
                    color: "#8D8D8D"
                }
            },
            grid: {
                backgroundColor: {
                    colors: ["#fff", "#fff"]
                },
                borderColor: "transparent",
                margin: 0,
                minBorderMargin: 0,
                labelMargin: 15,
                hoverable: true,
                clickable: true,
                mouseActiveRadius: 4
            },
            legend: {
                show: false
            }
        });
    }


    /****  Bars Chart  ****/


    function barCharts(){
        bar_chart = $.plotAnimator($('#graph-bars'), graph_bars, {
            series: {
                bars: {
                    fill: 1,
                    show: true,
                    barWidth: .6,
                    align: 'center'
                },
                shadowSize: 0
            },
            xaxis: {
                tickColor: 'transparent',
                ticks: mo,
                font: {
                    lineHeight: 12,
                    weight: "bold",
                    family: "Open sans",
                    color: "#9a9a9a"
                }
            },
            yaxis: {
                ticks: 3,
                tickDecimals: 0,
                tickColor: "#f3f3f3",
                font: {
                    lineHeight: 13,
                    weight: "bold",
                    family: "Open sans",
                    color: "#9a9a9a"
                }
            },
            grid: {
                backgroundColor: {
                    colors: ["#fff", "#fff"]
                },
                borderColor: "transparent",
                margin: 0,
                minBorderMargin: 0,
                labelMargin: 15,
                hoverable: true,
                clickable: true,
                mouseActiveRadius: 4
            },
            legend: {
                show: false
            }
        });
    }

    $("#graph-lines").on("animatorComplete", function () {
        $("#lines, #bars").removeAttr("disabled");
    });

    $("#lines").on("click", function () {
        $('#bars').removeClass('active');
        $('#graph-bars').fadeOut();
        $(this).addClass('active');
        $("#lines, #bars").attr("disabled", "disabled");
        $('#graph-lines').fadeIn();
        lineCharts();
    });

    $("#graph-bars").on("animatorComplete", function () {
        $("#bars, #lines").removeAttr("disabled")
    });

    $("#bars").on("click", function () {
        $("#bars, #lines").attr("disabled", "disabled");
        $('#lines').removeClass('active');
        $('#graph-lines').fadeOut();
        $(this).addClass('active');
        $('#graph-bars').fadeIn().removeClass('hidden');
        barCharts();
    });

    $('#graph-bars').hide();

    function showTooltip(x, y, contents) {
        $('<div id="flot-tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            color: '#fff',
            padding: '2px 5px',
            'background-color': '#717171',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    };

    $("#graph-lines, #graph-bars").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(0));
        $("#y").text(pos.y.toFixed(0));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $("#flot-tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);
                showTooltip(item.pageX, item.pageY,"$"+ y + " ");
            }
        } else {
            $("#flot-tooltip").remove();
            previousPoint = null;
        }
    });`

Clearing all data generated with plotAnimator

Hi,

I have a data array that has the data I'm plotting using plotAnimator. I've added some code inside jquery.flot.animator.js to scale the data on the click of a "Manipulation" button. I do this by modifying oData.

I want to be able to clear the data and redraw from scratch, but even if I reset my data array, when I get back to my manipulation the old data is still there and adding to data[series].data...

Do you have any ideas on how to solve this memory leakage problem?

Thanks,

chart.trigger is not a function

I keep getting this message, i am not sure how to fix it. me head section is as follows

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title><?=$page_title?></title>

<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<link href="../dist/css/style.css" rel="stylesheet">


<!-- Morris Charts CSS 
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">-->

<!-- Custom Fonts 
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var base_url = "<?=BASE_URL?>";
</script>   

Package.json

Hi. Please, can you init package.json on your lib?