Vivociti Google Chart
CMS: Joomla
Version:
Type: plugin
Extension Topic:
|
|
|
| VivoChart Joomla plugin is empowered by Google Chart API. You can use it to generate several types of chart, i.e. line, bar, and pie charts. For each image type you can specify attributes such as size, colors, and labels. With this plugin, you will be easily creating content article with dynamic charts defining by yourself. Syntaxt: {vivochart}attributes' setting{/vivochart} For example: * Example 1 : Pie Chart ==> {vivochart}cht=p3&chd=t:90,49&chs=350x150&chl=Foo|Bar{/vivochart} * Example 2 : Line Chart ==> {vivochart}chs=200x125&chd=s:helloWorld&cht=lc&chxt=x,y&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb{/vivochart} Visit VivoCiti.com for other great Joomla extensions and articles. I am also actively looking for partners and sponsor for my website (VivoCiti.com). If you are interested you may contact me here. If you want to thanks me for this free Joomla component, you can spend few seconds to vote for this component by visiting : Joomla Extension For complete sets of attributes' setting, you can visit Google Chart User Guide Below is Chart Type you can use. The content below is courtesy of Google Chart API. The following types of charts are available: Line chart Bar chart Pie chart Venn diagram Scatter plot Line charts Specify a line chart with cht=<line chart type> Where <line chart type> is lc or lxy as described in the following table. For charts of type lc, multiple data sets are drawn as multiple lines. For charts of type lxy a pair of data sets is required for each line. For information on how to specify multiple data sets see Chart data. For information on available parameters see Optional parameters by chart type. Parameter Description Example cht=lc A line chart, data points are spaced evenly along the x-axis. cht=lc cht=lxy Provide a pair of data sets for each line you wish to draw, the first data set of each pair specifies the x-axis coordinates, the second the y-axis coordinates. Provide a single undefined value to evenly space the data points along the x-axis. The example chart uses Text encoding so an undefined value is represented by -1. Simple encoding uses an underscore (_) and Extended encoding two underscores (__) as undefined - or missing - values. Specify data point shape with the chm parameter as described in section Shape markers. Specify line colors as described in section Colors. cht=lxy chd=t:0,30,60,70,90,95,100| 20,30,40,50,60,70,80| 10,30,40,45,52| 100,90,40,20,10| -1| 5,33,50,55,7 Back to top Bar charts Specify a bar chart with cht=<bar chart type> Where <bar chart type> is bhs, bhg, bvs or bvg as described in the following table. Depending on the bar chart type, multiple data sets are drawn as stacked or grouped bars. For information on how to specify multiple data sets see Chart data. For information on available parameters see Optional parameters by chart type. Parameter Description Example cht=bhs cht=bvs Horizontal and vertical bar chart respectively. Multiple data sets are stacked so you must specify a color for each data set as described in section Colors. cht=bhs chco=ff0000,00aa00 cht=bvs chco=cc0000,00aa00 cht=bhg cht=bvg Horizontal and vertical bar chart, respectively, in specified colors; multiple data sets are grouped. cht=bhg chco=cc0000,00aa00 cht=bvg chco=cc0000,00aa00 chbh Bar chart size is handled in a different way than for other chart types. For horizontal bar charts of type bhs and bhg, and for vertical bar charts of type bvs and bvg, chart size is determined by the chs parameter. The chart is clipped (only partially visible) if the size specified (with chs) is too small. Because of this you may wish to specify bar thickness with chbh= <bar width in pixels>, <optional space between groups> Note: the second value for the bar height parameter (chbh) determines the space between groups of bars. Bars within a group have half the specified spacing. chbh omitted cht=bhs chbh=10 cht=bhs Back to top Pie charts Specify a pie chart with cht=<pie chart type> Where <pie chart type> is p or p3 as described in the following table. Supply one data set only; subsequent data sets are ignored. For information on available parameters see Optional parameters by chart type. The Google Chart API calculates the circle's radius from the minimum of width and height specified in the chart size (chs) parameter. Specify a width greater than height so there's space for labels. The chart is clipped if the size specified is too small. Parameter Description Example cht=p Two dimensional pie chart. Specify labels with chl as described in Pie chart labels. Unless specified otherwise, pie segment colors are interpolated from dark orange to pale yellow. Specify other colors as described in section Colors. cht=p cht=p3 Three dimensional pie chart. Specify labels with chl as described in Pie chart labels. cht=p3 Back to top Venn diagrams Specify a venn diagram with cht=v Supply one data set where: the first three values specify the relative sizes of three circles, A, B, and C the fourth value specifies the area of A intersecting B the fifth value specifies the area of B intersecting C the sixth value specifies the area of C intersecting A the seventh value specifies the area of A intersecting B intersecting C Parameter Description Example cht=v In this example the first circle is specified with 100, the second with 80, and the third with 60. The overlap between all circles is specified with 30. For information on available parameters for Venn diagrams see Optional parameters by chart type. cht=v chd=t:100,80,60,30,30,30,10 Back to top Scatter plots Specify a scatter plot with cht=s For information on how to specify multiple data sets see Chart data. For information on available parameters see Optional parameters by chart type. Parameter Description Example cht=s Supply two data sets, the first data set specifies x coordinates, the second set specifies y coordinates. The default shape for data points is a circle. Specify a different data point shape with the chm parameter as described in Shape markers. The default data point color is blue. Specify other colors as described in section Colors. In the example, you'll notice the data points vary in size. To do this, specify a third data set. Any size specified with the chm parameter determines the maximum size for any data point. The size at which each data point is drawn is scaled with the optional third data set. So, for example, specifying a size of 20 pixels with chm and the highest value possible for the type of encoding you are using (9, 100.0 or ..) in the third data set will result in a data point of 20 pixels. cht=s Back to top Colors Specify a color with at least a 6-letter string of hexadecimal values in the format RRGGBB. For example: FF0000 = red 00FF00 = green 0000FF = blue 000000 = black FFFFFF = white You can optionally specify transparency by appending a value between 00 and FF where 00 is completely transparent and FF completely opaque. For example: 0000FFFF = solid blue 0000FF00 = transparent blue The following color options are available: Venn diagram, line, bar, and pie chart colors Chart area and background fill Back to top Data set colors Specify colors for lines, bars, Venn diagrams, and pie segments with chco= <color1>, ... <colorn> Where <color1> and all subsequent color values are RRGGBB format hexadecimal numbers. Parameter Description Example chco This example has three data sets and three colors specified. chco=ff0000,00ff00,0000ff This example also has three data sets, but only two colors are specified. Because of this the last two lines are both drawn in the last color (red 0000ff). chco=ff0000,0000ff For bar charts, if the number of colors specified is less than the number of data sets then colors are alternated. In the following chart, the third data set, Bar, is drawn in the first color. If only one color is specified all data sets are drawn in that color. chco=ff0000,00ff00 chd=s:FOE,THE,Bar Here's the same chart with three colors specified. chco=ff0000,00ff00,0000ff chd=s:FOE,THE,Bar For pie charts, if the number of colors specified is less than the number of slices, then colors are interpolated. chco=0000ff For Venn diagrams, if the number of colors specified is less than the number of circles the last color specified is repeated. chco=00ff00,0000ff Back to top Chart area and background fill Specify background fill or chart area with chf= <bg or c><type of fill> Where: <bg or c> is bg for background fill or c for chart area fill. <type of fill> is one of the following: Solid fill Linear gradient Linear stripes the pipe character (|) separates fill definitions. No pipe character is required at the end of a fill definition. Back to top Solid fill Specify solid fill with chf= <bg or c>,s,<color>| <bg or c>,s,<color> Where: <bg or c> is bg for background fill or c for chart area fill. <s> indicates solid fill. <color> is an RRGGBB format hexadecimal number. the pipe character (|) separates fill definitions. No pipe character is required after the second definition. Parameter Description Example chf This example fills the image background with pale gray (efefef). chf=bg,s,efefef This example fills the background with pale gray (efefef) and chart area in black (000000). You can specify both background and chart area for line charts and scatter plots. chf=bg,s,efefef| c,s,000000 Only background fill is available for bar charts, pie charts, and Venn diagrams. chf=bg,s,FFF2CC Back to top Linear gradient Specify linear gradient with chf=<bg or c>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n> Where: <bg or c> is bg for background fill or c for chart area fill. lg specifies linear gradient. <angle> specifies the angle of the gradient between 0 (horizontal) and 90 (vertical). <color x> are RRGGBB format hexadecimal numbers. <offset x> specify at what point the color is pure where: 0 specifies the right-most chart position and 1 the left-most. Parameter Description Example chf Chart area has a horizontal (left to right) linear gradient, specified with an angle of zero degrees (0). Blue (76A4FB) is the first color specified. This is pure at the right-most side of the chart. White (ffffff) is the second color specified. This is pure at the left-most side of the chart. The chart background is drawn in gray (EFEFEF). chf= c,lg,0,76A4FB,1,ffffff,0| bg,s,EFEFEF Chart area has a diagonal (bottom left to top right) linear gradient, specified with an angle of forty five degrees (45). White (ffffff) is the first color specified. This is pure at the bottom left of the chart. Blue (6A4FB) is the second color specified. This is pure at the top right of the chart. The chart background is again drawn in gray (EFEFEF). chf= c,lg,45,ffffff,0,76A4FB,0.75| bg,s,EFEFEF Chart area has a vertical (top to bottom) linear gradient, specified with an angle of ninety degrees (90). Blue (76A4FB) is the first color specified. This is pure at the top of the chart. White (ffffff) is the second color specified. This is pure at the bottom of the chart. The chart background is again drawn in gray (EFEFEF). chf= c,lg,90,76A4FB,0.5,ffffff,0| bg,s,EFEFEF Back to top Linear stripes Specify linear stripes with chf=<bg or c>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n> Where: <bg or c> is bg for background fill or c for chart area fill. ls specifies linear stripes. <angle> specifies the angle of the gradient between 0 (vertical) and 90 (horizontal). <color> is an RRGGBB format hexadecimal number. <width> must be between 0 and 1 where 1 is the full width of the chart. Stripes are repeated until the chart is filled. Parameter Description Example chf Chart area with vertical stripes specified with an angle of zero (0). The first color specified (dark gray CCCCCC) is the first stripe drawn at a width of 20% of the chart width. The second color specified (white ffffff) is also drawn at a width of 20%. Stripes alternate until the chart is filled. The chart background is omitted. chf=c,ls,0,CCCCCC,0.2, FFFFFF,0.2 Chart area with horizontal stripes specified with an angle of ninety degrees (90). The first color specified (the darkest gray 999999) is the first stripe drawn at a width of 25% of the chart width. The second and third colors specified (the lighter gray CCCCCC and white FFFFFF) are also drawn at a width of 25%. Stripes alternate until the chart is filled. The chart background is omitted. chf= c,ls,90, 999999,0.25, CCCCCC,0.25, FFFFFF,0.25 Back to top Labels The following types of labels are available: Chart title Chart legend Pie chart labels Multiple axis labels Chart title Specify a chart title with chtt=<chart title> Parameter Description Example chtt Specify a space with a plus sign (+). Use a pipe character (|) to force a line break. chtt=This+chart+has+a+title| using+two+lines+of+text Optionally, you can also set the title's color and size with chts=<color>,<fontsize> The chart is clipped (only partially visible) if the size specified (with chs) is too small. chtt=Chart+title chts=FF0000,20 Back to top Legend Specify a legend for a chart with chdl=<first data set label>|<n data set label> Parameter Description Example chdl Use chdl together with line colors as described in section Colors. In these examples the first data set is drawn in red, the second in green and the third in blue. chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdl=First|Second|Third chco=ff0000,00ff00,0000ff Back to top Pie chart labels Specify labels with chl= <label 1 value>| ... <label n value> Specify a missing value with two consecutive pipe characters (||). Parameter Description Example chl Labels for a three-dimensional pie chart. chl=May|Jun|Jul|Aug|Sep|Oct Back to top Multiple axis labels Multiple axis labels are available for line charts, bar charts and scatter plots: Axis type Axis labels Axis label positions Axis range Axis styles Axis type Specify multiple axes with chxt= <axis 1>, ... <axis n> Available axes are: x = bottom x-axis t = top x-axis y = left y-axis r = right y-axis Axes are specified by the index they have in the chxt parameter specification. The first axis has an index of 0, the second has an index of 1, and so on. You can specify multiple axes by including x, t, y, or r multiple times. To create multiple axes at least the chxt parameter is required. If other parameters are missing the Chart API uses defaults as described in the following sections. Parameter Description Example chxt This example shows two lower x-axes (x is included twice), left and right y-axes (y and r) plus one top axis (t). Note: Because axis labels are omitted the Chart API assumes a range of 0 to 100 for all axes. chxt=x,y,r,x,t Back to top Axis labels Specify labels with chxl= <axis index>:|<label 1>|<label n>| ... <axis index>:|<label 1>|<label n> The index parameter specifies the index of the axis to which the labels apply. All labels are separated by the pipe character (|). Note: Axis labels must be specified in sequence (0, then 1, then 2, and so on). The first label is placed at the start, the last at the end, others are uniformly spaced in between. Parameter Description Example chxt and chxl This example shows left and right y-axes (y and r) plus two sets of values for the x-axis (x). Note: the pipe character (|) is not required after the last parameter. chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 1:|0|100| 2:|A|B|C| 3:|2005|2006|2007 As above except left y-axis labels (y) are not specified (the 1: index is not included in the chxl parameter). Note: the pipe character (|) is not required after the last parameter. chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| (y-axis omitted) 2:|A|B|C| 3:|2005|2006|2007 Back to top Axis label positions Specify label positions with chxp= <axis index>,<label 1 position>,<label n position>| ... <axis index>,<label 1 position>,<label n position> Use floating point numbers for position values. Separate data for a different axis with a pipe character (|). If labels (chxl) are omitted, label text is taken from the position value. Parameter Description Example chxp This example shows left and right y-axes (y and r) and one x-axis (x). The x-axis (index 0) has neither positions nor labels. The Chart API therefore assumes a range of 0 to 100 and spaces the values evenly. The left y-axis (y) has both labels (max, average, and min) and positions (10,35,75). The right y-axis (r) has only positions (0,1,2,4) so the Chart API uses the positions as the labels. chxt=x,y,r chxl=1:|min|average|max chxp=1,10,35,75|2,0,1,2,4 Back to top Axis range Specify a range with chxr= <axis index>,<start of range>,<end of range>| ... <axis index>,<start of range>,<end of range> Separate multiple axis ranges with the pipe character (|). Parameter Description Example chxr This example shows left and right y-axes (y and r) and one x-axis (x). Each axis has a defined range. Because no labels or positions are specified, values are evenly spaced and taken from the given range. Note: Axis direction is reversed for the left y-axis (r) as the first value (1000) is larger than the last value (0). chxt=x,y,r chxr=0,100,500|1,0,200|2,1000,0 Here only the x-axis is defined (x). This axis has range, labels, and positions so all three sets of values are used. chxt=x chxr=0,100,500 chxl=0:|200|300|400 chxp=0,80,300,400 Back to top Axis styles Specify font size, color, and alignment for axis labels with chxs= <axis index>,<color>,<font size>,<alignment>| ... <axis index>,<color>,<font size>,<alignment> where: <axis index> is the axis index as specified in chxt. <color> is an RRGGBB format hexadecimal number. <font size> is optional. If used this specifies the size in pixels. <alignment> is optional. By default: x-axis labels are centered, left y-axis labels are right aligned, right y-axis labels are left aligned. To specify alignment, use 0 for centered, -1 for left aligned, and 1 for right aligned. Separate multiple values with a pipe character (|). Parameter Description Example chxs Font size, color, and alignment are specified for the second x-axis. chxt=x,y,r,x chxr=2,0,4 chxl=3:|Jan|Feb|Mar|1:|min|average|max chxp=1,10,35,75 chxs=3,0000dd,13 Font size, color, and alignment are specified for both x-axes. chxt=x,y,r,x chxl=3:|Jan|Feb|Mar|| 0:|1st|15th|1st|15th|1st chxs=0,0000dd,10|3,0000dd,12,1 Back to top Styles The following styles are available: Line styles Grid lines Shape markers Horizontal range markers Vertical range markers Fill area markers Line styles Specify chart line styles with chls= <data set 1 line thickness>,<length of line segment>,<length of blank segment>| ... <data set n line thickness>,<length of line segment>,<length of blank segment> Parameter values are floating point numbers, multiple line styles are separated by the pipe character (|). The first line style is applied to the first data set, the second style to the second data set, and so on. Parameter Description Example chls Here the thick dashed line is specified by 3,6,3 and the thinner solid line is specified by 1,1,0. chls=3,6,3|1,1,0 Back to top Grid lines For line charts specify a grid with: chg= <x axis step size>, <y axis step size>, <length of line segment>, <length of blank segment> Parameter values can be integers or have a single decimal place - 10.0 or 10.5 for example. Parameter Description Example chg An example where only step size is defined (20,50) so the Chart API defaults to a dashed grid line. chg=20,50 Here step size (20,50), line segment (1), and blank segment (5) are defined. chg=20,50,1,5 A solid grid is achieved by specifying a blank segment of zero (0). chg=20,50,1,0 Back to top Shape markers For line charts and scatter plots only, specify shape markers for points with: chm= <marker type>,<color>,<data set index>,<data point>,<size>| ... <marker type>,<color>,<data set index>,<data point>,<size> Where: <marker type> is one of the following characters: a represents an arrow. c represents a cross. d represents a diamond. o represents a circle. s represents a square. v represents a vertical line from the x-axis to the data point. V represents a vertical line to the top of the chart. h represents a horizontal line across the chart. x represents an x shape. <color> is an RRGGBB format hexadecimal number. <data set index> the index of the line on which to draw the marker. This is 0 for the first data set, 1 for the second and so on. <data point> is a floating point value that specifies on which data point the marker will be drawn. This is 1 for the first data set, 2 for the second and so on. Specify a fraction to interpolate a marker between two points. <size> is the size of the marker in pixels. Separate multiple markers with the pipe character (|). Parameter Description Example chm Here's an example of the full set of markers. The last marker in the list, h, is the horizontal line that intersects the vertical line, v, at point 7. chm= c,FF0000,0,1.0,20.0| d,80C65A,0,2.0,20.0| a,990066,0,3.0,9.0| o,FF9900,0,4.0,20.0| s,3399CC,0,5.0,10.0| v,BBCCED,0,6.0,1.0| V,3399CC,0,7.0,1.0| x,FFCC33,0,8.0,20.0| h,3399CC,0,7.0,1.0 Here's an example of marker type s on a scatter plot. See the Scatter plot section for details on setting the size of each data point. chm= s,FF0000,1,1.0,10.0 Here's an example using diamonds and circles for two data sets. If two data points occupy the same place (by having the same x and y values), the first point specified is drawn. Here the circle takes precedence over the diamond. chm= o,ff9900,0,1.0,10.0| o,ff9900,0,2.0,10.0| o,ff9900,0,3.0,10.0| d,ff9900,1,1.0,10.0| d,ff9900,1,2.0,10.0| d,ff9900,1,3.0,10.0 Back to top Horizontal range markers For line charts and scatter plots you can specify horizontal range markers with: chm= r,<color>,<any value>,<start point>,<end point>| ... r,<color>,<any value>,<start point>,<end point> Where: <color> is an RRGGBB format hexadecimal number. <any value> is ignored. <start point> is the position on the y-axis at which the range starts where 0.00 is the bottom and 1.00 is the top. <end point> is the position on the y-axis at which the range ends where 0.00 is the bottom and 1.00 is the top. Separate multiple horizontal range markers with the pipe character (|). Parameter Description Example chm=r Range markers can be a single line or a band of color. Here the first marker is a pale blue (E5ECF9) band while the second is a line in black (000000). chm= r,E5ECF9,0,0.75,0.25| r,000000,0,0.1,0.11 Back to top Vertical range markers For line charts and scatter plots you can specify vertical range markers with: chm= R,<color>,<any value>,<start point>,<end point>| ... R,<color>,<any value>,<start point>,<end point> Where: <color> is an RRGGBB format hexadecimal number. <any value> is ignored. <start point> is the position on the x-axis at which the range starts where 0.00 is the left and 1.00 is the right. <end point> is the position on the x-axis at which the range ends where 0.00 is the left and 1.00 is the right. Separate multiple horizontal range markers with the pipe character (|). Parameter Description Example chm=r Range markers can be a single line or a band of color. Here the first marker is a line in black (000000) while the second is a pale blue (E5ECF9) band. chm= R,000000,0,0.1,0.11| R,E5ECF9,0,0.75,0.25 Back to top Fill area Specify a fill area with: chm= b,<color>,<start line index>,<end line index>,<any value>| ... b,<color>,<start line index>,<end line index>,<any value> Where: <color> is an RRGGBB format hexadecimal number. <start line index> is the index of the line at which the fill starts. This is determined by the order in which data sets are specified with chd. The first data set specified has an index of zero (0), the second 1, and so on. <end line index> is the index of the line at which the fill ends. This is determined by the order in which data sets are specified with chd. The first data set specified has an index of zero (0), the second 1, and so on. <any value> is ignored. Separate multiple fill areas with the pipe character (|). Parameter Description Example chm=b Take care to specify the data set with the largest values first: To fill from the top of the chart to the first line include a data set with only the highest data value (9, 100.0, or .. depending on the type of encoding used). To fill from the last line to the bottom of the chart include a data set with only the lowest data value (A, 0, or AA depending on the type of encoding used). The lines themselves are drawn in black using chco as described in section Colors. chd=s: 99, cefhjkqwrlgYcfgc, QSSVXXdkfZUMRTUQ, HJJMOOUbVPKDHKLH, AA chm= b,76A4FB,0,1,0| (light blue) b,224499,1,2,0| (blue) b,FF0000,2,3,0| (red) b,80C65A,3,4,0 (green) chco=000000,000000,000000, 000000,000000 By contrast the first and last data sets (99 and AA) have been removed for this chart. Also, chco is omitted so lines are drawn according to the chart type parameter. Here the parameter is cht=lc so the default line color of yellow is used. chd=s: cefhjkqwrlgYcfgc, QSSVXXdkfZUMRTUQ, HJJMOOUbVPKDHKLH, chm= b,224499,0,1,0| (blue) b,FF0000,1,2,0| (red) b,80C65A,2,3,0 (green) chm=B For a single data series, it is simpler to use chm=B. In this case all the area under the line is filled. chm=B,76A4FB,0,0,0 chd=s:ATSTaVd21981uocA | |
Reviews (0):
×
Thank you!
Will be posted after admin approval.
Upload more
