javascript - Categories plugin for jQuery Flot library not working -
i'm making chart using jquery flot library in x-axis contains text unit (month) instead of number. utilize categories plugin flot , clone illustration code main website. months not show, bargraph displayed. code following:
the code snippet gets problem between commented block "site stats chart". upload total code know doing , can observe if there issue in other parts impact code snippet.
flot categories downloaded http://www.flotcharts.org/flot/jquery.flot.categories.js
<%@ page language="c#" autoeventwireup="true" codebehind="projectdashboard.aspx.cs" inherits="selportal.project.projectdashboard" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>project dashboard</title> <script type="text/javascript"> pagesetup(); loadscript("js/plugin/flot/jquery.flot.cust.js", loadflotresize); function loadflotresize() { loadscript("js/plugin/flot/jquery.flot.resize.js", loadflotfillbetween); } function loadflotfillbetween() { loadscript("js/plugin/flot/jquery.flot.fillbetween.js", loadflotorderbar); } function loadflotorderbar() { loadscript("js/plugin/flot/jquery.flot.orderbar.js", loadflotpie); } function loadflotpie() { loadscript("js/plugin/flot/jquery.flot.pie.js", loadflotcategories); } function loadflotcategories() { loadscript("js/plugin/flot/jquery.flot.categories.js", loaddebug); } function loaddebug() { loadscript("js/plugin/flot/jquery.flot.debug.js", loadflottooltip); } function loadflottooltip() { loadscript("js/plugin/flot/jquery.flot.tooltip.js", generateallflotcharts); } /* chart colors default */ var $chrt_border_color = "#efefef"; var $chrt_grid_color = "#ddd" var $chrt_main = "#e24913"; /* reddish */ var $chrt_second = "#6595b4"; /* bluish */ var $chrt_third = "#ff9f01"; /* orange */ var $chrt_fourth = "#7e9d3a"; /* greenish */ var $chrt_fifth = "#bd362f"; /* dark reddish */ var $chrt_mono = "#000"; var month_names = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"]; var categories = {}; var ongoingprojects = []; var issues = {}; $(function () { var jsondata = $("#projectsyearcategory").val(); parsedatareceived(jsondata); fillongoingtable(); }); function parsedatareceived(json) { var obj = json.parse(json); categories = obj.allprojects; ongoingprojects = obj.ongoingprojects; issues = obj.issues; (var = 0; < ongoingprojects.length; i++) { ongoingprojects[i].deadline = getdatefromjsondate(ongoingprojects[i].deadline); } (var category in issues) { (var = 0; < issues[category].length; i++) { issues[category][i] = [gettickdatestring(getdatefromjsondate(issues[category][i].item1)), issues[category][i].item2]; } } console.log(categories); console.log(ongoingprojects); console.log(issues); } function getdatefromjsondate(d) { homecoming new date(parseint(d.substr(6))); } function getdatestring(d) { homecoming (d.getmonth() + 1) + "/" + d.getdate() + "/" + d.getfullyear(); } function gettickdatestring(d) { homecoming month_names[d.getmonth()] + "-" + d.getfullyear(); } function fillongoingtable() { var tblbody = $('#tbl_ongoing tbody'); (var = 0; < ongoingprojects.length; i++) { var row = $('<tr>'); row.append($('<td>').text(ongoingprojects[i].name)); row.append($('<td>').text(ongoingprojects[i].model)); row.append($('<td>').text(ongoingprojects[i].grade)); row.append($('<td>').text(getdatestring(ongoingprojects[i].deadline))); tblbody.append(row); } } function generateallflotcharts() { (var category in categories) { var projects = categories[category]; var ongoing = []; var upcoming = []; var completed = []; var drop = []; (var year in projects) { ongoing.push([year, projects[year]["ongoing"]]); upcoming.push([year, projects[year]['upcoming']]); completed.push([year, projects[year]['completed']]); drop.push([year, projects[year]['drop']]); } var ds = new array(); ds.push({ data: ongoing, label: "ongoing", bars: { show: true, barwidth: 0.1, order: 1, } }); ds.push({ data: upcoming, label: "upcoming", bars: { show: true, barwidth: 0.1, order: 2, } }); ds.push({ data: completed, label: "completed", bars: { show: true, barwidth: 0.1, order: 3, } }); ds.push({ data: drop, label: "drop", bars: { show: true, barwidth: 0.1, order: 4, } }); //display graph $.plot($("#bar-chart-" + category.tolowercase()), ds, { colors: [$chrt_second, $chrt_fourth, "#666", "#bbb"], grid: { show: true, hoverable: true, clickable: true, tickcolor: $chrt_border_color, borderwidth: 0, bordercolor: $chrt_border_color, }, legend: true, xaxis: { tickdecimals: 0, }, yaxis: { tickdecimals: 0, min: 0, }, tooltip: true, tooltipopts: { content: "<span>%s: %y project(s)</span>", defaulttheme: false } }); } /* pie chart */ if ($('#pie-chart').length) { var data_pie = []; var series = math.floor(math.random() * 10) + 1; (var = 0; < series; i++) { data_pie[i] = { label: "series" + (i + 1), data: math.floor(math.random() * 100) + 1 } } $.plot($("#pie-chart"), data_pie, { series: { pie: { show: true, innerradius: 0.5, radius: 1, label: { show: false, radius: 2 / 3, formatter: function (label, series) { homecoming '<div style="font-size:11px;text-align:center;padding:4px;color:white;">' + label + '<br/>' + math.round(series.percent) + '%</div>'; }, threshold: 0.1 } } }, legend: { show: true, nocolumns: 1, // number of colums in legend table labelformatter: null, // fn: string -> string labelboxbordercolor: "#000", // border color little label boxes container: null, // container (as jquery object) set legend in, null means default on top of graph position: "ne", // position of default legend container within plot margin: [5, 10], // distance grid border default legend container within plot backgroundcolor: "#efefef", // null means auto-detect backgroundopacity: 1 // set 0 avoid background }, grid: { hoverable: true, clickable: true }, }); } /* end pie chart */ /* site stats chart */ if ($("#line-chart-issues").length) { var issuessdk = issues["sdk"]; var issuesmobile = issues["mobile"]; var issuescamera = issues["camera"]; console.log(issuessdk); console.log(issuesmobile); console.log(issuescamera); var info = [["january", 10], ["february", 8], ["march", 4], ["april", 13], ["may", 17], ["june", 9]]; $.plot("#line-chart-issues", [data], { series: { bars: { show: true, barwidth: 0.6, align: "center" } }, xaxis: { mode: "categories", ticklength: 0 } }); } /* end site stats */ } </script> </head>
you need update main library http://www.flotcharts.org/flot/jquery.flot.js create compatible
javascript jquery twitter-bootstrap flot
No comments:
Post a Comment