I'm trying to display some very simple data using Google Charts API.
My data are a serie of X,Y points:
(1,44) (2,46) (3,46) (4,43) (5,46) and (6,44).
X-axis : from 0 to 300, step 50
Y-axis : from 1 to 50, step 5
I should end up with a line almost in the top, to the left, of the chart (43-46 are near 50).
But here is what I get:
URL = http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,50,5
If I change Y-axis, 1 to 100 (instead of 50), it's ok...
URL = http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,100,5
I'm probably mistaking, but I can't find what is wrong.
If you add data scale the chart does show correctly.
http://chart.apis.google.com/chart?cht=lxy&chs=500x300&chd=t:1,2,3,4,5,6|44,46,46,43,46,44&chxt=x,y&chxr=0,0,300,50|1,0,50,5&chds=0,300,0,50
Related
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'
}
}
I am try to introduce a Second CursorX at AxisX Primary if this is possible some how?
I did try to activate a second CursorX at Secondary but that one did not work as expected,
I also readed about Line Annotation and Vertical Line Annotation and created some kind of line but a Second set of CursorX CursorY would be far nicer
I did try to create and as much as empty as possible and Transparant Second ChartArea which i try to overlay on top of the ChartArea1, i noticed InnerPlotPosition and Postion of both ChartArea should stay in track to get a full aligned Overlay, and next the CursorX of second ChartArea should be displayed on top of ChartArea1
This is what i think how it could be done but don't have a clue if it sounda for a good way to create a second CursorX maybe Line Annotation is an easier road to rome
Any help suggestion are welcome
Thanks in advance
Suppose your chart contains multiple chart areas aligned vertically, below code allows you set CursorX in each chart area:
Dim c1 As New Chart
'...here code block to build each chart area ...
'...then use below sample code to align each chart area vertically:
'c1.ChartAreas(i).AlignmentOrientation = AreaAlignmentOrientations.Vertical
'c1.ChartAreas(i).AlignWithChartArea = c1.ChartAreas(0).Name
'below set horizontal cursor (it is a gold vertical bar in each chart area):
For Each area As ChartArea In c1.ChartAreas
area.CursorX.LineColor = Color.Gold
area.CursorX.LineWidth = 3
area.CursorX.IsUserEnabled = True
area.CursorX.IsUserSelectionEnabled = True
area.CursorX.SelectionColor = System.Drawing.Color.PaleGoldenrod
Next
In VS2010 VB I am using MSChart (.Net 4) and I have a FastLine chart with values from -2000 to 2000 for X axis and -20 to 20 on Y axis.
The interval for the gridlines in X axix is 250 and I need the gridlines to be "mirrored" from origin (i.e. -250, 250; -500, 500;...) but when I execute the applications always the first gridlines are -200, 50 and then -450, 300...
I tried using StartFromZero = True in the axes properties without success. Is there any way to force the gridlines to be symetric from the origin (zero) ?
Thank you for your comments.
I solved this issue by setting the IntervalOffset of the Axis. This offset represents the offset of the first gridline from left of the chart (in the case of X axix) . By calculating the displacement required (myChart.ChartAreas(0).AxisX.IntervalOffset = myChart.ChartAreas(0).AxisX.Maximum Mod yourIntervalValue) to reach 0 from left most value with the interval used, I was able to make the gridline in the middle of the chart to match the zero line.
I hope it helps others.
I have a line chart that I've created with gRaphael. It has axes and tick marks, but I'd like to have grid lines. Is there built-in way to achieve this or an add on library that can help me?
gRaphael does not have a built-in way to add grid lines, but it is pretty easy to draw them, either by editing the source code or manipulating your graph object after you create it.
I had found an extension called RaphAlytics and used its drawGrid() function in cases where I needed a bounding box with a grid.
You can adapt this function for any gRaphael graph as needed to draw gridlines. On a line chart, I needed to draw horizontal gridlines that were aligned with the left axis marks on a line chart, so I used the function as an example like this:
// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
stroke : '#EEE'
}).toBack();
}
Here's a working fiddle to illustrate that example: http://jsfiddle.net/KM3BB/1/
I tried doing this yesterday. Short answer: gRaphaël can't do this for you with any linechart options nor axis options, you have to do-it-yourself with Raphaël.
Something like:
var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);
This means under my linechart draw a path which starts from 15,200.5 and draws a straight line to 310,200.5 moves to 15,180.5 and draws a line to 310,180.5. Don't ask me why but the .5 is important for getting the stroke to actually be 1px wide and solid black. Otherwise it seems to get aliased to 2px wide at 50% opacity. You have to calculate the exact placement in regards to your linechart yourself.
You can also play with the path function in the playground by changing r to paper.
You might also consider looking at Google Chart Tools if your looking for things like defining the exact range of the axis (as opposed to just the min and max of the input).
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'});