Flot chart displaying data from data that aren't even in JSON - javascript

I have the following
<div id="chart"></div>
<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];
var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];
function doPlot(position) {
$.plot($("#chart"), [{
data: sessions,
label: "Sessions"
}, {
data: revenue,
label: "Revenue",
yaxis: 2
}], {
xaxes: [{
mode: 'time'
}],
yaxes: [{
min: 0
}, {
alignTicksWithAxis: position == "right" ? 1 : null,
position: position
}],
legend: {
position: 'sw'
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%s for %x was %y",
xDateFormat: "%y-%0m-%0d",
onHover: function (flotItem, $tooltipEl) {
}
}
});
}
doPlot("right");
Thhis displays figures for both sessions and users on dates that there isn't even data for. The last date that there is data for is Dec 27th. Yet, this line graph shows data for up until Jan 2nd.
Here is a working example here
Any ideas?

According to your last data entry in each array element time = 1420174800000, so:
var date = new Date(1420174800000);
// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());

I converted your data to dates:
date = new Date(sessions[i][0])
It contains dates between Dec 16 2014 and Jan 02 2015. You can see it in this fiddle.
When you fill your arrays, you should convert your dates to numbers simply with:
sessions[i] = [Number(date), value];
I'm not sure how you meant Date('D, M j'), I assume it's a string like "Date(month,day,year)". An example of converting this kinf of json to plottable data: in this other fiddle.
Actually, I reversed the day and month, but you get the idea. :)

Related

How to format the x-axis labels in ApexCharts

I have an API that returns data like this:
[
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 25937961.52,
"expr1": 1,
"expr2": 2020
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 4092447.85,
"expr1": 3,
"expr2": 2020
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 18509414.84,
"expr1": 6,
"expr2": 2019
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 13572118.12,
"expr1": 10,
"expr2": 2019
},
...
Where expr0 is an monetary value, expr1 is the month and expr2 is the year. I am using ApexCharts in React to display the results on my website, however I can't seem to format the data correctly. My component is shown below, however it currently only displays a single point. I'm not sure whether the data points need x/y keys to be displayed or if the dates need to be in the x-axis in options.
class SFAllTimeQuoteValue extends Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: "Opportunities",
data: []
}],
options: {
chart: {
id: "line"
},
xaxis: {
type: "date"
}
}
}
}
async componentDidMount() {
var res = await axios.get(api);
const value = res.data;
var data = [];
for(var i = 0; i < value.length; i++) {
var date = new Date(value[i].expr2, value[i].expr1 - 1);
data.push([date, value[i].expr0]);
}
this.setState({
series: [{
data: data
}]
})
}
render() {
return (
<div>
<Chart series={this.state.series} type ='line' options ={this.state.options}/>
</div>
)
}
}
I would preferably like the data points to display just the month and year as the label too, however using my current method I am getting full date time strings as the label.
You should set the xaxis type as datetime and also set the labels.format property
xaxis: {
type: 'datetime',
labels: {
format: 'MM yyyy'
}
}

Highcharts: create multiple series grouped my month and year using JSON data

I am trying to create a line, spline chart using JSON data. I want multiple series but I am confused on how to do that. Right now I am able to create the multiple series when the date is in 2019-07-06 format. I also have a JSON that has a column for the month and a column for the year Please help on how I can fix this. Right now I only have the code for group by day.
JSON Data:
[
{ "month": 6,
"year": 2019,
"starts": 21278998,
"completes": 9309458
},
{ "month": 7,
"year": 2019,
"starts": 38850115,
"completes": 17790105
}
]
I used the solution for the date format 2019-07-06 provided in this fiddle: https://jsfiddle.net/BlackLabel/tjLvh89b/
Please help with how I can create a chart for the Month, Year on the x-Axis.
You can achieve it simply by creating a Date object using different parameters.
Instead of the string date parameter new Date('2019-07-07') use year and month as separate parameters like that: new Date(2019, 7).
Code:
var json = [{
month: 6,
year: 2019,
starts: 21278998,
completes: 9309458
}, {
month: 7,
year: 2019,
starts: 38850115,
completes: 17790105
}];
var series1 = {
name: 'starts',
data: []
},
series2 = {
name: 'completes',
data: []
};
json.forEach(elem => {
series1.data.push({
x: +new Date(elem.year, elem.month),
y: elem.starts
});
series2.data.push({
x: +new Date(elem.year, elem.month),
y: elem.completes
});
});
Highcharts.chart('container', {
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime'
},
series: [
series1,
series2
]
});
Demo:
https://jsfiddle.net/BlackLabel/xtefuLsp/1/
Date object reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

I can read Name of the release, but not able to read can't read ReleaseDate from the release in rally

columnValue = columnValue.get('Name');
give me Name of the release
but not able to read ReleaseDate
columnvalue1 = columnValue.get('ReleaseEndDate');
this gives me error
Uncaught TypeError: undefined is not a function
This is my release object
columnValue value
j {phantom: false, internalId: "ext-record-2", raw: Object, data: Object, modified: Object…}
data: Object
CreationDate: null
GrossEstimateConversionRatio: ""
Name: "Release 24"
Notes: ""
ObjectID: 12788620953
PlannedVelocity: null
Project: ""
ReleaseDate: Wed Sep 17 2014 10:29:59 GMT+0530 (India Standard Time)
ReleaseStartDate: Wed Jul 23 2014 10:30:00 GMT+0530 (India Standard Time)
RevisionHistory: ""
Release object has ReleaseStartDate and ReleaseDate. There is no ReleaseEndDate in WS API.
Use ReleaseDate.
Try this example of a simple grid from the guide. Replace model: 'userstory' with model: 'release', and use config:
columnCfgs:[
'Name',
'ReleaseStartDate',
'ReleaseDate'
]
You should see ReleaseDate.
Then try custom data example from the grid that requires explicit fetching of ReleaseDate. Modify that example to display a grid of releases instead of a grid of user stories. You may do something like this to create a custom column Release Dates based on values of both ReleaseStartDate and ReleaseDate:
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'release',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['Name', 'ReleaseStartDate', 'ReleaseDate']
//fetch: ['Name', 'ReleaseStartDate']
});
},
_onDataLoaded: function(store, data) {
var records = _.map(data, function(record) {
console.log(record);
return Ext.apply({
ReleaseDates: record.get('ReleaseStartDate') + " -- " + record.get('ReleaseDate')
}, record.getData());
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
columnCfgs: [
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Release Dates',
dataIndex: 'ReleaseDates',
flex: 1
}
]
});
}
This should also display ReleaseDate as long as fetch includes ReleaseDate fetch: ['Name', 'ReleaseStartDate',ReleaseDate']
The problem is likely to be related to your code. Start with working examples as above and see if ReleaseDate is returned.

Problems with tickInterval in jqPlot

I'm new to jqplot but am using it on a very important project. I am trying to have the x-axis have one 'tick' for each day -- as of now, there are multiple ones. Here is a screenshot:
Here is the code (in which I also added a min and max as this post referred):
$(document).ready(function(){
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async: false,
url: url,
type: "GET",
dataType:"json",
data: {metricName: ""},
success: function(data) {
ret = data;
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.responseText);
}
});
return ret;
};
//var jsonurl = "reports/reportData.json";
var jsonurl = "tenant/metrics/get.json";
var today = new Date();
var plot2 = $.jqplot('chart2', jsonurl,{
title: "",
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {unusedOptionalUrl: jsonurl},
axes: {
xaxis: {
'numberTicks' : 7,
min: '2012-10-05',
max: today,
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickInterval: '1 day',
tickOptions:{formatString:'%Y-%#m-%#d'
}
//rendererOptions: {sdaTickInterval: [1, 'month']}
},
yaxis: {
label: "MB",
tickOptions:{formatString:'%d '},
// Comment the next line out to allow negative values (and therefore rounded ones)
min: 0
}
}
});
});
Even if I manually set the clicks like this:
$(document).ready(function(){
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async: false,
url: url,
type: "GET",
dataType:"json",
data: {metricName: ""},
success: function(data) {
ret = data;
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.responseText);
}
});
return ret;
};
//var jsonurl = "reports/reportData.json";
var jsonurl = "tenant/metrics/get.json";
var today = new Date();
var plot2 = $.jqplot('chart2', jsonurl,{
title: "",
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {unusedOptionalUrl: jsonurl},
axes: {
xaxis: {
'numberTicks' : 7,
min: '2012-10-05',
max: today,
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks: ['2012-10-05','2012-10-06','2012-10-07','2012-10-08', today],
tickOptions:{formatString:'%Y-%#m-%#d'
}
//rendererOptions: {sdaTickInterval: [1, 'month']}
},
yaxis: {
label: "MB",
tickOptions:{formatString:'%d '},
// Comment the next line out to allow negative values (and therefore rounded ones)
min: 0
}
}
});
});
The marks do not match up to their correct dates. Here is a screenshot:
Is there a sane way to do this? I want each x-axis tick to be only one date, and the data entry mark to be on that tick's axis.
This is driving me crazy! Please help!
Also, here is my json
[[["2012-10-05 10:57:16AM", 0],["2012-10-05 11:02:14AM", 2449],["2012-10-08 08:17:47AM", 9639],["2012-10-08 08:17:53AM", 224768],["2012-10-09 07:43:19AM", 9640],["2012-10-09 07:44:01AM", 224769]]]
Your format string isn't correct as it doesn't include the timestamp; try changing it to the following:
tickOptions:{formatString:'%y-%#m-%#d%n%#I:%#M:%#S%p}
Alternatively, if you don't need the timestamp, leave your format string as is and remove the timestamp from the JSON.
EDIT
If the above format string doesn't work, try manipulating the values to match using the values as below:
// Year
%Y 2008
%y 08
// Month
%m 09
%#m 9
%B September
%b Sep
// Day
%d 05
%#d 5
%e 5
%A Sunday
%a Sun
%w 0, 0 = Sunday, 6 = Saturday
%o th, The ordinal suffix string following the day of the month
// Hour
%H 23
%#H 3
%I 11
%#I 3
%p PM, AM or PM
// Minute
%M 09
%#M 9
// Second
%S 02
%#S 2
%s 1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00
// Millisecond
%N 008
%#N 8
I hope this helps!

ExtJS Forms > .getFieldValues() function doesn't return any value for "timefield" xtype

I am using ExtJS Forms.
My form code is as follows:
Ext.create('Ext.form.Panel', {
width: 600,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: "Specimen",
name: "Specimen"
}, {
.
.
.
}, {
fieldLabel: "Time Stamp",
name: "timestamp",
xtype: "timefield",
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
var fieldValuePair = form.getFieldValues();
}
}],
renderTo: "ui"
});
For some special purpose, I want to get the id/value pairs in json format, which I have acheived using the .getFieldValues() function.
The problem is, when I press the "Save" button, the "fieldValuePair" variable in the handler function correctly gets all the values in json format except for the fields that have the "timefield" or "datefield" xtypes.
I have searched the web, but didn't come across any solution.
Any idea what may be the problem...?
Try with:
handler: function () {
var form = this.up('form').getForm();
var formValues = form.getValues(); // instead getFieldValues
console.log(formValues);
}
this way it returns:
date "12:30 AM"
and not:
date
Date {Tue Jan 01 2008 00:15:00 GMT+0100 (Central European Standard Time)} // this being another object
cheers!

Categories