If you want your website to be more expressive - use svg maps, google graphs, and draw simple shapes - please use my xg_graphics.js javascript library. If you do use xg_graphics.js, etc., attributions are helpful, links are more helpful, posting articles is most helpful, and donations (link at top of page) are always helpful. (Helpful to me and to others who could benefit from this library. Donations offset my webhosting and usage costs which go up when more people use my code.)xg_graphics.js contains several functions which are explained below. You have two options for using xg_graphics.js. You can download files to your desktop and upload them to your website, or you can link directly to my code.<script src="yourpath/xg_graphics.js"></script> and <link rel="stylesheet" type="text/css" href="yourpath/xg_graphics.css" /> in the is where you upload these to on your website.<head> of your html. yourpathhttps://stubbart.com/computer_consulting/code/ in place of yourpath/ above.
Files to Download:
If you&';re using Google Graphs, point to the Chart Loader. <script src="https://www.gstatic.com/charts/loader.js"></script> - this is Google&';s Graph routine loader. It is needed for xg_google_graph routines. xg_graphics.js is used in conjunction with my x_press.js javascript library. That library contains several functions to make your website more expressive. See that x_press documentation here. These libraries are quite small and will load fast.
xg_svg routines apply coloring and titles to svgs, usually to svg maps. This is one method of drawing a graph.
xg_svg routines are xg_graphics_init, xg_svg_modify, xg_svg_group_init, xg_svg_shapes_update.
<svg>, <g>, and <path>. Several websites sell svg maps. Sometimes you can get one for free, provided you give an attribution. One of those sites requires three attribution links, plus a logo link. The US map on this page is available for free on Wikimedia. This particular map doesn&';t require attribution. And it can be used commercially. Be sure to check the License for whatever svg map you use.
src attribute of an img tag. You can paste it into your html page. It can be referenced by an object, embed, or iframe tag. If it&';s part of an img tag, you can&';t manipulate it. You can do that with the other methods. It will draw the fastest if you paste it into your html code. The one website I found which talked about all 5 methods, said not to use the last two, and to only use the object tag when necessary. So, I only wrote my svg routines for inline (pasted into html) svgs. When you paste your svg into your HTML, remove the xml tag at the beginning.
Here&';s what you need to know about svg to use my routines. svg is enclosed in an This svg specified the width and height. However, that width and height are the width and height relative to the coordinates of the svg. They are not the width and height relative to the screen.
The information is collected in arrays.
Technically speaking, title and text are children of the group or the shape. But I&';m treating them as though they’re attributes. I think that keeps things simpler.
Now that you&';ve collected all of the information for this group, it&';s ready for you to change it. If you want to update the group information, you can do that by calling svg tag. There can be groups. This is the g tag. And there are path tags. Those are the main tags. Each of these tags can have a title and/or text tag.
svg tag is the entire svg, though it is possible to have an svg within an svg. g tag groups paths together. path tag is a drawing. In the case of this svg, path is a &n-; state.
xg_svg_modify(id,[[attribute,value],...]) modifies an svg element. Typically, it modifies the svg, an svg group (g), or an svg path. Just pass the element id, the attribute, and the new value.
'class', value is the new class.
'color' or 'fill'. value is a color value in hex, rgb, etc. formats – just like in CSS.
'transparency', 'opacity', or 'fill-opacity'. value is the transparency or opacity percent.
'size'. value is the screen width of the svg.
viewBox="top left width height". Copy the width and height to the viewBox width and height. Make the viewBox top and left = 0. Replace the width with the new width. Calculate the height to be new width / original width * original height.
xg_svg_group_init(group) returns arrays which contain information from an svg group.xg_svg_group_array holds information for the group. xg_svg_shape_xxx_array holds information for the shapes which are children of that group.xxx=id contains the id.xxx=tagname contains the tag – g for group, or the shape - path, circle, ellipse, line, polyline, polygon, or rect. These shapes are contained in the global array xg_svg_shapes.xxx=classlist contains the list of classes. If there&';s more than one class, this is an array.xxx=bgcolor contains the background color. If the background color is specified by a style or class, it is returned as an rgb color otherwise it is returned as specified.xxx=transparency contains the transparency. If you prefer working with opacity, subtract the opacity from 1.xxx=title contains the title.xxx=text contains the text.xg_svg_modify. To change the shape information, you&';ll call xg_svg_shapes_update.
xg_svg_shapes_update(group,attr_array) updates attribute values in an svg group.xg_svg_shape_xxx_array_update.xg_svg_shape_xxx_array_update to xg_svg_shape_xxx_array.
To figure out what the index is, all you need is the id of the shape:var index_to_update=xg_svg_shape_ids_array.indexOf(id)indexOf is case-sensitive.xg_svg_shape_bgcolor_array_update[index_to_update]='blue'xg_svg_shape_bgcolor_array_update[xg_svg_shape_ids_array.indexOf('svg_oh')]='blue'
Next, you need to specify which attributes you want to update, by passing an array of attributes:['classlist', 'bgcolor', 'transparency', 'title', 'text']bgcolor.xg_svg_shapes_update('svg_state',['bgcolor'])
Both the svg and xg_svg_shape_xxx_array are updated. If you want to make more updates, follow the same procedure. xg_svg_shape_xxx_array and xg_svg_shape_xxx_array_update are from the last time xg_svg_group_init or xg_svg_shapes_update was called.
xg_svg_shapes_update_bgcolors(color_array) updates the colors in xg_svg_shape_bgcolor_array from color_array.
You just want to color every shape. The first way you may want to do that is to just assign each shape a different random background color.x_color_random_array_init(allowgray, allowblack, allowwhite, tooclose). allowgray, allowblack, and allowwhite and tooclose default to 16. x_color_random_array_init generates an array of up to 1000 random colors - x_color_random_array.x_color_random_array_init(48,64,16,24). This will generate an array of about 300 random colors (perhaps less). The lower these numbers are, the more colors you&';ll get in your array. In this instance, I don&';t care so much for gray. I like black, just not for this map. white is ok for this map. I don&';t want colors which are too close to each other.tooclose of 32, returns only about 175 random colors because I&';ve said that I don&';t want the colors in the array to be too close to each other. allowwhite in this case doesn’t really matter. You could make it 0 and probably still not get anything that&';s close to white. That&';s because it&';s less than tooclose. The same would be true if allowgray or allowblack were < tooclose.xg_svg_shapes_update_bgcolors(x_color_random_array). This updates xg_shape_bgcolor_array_update. Then call xg_svg_shapes_update('svg_state',['bgcolor']).
The next way you may want to color every shape, is with an static array of colors. Suppose you want to use the primary colors other than gray, black, or white. x_color_primary_18_array contains 18 primary colors. Minus gray, black, and white give us 15. Your svg probably contains more than 15 colors, so you need to extend or repeat the primary color array.[0], gray is [16], white is [17]. exclude_indexes_array=[0,16,17].
Your code follows:var color_primary_100_array= x_array_repeat(x_color_primary_18_array, 100, [0,16,17]).
.svg){kind=link}
x_who_won(high_low_wins,score_array, result_array). If high score wins, high_low_wins='high'. Otherwise, it equals 'low'. score_array contains the scores. result_array contains the corresponding color for each person or team.
Then update that particular index in x_svg_shape_bgcolor_array_update. And call xg_svg_shapes_update(group,['bgcolor']).
You might want to update shape colors based on a range. For instance, if the value < 50, color is red. If < 75, color is yellow, else it&';s green. Call x=x_array_find_in_range(value_in, range_array, return_values_array). range_array=[0,50,75] – the starting value of each range. return_values_array=['red', 'yellow', 'green']
Then update that particular index in x_svg_shape_bgcolor_array_update. And call xg_svg_shapes_update(group,['color']).
Note: The only way I&';ve found to color the DC circle is to add the class .dc to the top of the svg: e.g. .dc{fill:#40E0D0}