I'm using cal-heatmap to draw github like calendar as you can see in this jsfiddle.
var calendar = new CalHeatMap();
calendar.init({
data: data,
start: new Date(2000, 1),
domain: "month",
subDomain: "day",
range: 3,
scale: [40, 60, 80, 100]
});
Is it possible to remove space between each month (like the github contribution graph)?
I have try the option domainGutter : 0 who is not working on this special case.
Short answer is no (not yet). Each month is in its own "domain", and can't be glued (overlapped in your case), to allow a smoother domain browsing.
Related
I am trying to display a multi-line chart of temperatures for 5 days on an hourly basis. I was able to create the both axes but I'm having trouble displaying the lines.
I have a JSON like so where x is a date object for every 3 hours and y is the temperature.
var dataset = [
//day 1
[
{x: Date 2015-09-07T21:00:00.000Z, y: 30.75},
{x: Date 2015-09-08T00:00:00.000Z, y: 29.32},
{x: Date 2015-09-08T03:00:00.000Z, y: 25.67},
{x: Date 2015-09-08T06:00:00.000Z, y: 22.7}
],
//day 2
[
{x: Date 2015-09-08T09:00:00.000Z, y: 23.69},
{x: Date 2015-09-08T12:00:00.000Z, y: 24.18},
{x: Date 2015-09-08T15:00:00.000Z, y: 26.69},
{x: Date 2015-09-08T18:00:00.000Z, y: 22.36},
{x: Date 2015-09-08T21:00:00.000Z, y: 23.91},
{x: Date 2015-09-09T00:00:00.000Z, y: 22.98}
],
//day 3
Array[8],
//day 4
Array[8],
//day 5
Array[8]
]
When initialize the graph like below, instead of a multi-line graph, I get one line containing all 4 days.
var chart = lineChart("graph")
.x(d3.time.scale().domain([
dataset[0][0].x, dataset[3][7].x
]))
.y(d3.scale.linear().domain([min, max]));
dataset.forEach(function (series) {
chart.addSeries(series);
});
chart.render();
If I change the domain to,
dataset[4][0].x, dataset[4][7].x
it only draws the line for that day.
The strange thing is that when I "Inspect Elemet" via the browser, I can see that all 5 paths have been drawn out but they just dont show up on the UI. I think this has something to do with the way I'm setting the domain but I'm not sure what.
How do I set the domain so that d3js plots each days array on a 24-hour x-axis?
If I understand correctly, you want to have the x-axis from midnight to midnight, as if everything is happening "on one day", like so:
NOTE: something is a bit weird with the timestamps in the source. I have no idea how dt and dt_text are related. Please adjust my examples accordingly...
How can you get that?
The problem in your code is indeed related to the domain. How?
If you set the domain to be from the very first timestamp to the last, like:
.domain([
dataset[0][0].x, dataset[3][7].x
])
then the chart will span over 4 days (by the way: these hard-coded indices are not very robust coding...)
So the chart will then obviously plot over all days, it has no way of knowing that you only want hourly time-stamps.
If you, on the other hand, just use the most recent day as domain:
.domain([
dataset[3][0].x, dataset[3][7].x
]))
It will plot just that, i.e. the last day. The other lines will be plotted too (what you see in the inspector), but the will be hidden away on the left (as you clip the stuff).
So: the problem is, that the x-coordinates are different, as they occur on different dates. There is plenty of ways to work around that (I personally always use moment.js for dates), but to show the effect, here's a quick hack to achieve the graph above:
-> JSFiddle
What did I do? I added a new helper function to calculate the x time-stamp:
function gDate2(date) {
var now = new Date();
var hours = (new Date(date * 1000)).getHours();
var date = now.getDate();
var month = now.getMonth();
var d = new Date(2015, month, date, hours, 0, 0, 0);
return d;
}
Yes, it's not pretty. Personally, I like moment.js to calculate dates and stuff. The important part is that I return all dates as if it's all today (or any other arbitrary day). Then I extract the hour of the timestamp of the according data point and add that (as in the note: maybe you need minutes, seconds too?)
If you are going to use it, please make sure you have timezones, day-light saving etc. under control! I hate dates...)
And again: I am not sure about dt and dt_text. Make sure you got that right!
I hope this helps.
I'm trying to plot data on a line graph where the x-axis are the months January to December.
The issue is: I can't seem to commence the line graph from anything other than the x-axis origin - which would be January.
Question - How can I set a start point, so the data line is plotted from March to December. I could set the data to be 0 for Jan and Feb, but I don't want the line to appear at these months.
Via http://c3js.org/samples/simple_regions.html - I can see you can set start and end regions to specify different types of lines (in this case dashes). Is there a similar way to set a start and end so January and February are hidden.
thanks
You can just use a null data point.
Here's sample code:
var chart = c3.generate({
data: {
columns: [
['data', null, null, 30, 200, 100, 400, 150, 250]
]
}
});
Here's the working fiddle: http://jsfiddle.net/jrdsxvys/1/
I am showing multiple Meter Gauges on a single page, in conjunction with Bootstrap, to provide responsiveness. What is obvious is they are all calculating slightly different sizes, so I hoped to use diameter.
Here is my working code:
s1 = [322];
$.jqplot('spend',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
intervalOuterRadius: 56,
ringColor: '#222',
padding: 3,
tickColor: '#111',
ringWidth: 4,
needleThickness: 11,
shadowOffset: 10,
label: "£"
}
},
title: 'Spend'
});
If I add
diameter:200,
I get no output, and:
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
I have also tried
diameter:50,
and
diameter:500,
in case I was not providing adequate space, or too much space, but I rather doubt it, as intervalOuterRadius is set at 56, I have also assumed that
diameter:200
is correct syntax given that
intervalOuterRadius:56
(as well as various other values) is correct. I cannot find anyone else who has had this problem, and have had no response on the jqplot google group.
Oh yeah, and I'm primarily writing for IE8 atm but it will need to be used on ie11 in time.
I'm using JQPLOT to create graphs. But I have a lot of data for the x-axis. Now, i need to limit the number of ticks. I'm using numberTicks for this but doesn't work.
xaxis: {
numberTicks:15,
max: x_limits.max,
min: x_limits.min,
renderer:$.jqplot.CategoryAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%#m/%#d/%Y'}
},
I'm using CategoryAxisRenderer. When i use DateAxisRenderer, it works. -.-
EDIT (wrong answer) It doesn't work because it takes account of your minimal and maximal xaxis values. Try to remove them to take into account the "numberTicks" options (or just specify one of them but I'm not sure it will be correct)
EDIT2 : You have to remove the renderer and rendererOptions from the xaxis part :
xaxis:{
//renderer:$.jqplot.CategoryAxisRenderer,
//rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
max: 40,
min: 1,
numberTicks: 5,
}
Please see a working example here with 5 ticks.
Is there a way to create a dimension on a attribute that has one or more values? For example
{quantity: 2, total: 190, tip: 100, items: ["apple","sandwich"],
{quantity: 2, total: 190, tip: 100, items: ["ice-cream"]},
{quantity: 1, total: 300, tip: 200, items: ["apple", "coffee"]}
My goal is to create a cross filter that can filter out entries along a dimension that has ordinal values. Is there a way I write a filter/dimension that will allow me to say "I want all entries that have the item 'apple'"?
The only workaround i can think of is to create a dimension for each item. Like so:
var paymentsByApple = payments.dimension(function(d) { return $.inArray("apple", d.items); });
var paymentsByCoffee = payments.dimension(function(d) { return $.inArray("coffee", d.items); });
// and one for every possible item
The main problem is that I don't want to enumerate and hard code all the different objects. Moreover, I may end up having lots of possible different items. Is there a smarter way to do this?
Thanks in advance!
Facing the same problem here and don't see an easy workaround with the current lib features, see this.
The problem with changing the datamodel to fit a single value dimension as proposed by Pablo Navaro is that you need to make sure that the stats calculated for other dimensions are not distorted (double counting, correcting means, ....)
Hope to see a filter working on multiple value dimension, or to have some more time to dig into the codebase to propose one ...
What about changing your data model? I think that using:
[{id: 1, quantity: 1, total: 100, tip: 50, item: "apple"},
{id: 1, quantity: 1, total: 90, tip: 50, item: "sandwich"},
{id: 2, quantity: 1, total: 190, tip: 100, item: "ice-cream"},
{id: 3, quantity: 1, total: 300, tip: 100, item: "apple"},
{id: 3, quantity: 1, total: 300, tip: 100, item: "coffee"}]
Maybe you can compute the totals by id using reduceSum