Google charts show all values on v-Axis - charts

I have been attempting to get a google chart to show each and every specified value labeled along the vAxis.
Currently, the most I can can get it to show is a label for every other tick. It seems like there should be a way to get around this.
Here's what I'm seeing:
I have the vAxis options set like this:
vAxis: {
ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21],
direction: -1,
minValue: 0,
maxValue:20,
showTextEvery:1
}
What I need is for it to label each and every row, meaning 1,2,3,4,5, etc... instead of just 1,3,5,9....

if the values are specified in the vAxis.ticks option and still do not appear,
then you will need to either increase the height of the chart and / or chart area...
height
chartArea.height
or decrease the font size...
vAxis.textStyle.fontSize

Related

ECharts : How to set maximum zoom level in percentage?

I want to restrict user to do maximum zoom to 80% for line chart in echarts. Is there any way to do so ?
Yes. You have at least two ways:
The easiest and comfortable:
Add to config component DataZoom, setup it as you needed and hide. The component won't show up but will work. And for the last step just dispatch the action dataZoom:
chartInstance.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
// set as percents
start: '20%',
end: '80%',
// or set as values
startValue: 1234,
endValue: 4321
})
Difficult way:
The each Axes in Echarts has two attributes: min and max that can control view window of axis. Just change it as you need. Also you can pass callback to attributes that will change the value when Echarts draw chart.

ECharts generated label overlaps with dataZoom

Using ECharts I am giving it a data series that consists of a number of data against really values. (e.g plotting stock prices).
I also have data zoom enabled.
My issue is that the generated X axis' labels overlap with the dataZoom. I can't understand from the documentation how to fix this.
You need to set the value of grid.bottom. This will move the whole grid further from the bottom of the canvas and pull the whole X Axis with it.
Example: grid: { bottom: 60 }
// usage
this._displayedChart.setOption({ grid: { bottom: 10 } })
Not a great solution but works.
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.bottom

Aligning BIRT charts regardless of the legend size

I have created a BIRT report with multiple charts.
All the charts include different data but for the same time span.
So i want to make the x axis of the charts align with each other so it is easy to read all the charts at once.
But the series names of these charts are different from each other.And some charts gets dynamic series names in which the length cannot be predicted.
Even though i align the charts with same width and height because of the series names the legend gets too lengthy and the alignment gets ruined.
According to the requirements given to me legend should be placed at the right side of the chart.
Is there a way to fix the size of the legend without truncating the series names.May be a way to wrap the series names so the size of the legend will be same for all the charts and the charts will be aligned nicely.
From your Eclipse designer:
Edit charts -> Format charts -> Legend -> Layout -> Wrapping width
Set a wrapping width value as expected, for example try 60.
You might also have to increase the bottom inset of legend entries to avoid overlapping:
Edit charts -> Format charts -> Legend -> Entries -> Bottom inset
From your Eclipse designer: set Format Chart->Legend->Entries->Ellipsis property to possible max length of your dynamic legends. and the problem will be solved.
As this property work as follows:
The default value is "1". Int attribute "Ellipsis" specifies the behavior of shortening the legend item's text with ellipsis if there is not enough space to display the whole text. Value 0 indicates that the feature is disabled, and the legend item will either be displayed with whole text or be dropped. A positive value n represents the minimal count of characters to be displayed before the ellipsis, which means the legend item will either be dropped or be displayed with at least n characters.
Hope this will solve your problem. It worked for me.

Change pie chart color in Kibana

One of my uses of Kibana is related to displaying some information in certain cases only (say when a value is unexpected and exceeds a defined range). This element is therefore either shown or hidden from the dashboard, and displaying it could be considered as displaying an alert. I would prefer if the related pie chart was filled in red, rather than the default green.
Any ideas on how to do this?
Assuming you are describing Kibana 3, if you want terms panels pie charts to use different colors, you will need to make a code change.
There is a way to have custom colors for your pie chart. In order to do that you'll need to create a "hits" panel and pick the "pie chart" as the display. The color of the pie slices will be determined by the color that you chose for the queries that they track:

Remove Space Between Bars in Bar Chart in Google Visualization API

I have a single data series and need the bars stacked right next to each other. What Google Visualization API call / property would help me accomplish this?
Set the bar.groupWidth option. You can either set it as an integer (number of pixels for the group to take up) or as a percent of the available space. In your case, I suggest using the percent:
bar: {
groupWidth: '100%'
}
That will remove all space from between adjacent bars.