I'm making a chart using jQuery Flot library in which x-axis contains text unit (month) instead of number. So I use categories plugin for Flot and clone example code from its main website. But the months does not show, just the bargraph displayed. The code is like following:
The code snippet gets problem is between commented block "site stats chart". I upload full code just for you all know what I am doing and can detect if there is issue in other parts that affect this code snippet.
Flot categories is downloaded from 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"; /* red */
var $chrt_second = "#6595b4"; /* blue */
var $chrt_third = "#FF9F01"; /* orange */
var $chrt_fourth = "#7e9d3a"; /* green */
var $chrt_fifth = "#BD362F"; /* dark red */
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;
for (var i = 0; i < ongoingProjects.length; i++) {
ongoingProjects[i].deadline = getDateFromJsonDate(ongoingProjects[i].deadline);
}
for (var category in issues) {
for (var i = 0; i < 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) {
return new Date(parseInt(d.substr(6)));
}
function getDateString(d) {
return (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
}
function getTickDateString(d) {
return MONTH_NAMES[d.getMonth()] + "-" + d.getFullYear();
}
function fillOngoingTable() {
var tblBody = $('#tbl_ongoing tbody');
for (var i = 0; i < 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() {
for (var category in categories) {
var projects = categories[category];
var ongoing = [];
var upcoming = [];
var completed = [];
var drop = [];
for (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;
for (var i = 0; i < 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) {
return '<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 for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to 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 data = [["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>
The categories plugin requires an array of categories in the xaxis options:
xaxis: {
mode: "categories",
categories: ["Category One", "Category Two", "Category Three"] // I don't see you doing this anywhere in your code!
}