I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks
You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/
Related
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:
How can I set some kind of padding to chart area that will make it look like this:
I am using Google Charts https://google-developers.appspot.com/chart/.
I finally found the answer:
Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).
Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):
<%= line_chart #daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>
Result:
Hi iam working on google chart it is displaying fine but i need the font size and color of the text displayed on X-axis and Y-axis coordines.Can any one tell how to do this one
Use the hAxis.textStyle.color and vAxis.textStyle.color` options to set the color of the axis labels.
Use the textStyleOption to set the color to labels.
hAxis: {
title: "Locations",
textStyle: {
color: 'black'
}
},
I had some code that set my V axis scale from 0 - 4. However I deleted it and now I cannot remember how I got it working again. See below for my chart code, and the code I think I used before.
This is what I think I used before...
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:99.8
}
}
Below is my chart
// Create a line chart, passing some options
var LineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
//'width': 300,
'height': 300,
'legend': 'top',
'backgroundColor': '#eeeeee',
'colors': [ '#8ea23f'],
'pointSize': 5,
'title': 'Selected Site and Species abundance over time'
},
'view':{'columns':[0,2]},
});
There you go:
'vAxis': {'title': 'Something Here',
'minValue': 0,
'maxValue': 4},
There are two approaches to take, depending on what you need. The first one (shown by Tom's answer) sets alternative min and max values for the data set sent to the chart, eg. the chart interprets the maximum data value is must accommodate as MAX(vAxis.maxValue, data set max value). If the data set goes outside the bounds of vAxis.minValue/maxValue, those options will essentially be ignored. Also, the chart's actual axis range is only based on the min/max values - the values displayed will include the min/max, but might go beyond the min/max in order to produce clean intervals between axis labels.
If you need to explicitly limit the axis to a specific range, where your min and max values are the absolute limits you want displayed, then you use the vAxis.viewWindow.min/max options.
I am looking for a way to display rankings across time, using Google Charts.
(this is the same question as here, but this time using Google Charts instead of Highcharts)
Is there a way to display rankings in a "user-friendly way", by which I mean: with the #1 ranking being at the top of the chart, and the last ranking being at the bottom.
I wish to use the line charts.
Ok, I found the option:
vAxis: {direction: -1} will reverse the y Axis
hAxis: {direction: -1} will reverse the x Axis
chart.draw(data, {vAxis: {direction: -1}, width: 400, height: 240, title: 'Rank'});