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?
Related
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 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 made a chart with the y-axis in "timeofday" format. The data has the usual format as an array: [0,0,50,400]. The problem: Google won't recognize the milliseconds in the drawing (but in the tooltips it's shown correctly). So [0,0,50,400] (50.4 seconds) is like [0,0,50,0] (50.0 seconds) on the chart. But I need that kind of resolution. How to solve that?
In chart the options object you could set the vAxis object with the field format and provide a string with the pattern you want to use here's an example:
new google.visualization.BarChart(document.getElementById('visualization'));
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year", format: "ss:SS"},
hAxis: {title: "Cups"}}
);
Look at the vAxis object.
For the string format you should look to http://userguide.icu-project.org/formatparse/datetime to build you the pattern you prefer.
I have created a bar chart using google Column Chart, now
I have only integer values in my datatable but google divide acis with float values, is there a way to force chart mark only integers?
is there any way to show value labels on top or inside bar chart? I found some way for image chart, but I whould like to keep chart interactive
There is no direct solution to this as yet because annotations are not supported in column chart. But let me share a work around for this: You can create a combo chart with two series having same data (as that of your column chart) along with the annotation column. Set the type of the first series to bars and that of the other series to line. Finally, specify visibleInLegend, lineWidth, and pointSize properties of the second series to false and 0s respectively.
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', label: 'Labels' });
data.addColumn({ type: 'number', label: 'Bar Series' });
data.addColumn({ type: 'number', label: 'Line Series' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addRows([['Label1', 10, 10, '10'],
['Label1', 20, 20, '20'],
['Label1', 40, 40, '40'],
['Label1', 5, 5, '5'],
['Label1', 30, 30, '30'],
]);
var barchart = new google.visualization.ComboChart(document.getElementById('bar_element'));
var options = {series: [{ type: 'bars' },
{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}]};
barchart.draw(data, options);
For your first problem you can use gridlines property, take a look at this post to see how you can use it.
For the second question I don't really understand. When you go on a bar with your mouse, the popup with values isn't already displayed on the top of the bar?
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