I have implemented a Visx XYChart component with LineSeries.
Codesandbox link here
Requirement:
I need to display a Glyph to indicate the start and end of the individual LinePath, and only if the LinePath starts or ends in between the start or end of the x-axis.
The x-axis plots weekly data for a year(52 weeks), if the data has less than 52 weeks of data points, then it means LinePath begins or ends somewhere in between the x-axis.
I need the x-axis to display the January month name as well.
How do I approach to solve this problem?
Related
Hi guys,
How to create a vertical line to a certain date on X axis? I found out that we will need to set x axis as
continuous scale to enable vertical line option...But this is not what I want. For example, I have attached a screenshot. I manually set the vertical line in August 2013...of course, this is not what i want to do (I can't manually input a date as i want the chart to analyze it), but that is the final look i want. I want the chart to read the date when it has the first water injection from well list i imported and then draw a vertical line on that date...From this date to future, it will be the waterflood period (it will be nice to somehow highlight this area in the chart with a light color but i dont know how to do it). Can somebody tell me what I need to do to achieve this and I do want x axis to be categorical scale as i want to show all dates.... Is there a custom curve script I can write? I assume i would need to write something like read the earliest date of the water injection and then draw a vertical line on this date...
Please help! Thanks!
I'm trying to find a way in dc-js to draw a chart that would display monthly values for current year but yearly averages for previous years. Is this possible provided that the date axis is dynamic? I was thinking of grouping records by year before passing them to dc.js but the chart will just leave blank gaps on the x axis.
I would like to achieve the similar result to the attached excel screenshot but on a web-based interactive solution.
You will need to use an ordinal domain for this purpose.
If you use a time-based scale, then the bars will always be positioned based on a linear mapping of dates to X coordinates. This explains the gaps you are seeing.
Instead, you can define the ordinal domain explicitly:
var domain = ["2015 Average", "2016 Average", "2017 Average", "201801", "201802", ...];
chart
.x(d3.scaleOrdinal().domain(domain))
.xUnits(dc.units.ordinal)
You'll also need to change your group key function accordingly:
var group = dimension.group(function(d) {
return d.date.getYear() < 2018 ?
d.date.getYear() + " Average" :
d3.timeFormat('%Y%m')(d.date);
});
I'm not sure how you intend to calculate the averages, so I won't get into that.
Unfortunately (or fortunately, depending on your purposes) this will change the selection behavior so that instead of a continuous X brush that you can drag, you'll have to click on individual bars in order to select them. There are some ways around that, but they are kind of tricky, so lmk if this is a problem for you.
Here is the original example code :
http://canvasjs.com/html5-javascript-dynamic-chart/
I need to update the value without setInterval(), I mean whenever the yAxis got a value somewhere, then it will plot automatically without time delay. One more thing, I dont’t want to shift the graph while the value reach datalength, when it reach the maximum datalength, clear all the old plotted data, go back to 0 point and plot again.
Thank you for your support !
canvasjs
Gia Huy,
You can remove dps.shift from the example to avoid shifting. Check this example.
And you can remove setInterval to avoid update of charge based on time-basis and you can manually push y-value to dataPoints and render chart whenever you get y-value.
setInterval(function(){updateChart()}, updateInterval);
Remove setInterval and push y-Value to dataPoints when you encounter it.
dps.push({y: yValue});
chart.render();
and render the chart.
I have a nvd3 chart where i group data by day, week or month. When i have have a low number of values in the x-axis i don't rotate the axis label, but if i have a lager amount of ticks i rotate them so they don't overlap.
My problem is that when i have a chart grouped by Week with the tick labels rotated and change it to group by month most of the labels become horizontal as expected, except one. If i play with the dates i see that i get the problem always with the month February 2016 or December 2014.
If i go to group by month from the day grouping, or if i refresh the page the chart is shown as expected.
See the images below:
chart by week,
chart by month
Does anyone have a clue why do i have this kind of issue?
Well i found a solution to the problem.
in the file nv.d3 in the axis chart function of nv.models.axis there is an if statement that is run when labels are set to be rotated (if (rotateLabels % 360){...}). But if the labels are not set to rotate there is no code to explicitly set this, so i added an else statement in that if statement that sorted the issue:
else {
xTicks
.attr('transform', 'rotate(0)')
.style('text-anchor', 'middle');
}
I have one dataset and create from this set an area chart. In this case no problem.
But now I have the requirement to add dynamic markers to the chart.
So, this is the example:
Data Set:
date | workload | type
The report renders a chart, which displays the date on the x-Axis and the workload on the y-Axis. The Type shows the different areas in the chart.
Now I need an marker (line marker) which doesn't have a linear value, but therefore a value for each date which is displayed on the x-Axis.
On Birt-Exchange (http://www.birt-exchange.org/blog/2008-02-01/birt-chart-scripting-dynamic-markers/) is only a tutorial for static markers. So if anyone has an idea how to script this kind of marker, please feel free to answer ;-)
Thanks in advance!