javascript - Graph display issue using flot -
i'm totally new in flot. @ first want display 3 chart(d1, d2, d3) data in same page , after when click on new chart button first chart(d1) hide , new chart(d4) insert , 3 chart(d2,d3,d4) show , continuing process. problem graph not displaying. if use random data under function showing graph like this when tried different variables, graph not showing. how can fix problem?
here 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 = 1, j = 0; < 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>
there multiple of issues code, of not specific flot:
the
d1... arrays localgetdata()function , not defined outside of try use themyou use
datasetin loop array, there not such variable definedyour call of
plot()method makes no sense, can't access variables this:$.plot("div.placeholder:eq(" + j + ")"), [dataset("+i+")];the call
plot()inupdate()function tries use raw data, not labeled data (but fails because of point 1 above).
here fiddle of issues fixed. still not handle titles above charts when updating , gives errors after updating more 2 times (when data used up).
Comments
Post a Comment