VizFrame column chart with longer dimension - javascript

I am trying to implement a column chart, which lists data for many years.. If I choose an year for column chart, it displays data for 12 months (12 bars for each month). If I choose 10 years, then it ends up in showing
10*12 = 120 columns in chart.
To overcome this, I am looking for a column chart which would show dotted line between long ranges.
That is: if user chooses 10 years data from 2000 to 2010, I have to display first and last 5 months data as vertical bar [Jan-May data of 2000 (5 column bars), Aug-Dec data of 2010 (5 column bars)] and a dotted vertical line or some characters to indicate the data is not displayed between these ranges.
Horizontal scroll is an option for which I have seen some examples. However, my requirement is as mentioned above without scrollbar.. Which vizChart type can be used for this purpose? Can someone please provide more details..
Regards,
SAP Learner

Related

How to use tooltips with two overlapped x-axes in Chart JS?

I have a bar chart where weekly information is shown in an x-axis, the labels correspond to the current day (rightmost label) going back 1 week each (12/28, 12/21, etc). In the same chart there is another scale/x-axis with (different) daily information. When clicking on each day's bar, a tooltip appears with the information for that day.
Example of tooltip
The problem is that when clicking on one of the days where weekly + daily cross over, the weekly index is used so the daily data is displaying information for a different date (ex: for the eighth week bar date is 12/28, but daily information is for the eighth date 11/10).
I tried changing the order of the axes when declaring the chart options, but that messes up the display. I'm looking for a way to access the second axis index instead of defaulting to the top one.

Fullcalendar dayGrid from and to ranges

I am facing issue to set full calendar view for ranges of selected dates, As an example when I select dates from May 1 to May 7th using the code
calendar.changeView('dayGrid', {start: startDate,end: endDate});
it shows all the selected dates in vertical columns as in the first section of the figure.
Similarly when I select dates from May 1 to May 8th it shows all the 8 columns in vertical view as in the second section of the figure.
In another case, suppose if I select dates multiples of 7, such as from May 1 to May 14, the calendar view shows 2 horizontal rows, one for each 7 days attached in last section of the figure.
So I tried to get the same horizontal view for 10 days like 7 dates are in first horizontal row and the remaining 3 days in second horizontal row, but could not able to get it. Please suggest the steps to achieve it.

How to make a chart display only a certain number of labels out of total labels in chartjs?

So I have a chart that has over 400 values on the x-axis, taken throughout the day at a certain equal interval. I want to show only 24 labels at the bottom, representing the 24 hrs of the day and the rest be shown the points on the chart itself but not on the x-axis. It's a line chart with currently having labels as an array of 400+ values and spread at multiples of 8 starting from 0000.

Reduce the amount of rendered datapoints in a zoomable areaspline with highcharts

I have a graph that will present sold entrance tickets over a quarter with a granularity of 1 datapoint per hour.
To make this presentable, I am using highcharts zoom feature together with a stacked areaspline.
My problem is that the graph gets really spiky when zoomed out, since it has to render a lot of datapoints that could fluctuate between a few hundred to zero in an hour or two, so I am wondering if there is a way to limit the amount of rendered datapoints per x-axis tick, to smooth the spline out further?
An example would be if the x-axis is fully zoomed out, it would label the months and render 4 datapoints per month, when I then zoom in on the beginning of say July, it would label first of july through fourth of july and render 4 datapoints per day.
BR Fredrik

chartjs Line chart Javascript

currently i am using chartjs to generate chart data for 12 countries.
i have date for 12 countries in Line Chart.
but the problem is that i cannot get country details when i hover over the points. Instead i get x and y axis values which are time and (sum) on y axis. how could i get data about country when i hover.
also if clicked on certain point i should get that data on click.
supposes i hovered on england and cliecked on it i should get a alert box containing england data only.
is there any solution to it in chartjs
The second point's functionality has been added in the ChartJS v2 beta if you're still having problems. As for the first point I don't think that's easily possible unless you're just wanting what country/dataset it is.

Categories

Resources