CODEWITHSUNDEEP
javascriptflot
jsanalytics
jsanalytics

Reputation: 13188

Flot not honoring series config for "dynamically" created charts

The second chart below should have a green line and red dots like the first one, however it didn't happen:

CHART IMAGE HERE: unfortunately i can't post images but the sample is simple enough to be opened in a browser to see it.

Here's my default.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My Flot Sample</title>
    <link href="Content/examples.css" rel="stylesheet" />
    <script src="Scripts/jquery.js"></script>
    <script src="Scripts/jquery.flot.js"></script>
</head>
<body>
    <input id="Submit1" type="submit" value="submit"/>
    <div id="myPlot13" style="width:600px;height:300px"></div>
    <div id="myPlot24" style="width:600px;height:300px"></div>

    <script src="Scripts/default.js"></script>
</body>
</html>

And here's default.js:

var x = 0;
var y = 0;
var numPoints = 50;
var delay = 50;

var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];

var serie1 = {
    color: "#00FF00",
    data: d1,
    lines: {
        lineWidth: 0.5
    }
};

var serie2 = {
    color: "#00FF00",
    data: d2,
    lines: {
        lineWidth: 0.5
    }
};

var serie3 = {
    color: "#FF0000",
    data: d3,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var serie4 = {
    color: "#FF0000",
    data: d4,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var data13 = [serie1, serie3];
var data24 = [serie2, serie4];

var options = {
    grid: {
        backgroundColor: "#000000",
        color: "#FFFFFF"
    }
};

function init_data13() {
    for (x = 0; x < numPoints; x++) {
        y += (Math.random() - 0.5);
        d1.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d3.push([x, y]);
        }
    }
}

function getData24() {
    if (d2.length < numPoints) {
        y += (Math.random() - 0.5);
        d2.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d4.push([x, y]);
        }
        x++;
    }

    return [d2, d4];
}

init_data13();
$.plot("#myPlot13", data13, options);

var btn = document.getElementById('Submit1');
btn.onclick = addChart;

function addChart() {
    x = 0;
    y = 0;

    var somePlot = $.plot("#myPlot24", data24, options);

    function updatePlot() {
        somePlot.setData(getData24());
        somePlot.draw();
        somePlot.setupGrid();
        setTimeout(updatePlot, delay);
    }

    updatePlot();
}

The only difference is that the second chart is created "dynamically" when the SUBMIT button is clicked.

Upvotes: 0

Views: 315

Answers (1)

Ian A
Ian A

Reputation: 6128

Apologies for that, I understand now. See here for a working demo (that updates in real time). I modified the updatePlot() function as follows:

function updatePlot() {
    // Destroy the current chart
    somePlot.shutdown();
    // Get the data with the new data point
    getData24();
    // Recreate the chart
    somePlot = $.plot("#myPlot24", data24, options);
    setTimeout(updatePlot, delay);
}

It computes the next point by calling getData24() then calls the $.plot function to recreate the chart with the new data point.

Edit

Have found another way to do it without creating a brand new chart. You can call the getData24() function then pass data24 as a parameter to somePlot.setData()

function updatePlot() {
    // Add the next data point
    getData24();
    // Pass the data to the existing chart (along with series colours)
    somePlot.setData(data24);
    somePlot.draw();
    somePlot.setupGrid();
    setTimeout(updatePlot, delay);
}

See here for a Fiddle

Upvotes: 1

Related Questions