I am using a ColumnChart of google charts
and using DataView i am displaying values for the bar and line
Bar and line chart on same graph i am displaying using
series: {
0: { targetAxisIndex: 0 , type: "bars"},
1: { targetAxisIndex: 1, type: "line"},
},
Also i am getting the data from service : using json
The annotations are overlapping in my case due to high numbers. Searching for a solution.
Please suggest.
Thanks!
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.
I am figure out how to put legends in chart created with google chart, I have a chart with 3 series that represent a trend for a three different metrics, and for each line there is a one point that the metric have a change in the way that is calculated, this is represented by a circle in the line for each series, and at the end of the line I have another shape that represent the last date that the series have data.
I have the chart up and running creating one additional serie for each indicator with the value that have the line in the same point, and I formatted all idicator column with series property of google options:
series: {
3: { pointShape: "circle", pointSize: 10, visibleInLegend: false },
4: { pointShape: "circle", pointSize: 10, visibleInLegend: false },
5: { pointShape: "circle", pointSize: 10, visibleInLegend: false },
6: { pointShape: "triangle", pointSize: 15, visibleInLegend: false },
7: { pointShape: "triangle", pointSize: 15, visibleInLegend: false },
8: { pointShape: "triangle", pointSize: 15, visibleInLegend: false }
}
You can see an example here
So far so good, the challenge is that I need to put a legend for this indicators, not for each series like a normal behavior of google chart, witch put one legend for each dot and one legend for each triangle. I have disabled to show legend on series with indicators to avoid this behavior.
I want to do something similar to this:
Notice that this legend are independent of the label or tooltip message of each series or indicator, is a specific text that is common for each indicator, additionally is not a normal line that google put for each legend, is a custom shape similar to the type of indicator that it represent.
There is a way to do this?
I need to draw a average line across the bars in the google bar charts as shown in image.enter image description here
in the chart options, add a trendline, to see the average for the series
use the series number the trendline should represent...
trendlines: {
// 0 = first series
0: {
type: 'linear'
}
}
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:
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/