I do not know angular js & i am using angular gantt chart from here https://github.com/angular-gantt/angular-gantt & this chart shows dates but not days(Su, Mo,Tu.. etc). Changing the scale is not helping. So what can i do to show days in angular gantt chart.
If i need to make changes in the code please let me know.
Thanks in advance.
This is very similar to this post if not the same.
However, to summarize what was stated there and what I have found by experience, you want to use the headers-formats attribute in combination with the headers attribute on the gantt directive.
var options = {
headers: ['month', 'day'],
headersFormats: {
month: 'MMM',
day: 'dd'
}
}
That should do what you want it to do. The scale just changes the increments of the columns ('days', 'weeks', 'months', etc...).
For more information, see the documentation for angular-gantt and more specifically the documentation for the headers-formats attribute.
Related
I have an app that is generating some bart charts from a service. My client added an additional chart to display a range (min, max and average). I was wondering if their is a way to accomplish this using chart.js. I looked through their docs and wasn't able to find any examples or documentation on how to accomplish this. Anyone else run into this or have a different library they prefer?
You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:
datasets: [
{
data: [
[10,12],
[20,25],
[15,25],
[25,28],
...
Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html
I completely failed to get this working for bar charts (works for line, scatter, radar). Then I found new chartjs 2.9 feature here Min Max bar values
Using this on bar and horizontalBar successfully.
First, I want to apologise for any mistakes in asking the question properly according to the site rules, it's my first time doing it and I tried my best.
So I have the following issue:
Let's say I have that data (consider it - date / value):
I then init a chart with it, the only relevant option to that moment is:
xaxis: { mode: "time" }
and I get the following result:
("Дек" == December)
Now my problem is that there are mid-day hours in the legend which I don't want. I want only days in it. I tried adding this to the xasis:
tickSize: [1, "day"]
but it creates a legend entry for each day of the whole timespan (01.12, 02.12, 03.12 and so on to 06.12) and I want only the days for which I have some data present.
After a while spent in searching in documentation and google I found that there is actually another property for this:
minTickSize: [1, "day"]
That does the trick.
Having trouble with Highcharts heat map; trying to somewhat imitate the example large-heatmap with my own data in a slightly different format yet can't manage to get it to draw properly.
Image snip of the problem
Demo here:
https://jsfiddle.net/17jsrxfk/1/
yAxis: {
type: 'datetime',
labels: {
format: '{value:%H:%M}'
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
As can be seen, the tooltip manages to find and respond to the correct data at that point, and even changes colour; along with the colour axis at the bottom responding correctly.
[1456444800000, 2700600000, 54.18855218855219], etc
The data is in milliseconds, the first value being the date of record (d,m,y) and the second value being a date (m,h,d,m,y) with a dummy Day Month Year of 0,0,1970; the third value being the actual reading.
I'm not sure if this is a problem with Highcharts somewhere, or if I've made a rookie mistake as i am fairly new to Highcharts.
I haven't been able to find any reproductions of this problem elsewhere, and have spent a good few hours trying to find a solution.
Hints and Tips appreciated too!
Thanks
It looks like the problem is connected with the plugin you are loading on the beginning, without this plugin everything works fine, if you will set colsize and rowsize of your columns: jsfiddle.net/17jsrxfk/2 – Grzegorz Blachliński
Thanks to this guy for solving my problem!
I am currently using Flotcharts plugin on my website.
I want to use one of the charts. However, I am unsure how the information is being plotted in order to change the information.
Can someone please advise me on how the following coding works / broken up:
d1 = [
[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 1129],
[1272672000000, 1163], [1275350400000, 1905], [1277942400000, 2002], [1280620800000, 2917],
[1283299200000, 2700], [1285891200000, 2700], [1288569600000, 2100], [1291161600000, 1700]
]
Thank you in advance! :)
Not a lot of context in your question, so it's hard to offer much information in an answer, but your array d1 consists of a set of data points. Each data point has an x-value and a y-value. It looks the x-value is a date/time value and the y-value is a number. (The large numbers such as 1262304000000 look like native JavaScript date/time values; 1262304000000, for example, is midnight on January 1, 2010.) Other than that, there's not much else we can offer unless you want to add more context.
Sample Data:
[
{ 'date': new Date(2014,03,12,0).getTime(), 'value': 1 },
{ 'date': new Date(2014,03,12,12).getTime(), 'value': 2}
]
I am loading this sort of data into dc.js, and doing some clever transformations to return dimensions that have the date key set to the beginning of the day (or month, or year, etc.) and then in the charts, I am reduceSuming the dataset, it works like a charm! I can reduce each days data into a total, or month, or quarter, etc. However, when I try to do the same thing in the dataTable, no dice, since it doesn't use real crossfilter groups, and it doesn't collapse the data into reductions like the charts can. Am I missing something, or am I just trying to get dataTables to do something they were not meant to do? I can use another tabling creation technique, but I thought maybe someone had figured out how to do it in dc.
Thanks!
If I would have looked just a little bit harder, I would have found this! Works well enough for now. Basically, you make a "fake" dimension using your desired group, giving it a .top() method that returns an object that represents your grouped data. Read the google group post for more details!