i need help please with this code :
dump missing date in data for chartjs
my table for example with values:
bonus date
5 : 18-04-2020
10 : 19-04-2020
0 : 20-04-2020
0 : 21-04-2020
55 : 22-04-2020
44 : 23-04-2020
30 : 24-04-2020
i get last 7 days date in database, chartjs display all dates, but i want in chart not to display 30 : 24-04-2020 last date but i want to display 0: 25-04-2020 if not exists in database because user not have any bonus yet today.. i think need to add 1 day in last date in chartjs ? or in database query ?
my code :
var graphData = [55, 10, 0, 0, 55, 44, 30],
labels = ["18-04-2020", "19-04-2020", "20-04-2020", "21-04-2020", "22-04-2020", "23-04-2020", "24-04-2020"];
for (var i = 0; i < labels.length; i++) {
//make sure we are not checking the last date in the labels array
if (i + 1 < labels.length) {
var date1 = moment(labels[i], "DD-MM-YYYY");
var date2 = moment(labels[i + 1], "DD-MM-YYYY");
//if the current date +1 is not the same as it's next neighbor we have to add in a new one
if (!date1.add(1, "days").isSame(date2)) {
//add the label
labels.splice(i + 1, 0, date1.format("DD-MM-YYYY"));
//add the data
graphData.splice(i + 1, 0, 0);
}
}
}
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels:labels,
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: graphData
}]
};
var myLineChart = new Chart(ctx).Line(data);
Related
I am having an issue merging cells that are in an existing sheet in a workbook. My attempt to use mergedCells after the sheet is created has presented a roadblock, I can't seem to get the range name in string format as documented for the mergedCells option in Workbook.sheet:
mergedCells: ["A6:A8"]
All I have are indexes of the cells.
I have the logic to determine which cells' indexes I want to merge, but only the indexes. I can't figure out a way to get the range in an Excel cell name/string like "A1". In the following example, ignoring how I got the index values, I can't merge the cells based on index where indexA is the column and indexB1 and indexB2 are rows.
let indexA = 0;
let indexB1 = 5;
let indexB2 = 7;
sheet.mergedCells = [[{indexA, indexB1},{indexA,indexB2}]]
I have attached a picture of the types of cells I want to merge that are in my workbook, my loop first hits A6 through A8 and determines the indexes are to be merged because all the cells' values equal "Boat". Any help is appreciated, and I will try to provide more detail if needed, but it is difficult to provide much more because of the nature of the system I am on.
Thanks in advance.format of workbook
So you have the R1C1 notation of the cells you need to merge? If so, following the suggestion in this thread you can generate the range in A1 notation - example:
function columnName(index) {
var cname = String.fromCharCode(65 + ((index - 1) % 26));
if (index > 26)
cname = String.fromCharCode(64 + (index - 1) / 26) + cname;
return cname;
}
var r1 = 2;
var c1 = 3;
var r2 = 4;
var c2 = 5;
var rangeAsString = `${columnName(c1)}${r1}:${columnName(c2)}${r2}`;
var workbook = new kendo.ooxml.Workbook({
sheets: [{
mergedCells: [rangeAsString],
rows: [
{ cells: [ { value: "Document Title" } ] },
{ cells: [ { value: 22 }, { value: 33 }, { value: 44 }, {value: 55} ] }
]
}]
});
kendo.saveAs({
dataURI: workbook.toDataURL(),
fileName: "Test.xlsx"
});
I am using amcharts line chart.
I have data for last 24 hours and its recorded for every seconds.
I am trying to group data in amcharts but it displays only 2 data points on chart.
1 data point is from yesterday and 1 from today.
Here is my code:
var multiLineChart = am4core.create(
"multilineChartdiv",
am4charts.XYChart
);
multiLineChart.paddingRight = 20;
multiLineChart.data = historicalData;
var dateAxis1 = multiLineChart.xAxes.push(new am4charts.DateAxis());
dateAxis1.renderer.grid.template.location = 0;
dateAxis1.minZoomCount = 1;
dateAxis1.renderer.minGridDistance = 60;
// dateAxis1.baseInterval = {
// timeUnit: "minute",
// count: 5,
// };
// this makes the data to be grouped
dateAxis1.groupData = true;
dateAxis1.groupCount = 500;
var valueAxis = multiLineChart.yAxes.push(new am4charts.ValueAxis());
var series1 = multiLineChart.series.push(new am4charts.LineSeries());
series1.dataFields.dateX = "date";
series1.dataFields.valueY = "heartRate";
series1.tooltipText = "{valueY}";
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.background.fillOpacity = 0.5;
multiLineChart.cursor = new am4charts.XYCursor();
multiLineChart.cursor.xAxis = dateAxis1;
var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
multiLineChart.scrollbarX = scrollbarX;
I need to show data points for at least every 5 or 10 minutes.
If your timestamp is a string, make sure the inputDateFormat is set to match your date format as documented here as the default format is yyyy-MM-dd, truncating everything else to look like daily data, similar to your screenshot:
chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd HH:mm:ss' //adjust as needed
Since your data is in seconds, it is also recommended to set the baseInterval accordingly to also ensure that your data is rendered correctly.
dateAxis1.baseInterval = {
timeUnit: "second",
count: 1,
};
I have a line graph drawing using data created like so:
for (var i = 1; i < 366; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date(2018, 0, i), value: visits });
}
The rest of the options set look like:
__this._chart.data = data;
var dateAxis = __this._chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.axisFills.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = true;
var valueAxis = __this._chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.ticks.template.disabled = true;
var series = __this._chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
This draws a random line for the whole year and it works.
We dont want to show every day, we want to show monthly data. So I have data that when processed shows up in the form:
{
category: Mon Oct 31 2016 20:00:00 GMT-0400 (Eastern Daylight Time)
column-1: 50
}
Theres only 9 of them and they cover up to January 2019, so there would be huge gaps between the data points. the object name of category is different to date but I set the series' dateX = "category".
So my question is, can the line graph be used to do monthly data where there could be gaps in the data?
If so, how do I get it to work? I use the rest of the options the exact same as the test that is working, except for hte changed values of series' dateX and valueY.
I am working on a Dashing project using Sinatra, and I am displaying Graphs on the dashboard. I've been having a lot of trouble with displaying Timestamps on the X-Axis, Now that I have this working, I have another problem. On my graph, the x-axis keeps repeating the timestamp over and over again. What I mean by this is that it does not show any of the previous timestamps it just repeats the current timestamp over and over again, this is not what I want. Below is my code for the graph:
class Dashing.Graph extends Dashing.Widget
#accessor 'points', Dashing.AnimatedValue
#accessor 'current', ->
return #get('displayedValue') if #get('displayedValue')
points = #get('points')
if points
points[points.length - 1].y
#ready is triggered when ever the page is loaded.
ready: ->
container = $(#node).parent()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
#graph = new Rickshaw.Graph(
element: #node
width: width
height: height
renderer: #get("graphtype")
series: [
{
color: "#fff",
data: [{x:0, y:0}]
}
]
)
#graph.series[0].data = #get('points') if #get('points')
format = (d) ->
months = new Array(12)
months[0] = "Jan"
months[1] = "Feb"
months[2] = "Mar"
months[3] = "Apr"
months[4] = "May"
months[5] = "Jun"
months[6] = "Jul"
months[7] = "Aug"
months[8] = "Sep"
months[9] = "Oct"
months[10] = "Nov"
months[11] = "Dec"
today = new Date()
month = today.getMonth()
day = today.getDate()
h = today.getHours()
m = today.getMinutes()
if(m <= 9)
d = months[month] + " " + day + " " + h + ":" + 0 + m
else
d = months[month] + " " + day + " " + h + ":" + m
x_axis = new Rickshaw.Graph.Axis.X(graph: #graph,pixelsPerTick: 100, tickFormat: format )
y_axis = new Rickshaw.Graph.Axis.Y(graph: #graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
#graph.render()
#onData is responsible for handling data sent from the jobs folder,
#any send_event methods will trigger this function
onData: (data) ->
if #graph
#graph.series[0].data = data.points
#graph.render()
node = $(#node)
value = parseInt data.points[data.points.length - 1].y
cool = parseInt node.data "cool"
warm = parseInt node.data "warm"
level = switch
when value <= cool then 0
when value >= warm then 4
else
bucketSize = (warm - cool) / 3 # Total # of colours in middle
Math.ceil (value - cool) / bucketSize
backgroundClass = "hotness#{level}"
lastClass = #get "lastClass"
node.toggleClass "#{lastClass} #{backgroundClass}"
#set "lastClass", backgroundClass
Can anyone help me understand why my graph does not want to show any previous values of X?
I think your issue is the call to today = new Date() in function format. The formatter is getting a date passed in by Rickshaw/D3, the date just needs to be formatted according to your needs. By calling today = new Date(), you are ignoring the passed in date and instead providing your own/new date.
Side note: you can take a look at D3's date/time formatting or moment.js for simpler date/time formatting, so your format function could shrink to 1 or 2 lines of code.
currently i using multiple datepicker (http://keith-wood.name/datepick.html). I need to pass dates from MySQL table with PHP (reservations) to calendar and change CSS style for show state.
occupied - red
pending - yellow
free - grey
preview on another site: http://www.chata-vysocina.eu/en/rezervace/
Anyone have some tips how to do that?
Thank you,
Tomas
Ok, i resolved my problem with following lines.
<script>
var dates = [
[2013, 12, 24],
[2013, 12, 25]
];
var today = new Date();
$('#reserve').multiDatesPicker({
firstDay: 1,
numberOfMonths: 4,
dateFormat: "dd-mm-yy",
altField: '#dates',
minDate: 0,
beforeShowDay: function (date){
var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
// see if the current date should be highlighted
for (var i=0; i < dates.length; ++i)
if (year == dates[i][0] && month == dates[i][1] - 1 && day == dates[i][2])
return [false, 'booked'];
return [false];
}
});
</script>