Reuse month columns in SwiftUI Chart - swiftui

I have a chart which displays data over time (months in my case). The data for this chart is randomly generated by getting any date from now to 500 days in the past (chartDate), and a random number (sales). It generates 500 of these rows.
func dailySales2() -> [(chartDate: Date, year: String, sales: Int)] {
var temp: [(chartDate: Date, year: String, sales: Int)] = []
for _ in 1...500 {
let dateT = Calendar.current.date(byAdding: .day, value: -Int.random(in: 1...500), to: Date())!
temp.append((chartDate: dateT, year: dateT.formatted(.dateTime.year()), sales: Int.random(in: 100...500)))
}
return temp.sorted(by: { $0.chartDate < $1.chartDate })
}
Chart {
ForEach(dailySales2(), id: \.chartDate) { chartD in
BarMark(
x: .value("Day", chartD.chartDate, unit: .month),
y: .value("Sales", chartD.sales)
)
.foregroundStyle(by: .value("Year:", chartD.year))
}
}
.chartXAxis {
AxisMarks(values: .stride(by: .month)) {
AxisValueLabel(format: .dateTime.month(.narrow), centered: true)
}
}
This generates A S O N D J F M A M J J A S O N D columns (August 2021 - December 2021 and then January 2022 - December 2022). How do I go about only having one set of January - December columns and putting both years into these columns (separated by series)? Thanks.
Having 12 columns, one for each month, which any year uses.

Related

Sum time based chart data

I have a chart which displays data over time (months in my case). The data for this chart is randomly generated by getting any date from now to 500 days in the past (chartDate), and a random number (sales). It generates 500 of these rows.
func dailySales2() -> [(chartDate: Date, year: String, sales: Int)] {
var temp: [(chartDate: Date, year: String, sales: Int)] = []
for _ in 1...500 {
let dateT = Calendar.current.date(byAdding: .day, value: -Int.random(in: 1...500), to: Date())!
temp.append((chartDate: dateT, year: dateT.formatted(.dateTime.year()), sales: Int.random(in: 100...500)))
}
return temp.sorted(by: { $0.chartDate < $1.chartDate })
}
Chart {
ForEach(dailySales2(), id: \.chartDate) { chartD in
BarMark(
x: .value("Day", chartD.chartDate, unit: .month),
y: .value("Sales", chartD.sales)
)
.foregroundStyle(by: .value("Year:", chartD.year))
}
}
The above takes all the rows for each month and totals them, so each bar is a sum of all the sales for each month. If I change this to a LineMark, it displays each row individually, how can I stop this and instead sum all the individual rows into one point for each month? Thanks.
I'm expecting each month column to display a single point which sums all the rows that contains data for that month.

I got the from date and to date from the user. I want to return the Sold Product's price and its count in the basis of Daily sold order. how?

models.Order.objects.filter(purchasedate__range=[from_date, to_date])
today_total = 0
quant = 0
for values in daterangeorder:
today_total += values.price
quant += values.quantity
return response.Response({
"from_date": from_date,
"to_date": to_date,
"Amount Sold": str(today_total),
"Count": str(quant)
})
This is the output:
{
"from_date": "2021-11-19",
"to_date": "2021-11-23",
"Amount Sold": "27000",
"Count": "9"
}
I want like this (day by day sold products count):-
{
date: “'2021-10-20”,
count: 20,
total_price_sold: 5000.00
},
{
date: “'2021-10-21”,
count: 4,
total_price_sold: 300.00
}
Instead of solving your problem with Python code, you can let the database handle it for you using aggregation, see the docs: https://docs.djangoproject.com/en/3.2/topics/db/aggregation/#values
from django.db.models import Sum
result = models.Order.objects.values('purchasedate')
.order_by('purchasedate')
.annotate(total_price_sold=Sum('price'), count=Sum('quantity'))
return response.Response(result)

Flutter Filter List base on Month

How I can categorise list based on Month
let say I have example list like below :
Record(
id: '01',
nameFood: 'ravioli',
date : 2021/may/14,
price: 20
),
Record(
id: '02',
nameFood: 'cheese garlic',
date : 2021/june/02,
price: 30,
),
Record(
id: '03',
nameFood: 'steak',
date : 2021/march/21
price 25,
),
I want to Categorize it to like this
June(
nameFood: steak,
total price: 240,
),
and etc
the problem is I dnt know how to filter each List(month) because each month have different length of days like 30,31 and 28
If you store your dates as a DateTime, you can try using the month number. I'm going on a limb here, assuming you have a List of objects of type Record, where Record is.
class Record {
Record(
this.id,
this.price,
this.date,
this.nameFood,
);
final String id;
final double price;
final DateTime date;
final String nameFood;
}
You can loop through your list and do whatever it is you want to do with it, like so.
for (final record in _listOfRecords) {
final _monthOfRecord = record.date.month; // Gives the month number. January = 1, April = 4, etc.
// Do other stuff, based on the current monthNumber
switch (_monthOfRecord) {
case 1:
// Do something
break;
....
default:
break;
}
}

Type Mismatch error when altering a google.visualization.DataTable() column value even after explicitly changing its data type

I have a datatable that's being returned by google.visualization.data.group()
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
I want to set several columns to be of type string with a tooltip role, and converting values in them to an html string
for (var col=2; col < aggData.getNumberOfColumns(); col = col + 2){
aggData.setColumnProperties(col,{'type':'string', 'role':'tooltip', 'p':{'html':true}});
//looking to see if the column type was actually changed
console.log('Column '+col+' type: ' + aggData.getColumnProperty(col, 'type'))
for (var row = 0; row < aggData.getNumberOfRows(); row = row + 1){
aggData.setValue(row, col, getHTML(aggData.getValue(row, col)))
}
}
function getHTML(count) {;
return 'Projects Completed: <b>' + count + '</b>';
}
I checked the column data type in the log and it does return a string but when i set the value to a string it throws a type mismatch error.
Column 2 type: string
Uncaught Error: Type mismatch. Value Projects Completed: <b>2</b> does not match type number in column index 2
I also tried setting the column type using setColumnProperty() method but it's the same result. What am I missing?
================================================================================================
Below is a snippet of the larger script if needed
Sample input data looks like
"Oct 1, 2019, 12:00:00 AM",Team C,68
"Sep 23, 2019, 12:00:00 AM",Team C,68
"Nov 29, 2019, 12:00:00 AM",Team C,87
"Dec 31, 2019, 12:00:00 AM",Team C,62
....................................
"Nov 21, 2018, 12:00:00 AM",Team A,79
"Dec 29, 2018, 12:00:00 AM",Team A,58
"Nov 15, 2018, 12:00:00 AM",Team B,96
"Dec 29, 2018, 12:00:00 AM",Team B,77
The data is being read into a data table
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Year');
data.addColumn('string', 'Team');
data.addColumn('number', 'Total Score');
var groupData = google.visualization.data.group(
data,
[
{
column: 0,
modifier: getYear,
type: 'number'
},
1
],
[
{
column: 2,
aggregation: google.visualization.data.sum,
type: 'number'
},
{
column: 2,
aggregation: google.visualization.data.count,
type: 'number',
role: 'tooltip'
}
]
);
// create data view from groupData
var view = new google.visualization.DataView(groupData);
// sum column array
var aggColumns = [];
// use year (column 0) as first view column
var viewColumns = [0];
// build calculated view & agg columns for each team
groupData.getDistinctValues(1).forEach(function (team, index) {
// add a column to the view for each team
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === team) {
return dt.getValue(row, 2);
}
return null;
},
label: team,
type: 'number'
});
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === team) {
return dt.getValue(row, 3);
}
return null;
},
label: 'Number of Projects',
type: 'number'
});
// add sum column for each team
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index*2 + 1,
label: team,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index*2 + 2,
type: 'number',
role: 'tooltip',
});
});
// set view columns
view.setColumns(viewColumns);
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
/*
The aggData looks like
"2,018",137,2,173,2,0,0
"2,019",864,12,"1,028",12,610,12
*/
for (var col=2; col < aggData.getNumberOfColumns(); col = col + 2){
aggData.setColumnProperties(col,{'type':'string', 'role':'tooltip', 'p':{'html':true}});
console.log('Column '+col+' type: ' + aggData.getColumnProperty(col, 'type'))
for (var row = 0; row < aggData.getNumberOfRows(); row = row + 1){
aggData.setValue(row, col, getHTML(aggData.getValue(row, col)))
}
}
data table method setColumnProperties isn't doing what you expect.
it only sets the properties portion of the column --> 'p':{'html':true}
so after your code runs, you end up with the following in your column properties.
'p': {'type':'string', 'role':'tooltip', 'p':{'html':true}}
and in fact, it is not possible to change a column's type,
once it has been created.
instead, you'll need to either use the addColumn or insertColumn method.
another option would be to use a data view.
then you could use a calculated column for the tooltip,
and exclude the original column you are trying to change,
using the setColumns method on the data view.

February is missing from Qt charts (QML) datetime axis

I have created a QML chart
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
}
DateTimeAxis {
id: xTime
}
SplineSeries {
id: chartseries
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
}
}
I am also appending at the beginning of each month to the chart. Tooltip on tick points are correct. On X axis Qt itself is doing the same as it like . How to adjust it manually
Xaxis->setTickCount(commonmap.size());
QMap<qint64,double>::const_iterator i = commonmap.constBegin();
while (i != commonmap.constEnd())
{
splineseries->append(i.key(),i.value());
++i;
}
I see that you are setting the tickCount of DateTimeAxis to the number of samples in the series, so what Qt does is divide subtract the maximum and minimum of the times and divide them, that calculation comes out about 31 days, to see it we can modify the form of DateTimeAxis to "MMM yyyy dd hh:mm:ss":
So the dates that are shown are not of the months but of times equally spaced, and having February only 28 days will not show that date.
If you want to show February you would have to place a larger value on tickCount but it will also generate more dates. Unfortunately, it is currently not possible to place the ticks in an irregular manner, such as the number of days of the months.
I have found an answer to this problem (may not be the right way...But can be solved)
Step to achieve the solution -
Find Last date of the last month (say June 30)
setMax date of QDateTimeAxis.
It works Because Qt divides the days between Start date and end date equally and distribute across X axis based ob the tick count .
With the values above in the question will get a chart as shown in the Image
[
Xaxis->setMin(QDateTime::fromMSecsSinceEpoch(commonmap.firstKey()));
Xaxis->setMax(getLastDate());
getLastDate()
{
QDate firstdate =
QDateTime::fromMSecsSinceEpoch(commonmap.lastKey()).date();
int month = firstdate.month();
int day = firstdate.day();
int addday = 0;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
addday = 31- day;
break;
case 4:
case 6:
case 9:
case 11:
addday = 30- day;
break;
case 2:
if(firstdate.isLeapYear(firstdate.year()))
{
addday = 29- day;
}
else
{
addday = 28- day;
}
break;
}
return (QDateTime::fromMSecsSinceEpoch(commonmap.lastKey()).addDays(addday));
}
As explained by #eyllanesc in his answer, it is not possible to use DateTimeAxis to obtain what you want to display.
Here is some code that could help to generate something close with the use of CategoryAxis.
Note: The data is created and formatted in QML in my example, but you could do that in the C++ part where the data could actually be.
import QtQuick 2.9
import QtCharts 2.2
Item {
id: root
width: 1280
height: 720
ListModel {
id: data
function toMsecsSinceEpoch(date) {
var msecs = date.getTime();
return msecs;
}
Component.onCompleted: {
var minDate = data.get(0).x;
var maxDate = data.get(0).x;
var minValue = data.get(0).y;
var maxValue = data.get(0).y;
// Find the minimum and maximum values.
// Fill the SplineSeries data.
for (var i = 0 ; i < data.count ; i++) {
if (data.get(i).x < minDate)
minDate = data.get(i).x;
if (data.get(i).x > maxDate)
maxDate = data.get(i).x;
if (data.get(i).y < minValue)
minValue = data.get(i).y;
if (data.get(i).y > maxValue)
maxValue = data.get(i).y;
chartseries.append(data.get(i).x, data.get(i).y);
}
// Fill the axis limits (x-axis and y-axis).
axisY.min = Math.floor(minValue)
axisY.max = Math.ceil(maxValue)
xTime.min = minDate;
xTime.max = maxDate;
// Fill the CategoryAxis (x-axis).
var dateReference = new Date(xTime.min);
while (dateReference < xTime.max) {
xTime.append(Qt.formatDate(dateReference, "MMM yyyy"), toMsecsSinceEpoch(new Date(dateReference.getFullYear(), dateReference.getMonth(), 1)));
dateReference.setMonth(dateReference.getMonth() + 1);
}
xTime.append(Qt.formatDate(dateReference, "MMM yyyy"), toMsecsSinceEpoch(new Date(dateReference.getFullYear(), dateReference.getMonth(), 1)));
}
ListElement { x: 1514770200000; y: 40.311 }
ListElement { x: 1517434200000; y: 40.4664 }
ListElement { x: 1519853400000; y: 39.6276 }
ListElement { x: 1522531803000; y: 39.6238 }
ListElement { x: 1525123806000; y: 40.3 }
ListElement { x: 1527802210000; y: 40.5638 }
}
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
min: 39
max: 41
}
CategoryAxis {
id: xTime
labelsPosition: CategoryAxis.AxisLabelsPositionOnValue
}
SplineSeries {
id: chartseries
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
}
}
}