I'm trying to draw a chart in an application where I show data month on month, and would like to add labels to the x-axis to signify the years, but when I try to add a label it automatically adds the year and month cluttering up the look of the application.
var e=new google.visualization.arrayToDataTable([
["Year",county_1,county_2,"National"],
["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3],
["Feb-10",med_feb_10_1,med_feb_10_2,med_feb_10_3],
["Mar-10",med_mar_10_1,med_mar_10_2,med_mar_10_3],
["Apr-10",med_apr_10_1,med_apr_10_2,med_apr_10_3],
["May-10",med_may_10_1,med_may_10_2,med_may_10_3],
["Jun-10",med_jun_10_1,med_jun_10_2,med_jun_10_3],
["Jul-10",med_jul_10_1,med_jul_10_2,med_jul_10_3],
["Aug-10",med_aug_10_1,med_aug_10_2,med_aug_10_3],
["Sept-10",med_sep_10_1,med_sep_10_2,med_sep_10_3],
["Oct-10",med_oct_10_1,med_oct_10_2,med_oct_10_3],
["Nov-10",med_nov_10_1,med_nov_10_2,med_nov_10_3],
["Dec-10",med_dec_10_1,med_dec_10_2,med_dec_10_3],
["Jan-11",med_jan_11_1,med_jan_11_2,med_jan_11_3],
["Feb-11",med_feb_11_1,med_feb_11_2,med_feb_11_3],
["Mar-11",med_mar_11_1,med_mar_11_2,med_mar_11_3],
["Apr-11",med_apr_11_1,med_apr_11_2,med_apr_11_3],
["May-11",med_may_11_1,med_may_11_2,med_may_11_3],
["Jun-11",med_jun_11_1,med_jun_11_2,med_jun_11_3],
["Jul-11",med_jul_11_1,med_jul_11_2,med_jul_11_3],
["Aug-11",med_aug_11_1,med_aug_11_2,med_aug_11_3],
["Sept-11",med_sep_11_1,med_sep_11_2,med_sep_11_3],
["Oct-11",med_oct_11_1,med_oct_11_2,med_oct_11_3],
["Nov-11",med_nov_11_1,med_nov_11_2,med_nov_11_3],
["Dec-11",med_dec_11_1,med_dec_11_2,med_dec_11_3],
["Jan-12",med_jan_12_1,med_jan_12_2,med_jan_12_3],
["Feb-12",med_feb_12_1,med_feb_12_2,med_feb_12_3],
["Mar-12",med_mar_12_1,med_mar_12_2,med_mar_12_3],
["Apr-12",med_apr_12_1,med_apr_12_2,med_apr_12_3],
["May-12",med_may_12_1,med_may_12_2,med_may_12_3],
["Jun-12",med_jun_12_1,med_jun_12_2,med_jun_12_3],
["Jul-12",med_jul_12_1,med_jul_12_2,med_jul_12_3],
["Aug-12",med_aug_12_1,med_aug_12_2,med_aug_12_3],
["Sept-12",med_sep_12_1,med_sep_12_2,med_sep_12_3],
["Oct-12",med_oct_12_1,med_oct_12_2,med_oct_12_3],
["Nov-12",med_nov_12_1,med_nov_12_2,med_nov_12_3],
["Dec-12",med_dec_12_1,med_dec_12_2,med_dec_12_3],
["Jan-13",med_jan_13_1,med_jan_13_2,med_jan_13_3],
["Feb-13",med_feb_13_1,med_feb_13_2,med_feb_13_3],
["Mar-13",med_mar_13_1,med_mar_13_2,med_mar_13_3],
["Apr-13",med_apr_13_1,med_apr_13_2,med_apr_13_3],
["May-13",med_may_13_1,med_may_13_2,med_may_13_3],
["Jun-13",med_jun_13_1,med_jun_13_2,med_jun_13_3],
["Jul-13",med_jul_13_1,med_jul_13_2,med_jul_13_3],
["Aug-13",med_aug_13_1,med_aug_13_2,med_aug_13_3],
["Sept-13",med_sep_13_1,med_sep_13_2,med_sep_13_3],
["Oct-13",med_oct_13_1,med_oct_13_2,med_oct_13_3],
["Nov-13",med_nov_13_1,med_nov_13_2,med_nov_13_3],
["Dec-13",med_dec_13_1,med_dec_13_2,med_dec_13_3],
["Jan-14",med_jan_14_1,med_jan_14_2,med_jan_14_3],
["Feb-14",med_feb_14_1,med_feb_14_2,med_feb_14_3],
["Mar-14",med_mar_14_1,med_mar_14_2,med_mar_14_3],
["Apr-14",med_apr_14_1,med_apr_14_2,med_apr_14_3],
["May-14",med_may_14_1,med_may_14_2,med_may_14_3],
["Jun-14",med_jun_14_1,med_jun_14_2,med_jun_14_3],
["Jul-14",med_jul_14_1,med_jul_14_2,med_jul_14_3],
["Aug-14",med_aug_14_1,med_aug_14_2,med_aug_14_3],
["Sept-14",med_sep_14_1,med_sep_14_2,med_sep_14_3],
]);
var b={
title:"House Price Index by County:",
curveType:"function",
is3D:true,
legend:"top",
width:600,
height:250,
hAxis: {textPosition: 'none' }};
var d=new google.visualization.LineChart(document.getElementById("chart_div"));
d.draw(e,b)
}
Can anyone suggest a way to just have the labels of the years (2010:2014) on the graphs?
You will likely need to loop through the data to change it as you see fit:
var exampleData = ["Jan-10",med_jan_10_1,med_jan_10_2,med_jan_10_3];
for (var i = 0; i < exampleData.length; i++) {
var date = exampleData[i][0];
var year = '20' + date.split('-')[1];
exampleData[i][0] = year;
}
Related
I want to populate a dynamic column chart such that the rows as well the columns are dynamic.
Here is a sample json array that I want to transform:
{"location":"Chain","item_category":"A","delay":"681"},
{"location":"Chennai ","item_category":"A","delay":"286"},{"location":"Bawal","item_category":"A","delay":"339"},{"location":"Haridwar","item_category":"A","delay":"1256"},{"location":"Ludhiana","item_category":"A","delay":"1048"},{"location":"Bawal","item_category":"B","delay":"1"}
There are 3 parameters namely location, item_category and delay where:
Location represents columns. (Varies dynamically)
Delay range should be on Y-axis. (Varies dynamically)
On x-axis they are mapped with items.
So far, I'm able to fetch all the required data but unable to create a graph out of it. I have referred to various libraries such as Google-visualization, Pchart, JPGraph and many more.
Each time I freeze on populating the graph dynamically.
Here is a sample code for populating Google Column Chart:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Item Category', 'Location 1', 'Location 2', 'Location 3,...'],
['item1', 1000, 400, 200,...delay value of location 'n'],
['item2', 1170, 460, 250,...],
['item3', 660, 1120, 300]...],
['item4', 1030, 540, 350]
.
.
]);
//I want to populate this data variable using PHP
var chart = new google.charts.Bar(document.getElementById('my_Chartid'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
These are the links I have referred. I want to populate this data variable in javascript dynamically.
Google column chart dashboard
https://developers.google.com/chart/interactive/docs/gallery/columnchart
first, need to convert json data to normal array
then use a data view to create a column for each category
then aggregate the data and draw the chart
google.charts.load('current', {
callback: function () {
var jsonData = [
{"location":"Chain","item_category":"A","delay":"681"},
{"location":"Chennai ","item_category":"A","delay":"286"},
{"location":"Bawal","item_category":"A","delay":"339"},
{"location":"Haridwar","item_category":"A","delay":"1256"},
{"location":"Ludhiana","item_category":"A","delay":"1048"},
{"location":"Bawal","item_category":"B","delay":"100"}
];
// load chart data
var chartData = [];
jsonData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 1) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
// create data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
var viewColumns = [0];
// build view & agg column for each category
data.getDistinctValues(1).forEach(function (category, index) {
// add view column
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === category) {
return dt.getValue(row, 2);
}
return null;
},
label: category,
type: 'number'
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: category,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// agg view
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
var chart = new google.charts.Bar(document.getElementById('chart_div'));
// use group data to draw chart
chart.draw(group);
},
packages:['bar']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I need to make time picker, filled with numbers that I get from the backend. For example, the backend sent to me the time ranges when the product can light up, meaning initial value and how long can light up. Example,
backend sends to the start time 17 hours, and the maximum range 3 hours. In first picker we select 17 and in second time picker choose the ultimate value of which shall not be less than the selected start value (17) and do not exceed the maximum time range that I received from the backend.
here is html
<p>From</p>
<div uib-timepicker ng-model="mytimeStart" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" readonly-input=true></div>
<p>To</p>
<div uib-timepicker ng-model="mytimeEnd" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" readonly-input=true></div>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
my ctrl is here (example of service)
$http.get(serviceBase + 'article')
.success(function (response)
{
$scope.start= response.start;
$scope.end= response.end;
$scope.step = response.step;
$scope.mytime = new Date();
$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};
$scope.hstep = 1;
$scope.mstep = 30;
$scope.ismeridian = false;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};
$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};
$scope.changed = function(){
$scope.maxTime = $scope.max;
$scope.minTime = $scope.min;
$scope.stepTime = $scope.step;
$scope.maxTimeStep = $scope.maxTime + $scope.stepTime;
console.log($scope.maxTimeStep);
};
$scope.clear = function() {
$scope.mytime = null;
};
});
With provided that if the chosen start time of 22:00, and the range is 4 hours, timepicker after 24:00 must switch to 01:00. And after the selection, send the selected value on the backend. I tried to ui.bootstrap.timepicker, but I do not know how to set up custom values, and that after a 24 hour shift counter to the 01:00, I hope you understand, thank you
Here is [plunker][1]
[1]: https://plnkr.co/edit/dJmNNQlJEglxi4mDp0ex?p=preview
I am looking for a solution to group data into weeks / months without external library. I have seen the D3.js nest() option here: how can i group JSON data into the weeks according to calender?
Here another way using npm: https://www.npmjs.com/package/group-by-time
Maybe I am crazy having grown up in the age of dialup, but I still like to keep how many things I load on a page down to what is actually needed instead of loading everything possible, just in case I want to use it, even though the user "might" already have a cached copy from a CDN.
I am currently using Chart.js to display data, also available are Bootstrap and jQuery. I would love to be able to switch the chart between day, week month, using only javascript or jQuery, which seems like it should be a fairly common thing, but I don't see any examples without going for a bigger library like I mentioned above.
var chart={
dates: ['2015-09-01', '2015-09-02', '2015-09-03', '2015-09-04', '2015-09-05', '2015-09-06', '2015-09-07', '2015-09-08', '2015-09-09', '2015-09-10', '2015-09-11', '2015-09-12', '2015-09-13', '2015-09-14', '2015-09-15', '2015-09-16', '2015-09-17', '2015-09-18', '2015-09-19', '2015-09-20', '2015-09-21', '2015-09-22', '2015-09-23', '2015-09-24', '2015-09-25', '2015-09-26', '2015-09-27', '2015-09-28', '2015-09-29', '2015-09-30', '2015-10-01', '2015-10-02', '2015-10-03', '2015-10-04', '2015-10-05', '2015-10-06', '2015-10-07', '2015-10-08', '2015-10-09', '2015-10-10', '2015-10-11', '2015-10-12', '2015-10-13', '2015-10-14', '2015-10-15', '2015-10-16', '2015-10-17', '2015-10-18', '2015-10-19', '2015-10-20', '2015-10-21', '2015-10-22', '2015-10-23', '2015-10-24', '2015-10-25', '2015-10-26', '2015-10-27', '2015-10-28', '2015-10-29', '2015-10-30', '2015-10-31', '2015-11-01', '2015-11-02', '2015-11-03', '2015-11-04', '2015-11-05', '2015-11-06', '2015-11-07', '2015-11-08', '2015-11-09', '2015-11-10', '2015-11-11', '2015-11-12', '2015-11-13', '2015-11-14', '2015-11-15', '2015-11-16', '2015-11-17', '2015-11-18', '2015-11-19', '2015-11-20', '2015-11-21', '2015-11-22', '2015-11-23', '2015-11-24', '2015-11-25', '2015-11-26', '2015-11-27', '2015-11-28', '2015-11-29', '2015-11-30', '2015-12-01', '2015-12-02', '2015-12-03', '2015-12-04', '2015-12-05', '2015-12-06', '2015-12-07', '2015-12-08', '2015-12-09', '2015-12-10', '2015-12-11', '2015-12-12', '2015-12-13', '2015-12-14', '2015-12-15', '2015-12-16', '2015-12-17', '2015-12-18', '2015-12-19', '2015-12-20', '2015-12-21', '2015-12-22', '2015-12-23', '2015-12-24', '2015-12-25', '2015-12-26', '2015-12-27', '2015-12-28', '2015-12-29', '2015-12-30', '2015-12-31', '2016-01-01', '2016-01-02', '2016-01-03', '2016-01-04', '2016-01-05', '2016-01-06', '2016-01-07', '2016-01-08', '2016-01-09', '2016-01-10', '2016-01-11', '2016-01-12', '2016-01-13', '2016-01-14', '2016-01-15', '2016-01-16', '2016-01-17', '2016-01-18', '2016-01-19', '2016-01-20', '2016-01-21', '2016-01-22', '2016-01-23', '2016-01-24', '2016-01-25', '2016-01-26', '2016-01-27', '2016-01-28', '2016-01-29', '2016-01-30', '2016-01-31', '2016-02-01', '2016-02-02', '2016-02-03', '2016-02-04', '2016-02-05', '2016-02-06', '2016-02-07', '2016-02-08', '2016-02-09', '2016-02-10', '2016-02-11', '2016-02-12', '2016-02-13', '2016-02-14', '2016-02-15', '2016-02-16', '2016-02-17', '2016-02-18', '2016-02-19', '2016-02-20', '2016-02-21', '2016-02-22', '2016-02-23', '2016-02-24', '2016-02-25', '2016-02-26', '2016-02-27', '2016-02-28', '2016-02-29'],
data: [77.02, 63.80, 21.64, 86.60, 65.40, 46.25, 27.38, 66.65, 67.25, 65.59, 64.80, 01.00, 32.75, 04.30, 51.92, 02.75, 40.20, 72.30, 62.90, 83.60, 66.66, 37.30, 93.90, 01.50, 55.77, 50.00, 73.20, 30.03, 07.95, 21.65, 07.93, 66.94, 11.72, 33.75, 22.80, 14.55, 68.78, 66.78, 52.35, 06.24, 64.78, 22.21, 19.08, 23.69, 54.40, 39.55, 28.76, 22.25, 09.85, 07.50, 22.47, 75.94, 93.34, 16.29, 28.98, 64.40, 78.68, 30.65, 96.65, 99.35, 77.50, 75.30, 89.85, 97.50, 53.90, 97.55, 28.98, 75.08, 25.66, 41.00, 73.72, 68.50, 95.40, 49.50, 32.50, 86.00, 05.43, 88.19, 50.39, 03.90, 82.90, 53.78, 94.20, 82.40, 12.63, 78.80, 07.50, 66.50, 41.75, 91.25, 34.50, 22.50, 85.50, 80.00, 33.75, 59.50, 52.50, 73.25, 76.50, 38.75, 11.00, 55.00, 37.25, 92.50, 74.75, 55.75, 37.25, 61.01, 90.95, 87.65, 99.08, 84.49, 47.00, 72.20, 45.95, 44.35, 10.90, 27.05, 63.10, 63.50, 66.48, 97.25, 39.85, 81.50, 57.90, 02.78, 72.95, 41.55, 39.44, 15.85, 06.60, 13.60, 87.10, 86.40, 90.75, 48.30, 29.75, 16.25, 20.51, 45.40, 51.10, 82.00, 24.24, 92.88, 81.75, 18.50, 89.15, 55.75, 53.50, 74.90, 41.35, 61.40, 07.80, 56.80, 33.75, 75.02, 78.50, 46.10, 39.25, 95.00, 22.85, 36.00, 43.53, 63.80, 32.85, 88.30, 89.69, 05.75, 16.15, 15.25, 20.55, 44.50, 46.28, 71.75, 19.45, 41.75, 25.75, 09.05, 58.77, 76.20, 30.45, 71.75]
};
I'm assuming that date format is YYYY-MM-DD as in sample and for convenience I'm saving both dates and data in different arrays.
var dates = chart.dates;
var data = chart.data;
Keeping above assumptions in mind, you can easily group data by months.
var groupByMonth = {};
dates.forEach(function (d, i) {
var v = data[i];
var monthYear = d.slice(0, 7);
if (groupByMonth.hasOwnProperty(monthYear)) {
groupByMonth[monthYear].push(v);
} else {
groupByMonth[monthYear] = [v];
}
});
console.log(groupByMonth)
However to group by week, you need to find week number. Here is a extension method to do that so:
Date.prototype.getWeekNumber = function(){
var d = new Date(+this);
d.setHours(0,0,0);
d.setDate(d.getDate()+4-(d.getDay()||7));
return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
};
Using above extension method you can easily group data by week number too. Week number repeats in each year so, I'm using combination of week and year to uniqly identify any week.
var groupByWeek = {};
dates.forEach(function (d, i) {
var v = data[i];
var weekYear = d.slice(0, 4) + '-' + new Date(d).getWeekNumber();
if (groupByWeek.hasOwnProperty(weekYear)) {
groupByWeek[weekYear].push(v);
} else {
groupByWeek[weekYear] = [v];
}
});
console.log(groupByWeek)
#Adnan Umer´s solution is probably better for your case since you already have the dates as strings, but here is a more general method in case you had the date instead of string:
function roundDate(date,type){
var d = new Date(date) // so as to not override
var types = ["day","week","month"]
var idx = types.indexOf(type)
if(idx > -1){ // remove all less than day
d.setMilliseconds(0)
d.setSeconds(0)
d.setMinutes(0)
d.setHours(0)
if(idx > 0){ //remove day of the week
d.setDate(d.getDate() - d.getDay()) // make it a sunday
if(idx > 1){ //remove day of month
d.setDate(1)
}
}
}
return d;
}
function parseDate(str){ // in your case, we need to keep the date disregarding the locale offset
return new Date(new Date(str).getTime() + new Date().getTimezoneOffset()*60*1000)
}
var lastDate = null
var grouping = "month"
var datesGrouped = []
var dataGrouped = []
function addToLast(arr,val){return arr[arr.length-1]+=val}
//I am assumming your dates are already sorted
chart.dates.map(function(date,index){
data = chart.data[index] // get corresponding data point
var group = roundDate(parseDate(date),grouping).getTime()
if(group == lastDate){
addToLast(dataGrouped, data)
}else{
datesGrouped.push(group)
dataGrouped.push(data)
lastDate = group
}
})
console.log(datesGrouped, dataGrouped)
!SOLVED!
I want to automatically create charts with users and their time spent on pages of a website.
I have a file - "log.xml" where I keep information with users (customers), visited pages, dates and their time spent; and after I "get" this Xml file with Ajax, I want to parse it and create with values "extracted" charts with JqPlot.
My problem is that I can't loop through more than just one customer and it don't build chart for the single customer.
If I remove the code block with initialization of variable plot I can loop through all my customers from Xml.
Please, if someone can tell me what is wrong, and how to create charts for all customers...
Here is the code of the file "log.xml":
<?xml version="1.0"?>
<log>
<customer id="14" name="Florin Virdol">
<page name="/mobilestore/index.php">
<date_ts on="2011-12-02" timeSpent="205"/>
</page>
<page name="/mobilestore/products_all.php">
<date_ts on="2011-12-02" timeSpent="15"/>
</page>
</customer>
<customer id="0" name="guest">
<page name="/mobilestore/services.php">
<date_ts on="2011-12-02" timeSpent="50"/>
</page>
</customer>
</log>
Here is the javascript code of the "operations":
$(document).ready(function()
{
//read from xml
$.ajax({
type: "GET",
url: "log.xml",
dataType: "xml",
success: parseXml
});
});//ready
//parse xml
function parseXml(xml) {
var i = 0;
$(xml).find("customer").each(function() {
$('<div class = "jqplot graph" id = "chart' + i + '"></div>').appendTo('#content');
var customerName = $(this).attr("name");
var line_inside = []; // declare as array
$(this).find("page").each(function() {
var pageName = $(this).attr("name");
$(this).find("date_ts").each(function() {
var timeSpent_ = $(this).attr("timeSpent");//if mai multe timespent, sa faca totalul, else singuru; timespent
line_inside.push([pageName,timeSpent_]); //do not string cat, push onto array
});
});
var line = '[' + line_inside + ']';
//--------jqplot----!!! if i remove this block, will loop through customers------------
var plot = $.jqplot('chart' + i, [line_inside],
{
title: customerName,
series:[{renderer:$.jqplot.BarRenderer}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label: 'Web Page',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: { labelPosition:'middle', angle: -30 }
},
yaxis: {
autoscale:true,
label: 'Total Time Spent',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: { labelPosition:'middle', angle: -30 }
}
}
});
//-------jqplot----!!! if i remove this block, will loop through customers------------
i++;
});//find customer
}//parse xml
SOLUTION: made modifications that Mark suggested, and it works.
(now, above code works!)
You are passing strings that look like arrays and not actual arrays to jqplot.
Try:
var line_inside = []; // declare as array
$(this).find("page").each(function() {
var pageName = $(this).attr("name");
$(this).find("date_ts").each(function() {
var timeSpent_ = $(this).attr("timeSpent");//if mai multe timespent, sa faca totalul, else singuru; timespent
line_inside.push([pageName,timeSpent_]); //do not string cat, push onto array
});
});
alert(line_inside); // this is an array of arrays
var plot = $.jqplot('chart' + i, [line_inside],
Since you want a different plot for each customer, you need to make plot a local var to your inline function: "var plot" not just "plot" -- same goes for "line". You are assigning a global scope variable and overwriting it each time, currently.
Javascript code -
$.jqplot.config.enablePlugins = true;
var defaultHighlighter = {tooltipAxes: 'y',showTooltip: true,tooltipLocation: 'n',tooltipOffset: 10,yvalues:1,formatString:'%.0f user'};
var globalTicks = [[-1,' '],[0,'12 am'],[1,'1 am'],[2,'2 am'],[3,'3 am'],[4,'4 am'],[5,'5 am'],[6,'6 am'],[7,'7 am'],[8,'8 am'],[9,'9 am'],[10,'10 am'],[11,'11 am'],[12,'12 pm'],[13,'1 pm'],[14,'2 pm'],[15,'3 pm'],[16,'4 pm'],[17,'5 pm'],[18,'6 pm'],[19,'7 pm'],[20,'8 pm'],[21,'9 pm'],[22,'10 pm'],[23,'11 pm'],[24,[' ']]];
var fullGraphOptions = {seriesDefaults: {pointLabels:{show:false},showMarker:true,markerOptions:{style: 'filledCircle'}},axes:{xaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},tickOptions:{angle:-45},ticks:globalTicks},yaxis:{min:0,tickOptions:{formatString:'%.0f'}}},highlighter:defaultHighlighter};
fullanalysis1 = $.jqplot('hourlyGraph-1', [[[63,63],[68,68],[87,87],[108,108],[135,135],[138,138],[147,147],[167,167],[130,130],[145,145],[144,144],[127,127],[134,134],[132,132],[147,147],[158,158],[157,157],[166,166],[170,170],[124,124],[107,107],[77,77],[62,62],[88,88]]], fullGraphOptions);
fullanalysis2 = $.jqplot('hourlyGraph-2', [[[63,63],[68,68],[87,87],[108,108],[135,135],[138,138],[147,147],[167,167],[130,130],[145,145],[144,144],[127,127],[134,134],[132,132],[147,147],[158,158],[157,157],[166,166],[170,170],[124,124],[107,107],[77,77],[62,62],[88,88]]], fullGraphOptions);
fullanalysis3 = $.jqplot('hourlyGraph-3', [[[63,63],[68,68],[87,87],[108,108],[135,135],[138,138],[147,147],[167,167],[130,130],[145,145],[144,144],[127,127],[134,134],[132,132],[147,147],[158,158],[157,157],[166,166],[170,170],[124,124],[107,107],[77,77],[62,62],[88,88]]], fullGraphOptions);
fullanalysis4 = $.jqplot('hourlyGraph-4', [[[63,63],[68,68],[87,87],[108,108],[135,135],[138,138],[147,147],[167,167],[130,130],[145,145],[144,144],[127,127],[134,134],[132,132],[147,147],[158,158],[157,157],[166,166],[170,170],[124,124],[107,107],[77,77],[62,62],[88,88]]], fullGraphOptions);
All the four graphs have the same result -
No plotting is done at all.
The data I have in the code is just a sample.
What could be the problem? The screenshot's of Firefox running on
Fedora 14.
Thank you,all.
Edit: I don't get any error in the Firebug console.
You seems to have got your data formatted the wrong way. You are trying to graph a single series with an array. Instead of giving data as [63,63],[68,68],[87,87 ...], It should be [63,68,87 ...]. Here is the right way to do get the chart running:
var data = [63, 68, 87, 108,135,138,147,167,130];
var globalTicks = ['12 am','1 am','2 am','3 am','4 am','5 am','6 am','7 am','8 am'];
var fullGraphOptions = {
seriesDefaults: {
pointLabels:{
show:true
},
showMarker:true,
markerOptions:{
style: 'filledCircle'
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
tickOptions:{
angle:-45
},
ticks:globalTicks
},
yaxis:{
min:0,
tickOptions:{
formatString:'%.0f'
}
}
},
highlighter:defaultHighlighter
};
fullanalysis1 = $.jqplot('chartdiv', [data], fullGraphOptions);