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/
Related
I want to color the background bars (or the entire cells) of the table as shown in the appended screenshot based on the "Group-By"/dimension value (red for "rot", yellow for "gelb" and green for "grün").
I was able to color the metric-part of other visualizations with label_colors, but I have not yet found a way to color the cells of the table based on a "dimension".
Is there a way to do this?
As of now:
EDIT: I wanted to color it the following way (edited with paint):
This is a tad hacky, but you can add a markdown component and add the following markup:
<style>
th {
color: red; /* or whatever color/hex code you want */
}
</style>
The markdown component will be blank after you add this--i.e. there will just be a blank markdown block-- so you may want to add some copy. Alternatively, if you already have a markdown block, you can add it there, and it won't appear as long as you remember the <style></style> tags.
I need to create graphs with daily data and we need the weekend bars to be a different color. I am able to color my bar graph with the weekends being green via the Plot attribute and rules as shown in my code by using the #Dayofweek# function and it works great. However, when I do this the X-axis labels are values of 1 through 7 as shown in in the first image below which won't work. If I just use the date variable then it displays the X-axis labels correctly as shown in the 2nd attached image but will not correctly color the weekends a different color.
<cfscript>
plot={"rules":[
{
"rule":"'%k' == '1'",
"background-color":"green"
},
{
"rule":"'%k' == '7'",
"background-color":"green"
}
]};
</cfscript>
<cfchartseries type="bar" query="mychartdata" itemcolumn="time" valuecolumn="interval">
https://drive.google.com/open?id=1CADAhxn8n1bNjdx_vJpXA-UXIrOU-vXS
https://drive.google.com/open?id=1cgUgtqSNPTHmC-_aaZoPnbO2CpCz_Qlt
https://developers.google.com/chart/interactive/docs/gallery/ganttchart
Is it possible to add labels on the Gantt chart durations, like the below screenshot?
As WhiteHat said, there is no built-in option.
For my specific case (I always have the same structure in my Gantt graph) I did the following (to place some DIVs on top of the bars - with these DIVs you can do whatever you want):
// callback after draw (afterDraw() function is called after chart is drawn)
google.visualization.events.addListener(chart, 'ready', afterDraw);
function afterDraw(){
// the container element to append our generated DIVs (with the labels)
// it has to be outside the SVG element, but inside the chart container
var toContainer = $('#chart_div > div > div');
// in order to create DIVs to place them on top of the bars, we first need to get bars SVG/RECTs positions and sizes
// in my case, the RECT elements with the necessary top/left/width/height are in the 6th G element
$( "#chart_div g:eq(5) rect" ).each(function() {
toContainer.append("<div style='top:"+$(this).attr('y')+"px; left: "+$(this).attr('x')+"px; width: "+$(this).attr('width')+"px; height: "+$(this).attr('height')+"px;text-align: center;position:absolute;line-height:2' >Some text</div>");
});
}
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 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