I have this google line chart but want to fill one line like an area chart. I looked on google and it seems their syntax for this is very different to the code used to create charts - i simply dont get it. Heres my chart options:
var l1=new google.visualization.LineChart($('l1'))
l1.draw(d,{
width:900
,height:280
,fontSize:11
,legend:{position:'right'}
,pointSize:2
,chartArea:{left:35,top:8,width:'80%',height:220}
,backgroundColor:"#DDDDDD"
,colors:["blue","green","yellow","orange","red"]
,hAxis:{textPosition:'out'
,slantedText:true},
series:{0:{color:'#BBBBBB',lineWidth:10},1:{color:'#CCCCCC',lineWidth:10},2:{color:'yellow'},3:{color:'orange'},4:{color:'red'}}
})
Why don't you use an Area chart instead of a Line chart?
https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart
Related
I have a combo chart where I display a candle stick chart. I have defined series option as:
[{type: "candlesticks", targetAxisIndex:1}]
It works perfectly. Now, when a user clicks a button I want to display the same data in a line chart, instead of candlesticks. I want that the line is going through exit points of candles. What I am doing right now is that I change my series to:
[{type: "line", lineWidth:0, targetAxisIndex:1}, {type: "line", lineWidth:0, targetAxisIndex:1}, {type: "line", color:"blue", lineWidth:1, targetAxisIndex:1}, {type: "line", lineWidth:0, targetAxisIndex:1}]
I.e. I change the chart to 4 line charts with 3 of them having line with width equal to zero. It works well, however I feel it is not a good solution, because the library is probably recalculating and rendering all 4 lines. Is there a better solution to ignore a data serie from a combo chart?
I'm trying to create something close to this using Google Chart API:
So far, I've got this:
<img src="//chart.googleapis.com/chart?
chbh=a
&chs=461x337
&cht=bvg
&chco=323232,7bc247&c
&chd=e:zM,Mz" width="461" height="337" alt="" />
Which generates this
http://jsfiddle.net/alexjamesbrown/c2VAP/
Which is almost there, but I can't figure out how / if I can add a label underneath the bars?
If you want to get labels like that, you have to make a few changes. Set the following chart parameters:
cht=bvs // create a stacked chart
chd=zM__,__Mz // insert null values for the opposite data points
chxt=x // create an x-axis
hxl=0:|Label+1|Label+2 // set the labels on the x-axis ("+" translates to a space)
see example: http://jsfiddle.net/asgallant/c2VAP/2/
I am working with Google Charts. I need to add a '$' before the values on the y-axis as well as the value in the bubbles.
Is there a setting for this?
take care,
lee
UPdate,
Here is the data being used by the charts:
'Month','Semi-Detached in Toronto E04','Semi-Detached in Toronto E08','Condominium Townhouse in Toronto E04','Condominium Townhouse in Toronto E08', ],
['7/2011', 4354000,15305800,6776500,495000],['8/2011', 700000,10514418,7060786,0],['9/2011', 6854800,17805400,12087300,0],['10/2011', 7287400,14248900,16206500,0],['11/2011', 2696245,9733270,12698090,0],['12/2011', 1965800,6054500,8854390,0],['1/2012', 2450968,9012200,5500100,0] ]);
I've tried adding '$' before the values as well as '%24' as suggested before, but both throw syntax errors. And the values cannot be quoted without throwing a Google Charts error '
Data column(s) for axis #0 cannot be of type string×'.
Thanks everyone for your input. I found a question that was 99.9% the same:
How to set tooltips to display percentages to match axis in Google Visualization Line Chart?
Try using %24 which is the urlencoded form for $.
Use:
var formatter = new google.visualization.NumberFormat({prefix: '$'});
Check the example here:
https://developers.google.com/chart/interactive/docs/examples#interaction_example
More details here:
https://developers.google.com/chart/interactive/docs/reference#numberformatter
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
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