If you want a simple way to use Google Graphs on your website - please use my xg_graphics.js javascript library. It&';s easy to use. If you do use it, attributions are helpful, links are more helpful, posting articles is most helpful, and donations are always helpful. (Helpful to me and to others who could benefit from this library.) Also, contact me via Stubbart.com and let me know that you want to hear about updates to the code.
xg_graphics.js contains functions for simple Graphics. These functions are explained below. 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 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. Documentation
My xg_graph routines make it simpler to draw a google graph (chart) on a webpage. I chose Google, because it has a small footprint and it&';s fairly easy to understand. However, the documentation will sometimes say things that indicate something works one way. Yet on further reading, you find out, that's no longer the case.
Alternatives to Google Graphs, included Apexcharts, Echarts, and Rgraph. I looked at additional charting libraries. However, those were not free, too complicated, or not robust enough - they didn&';t provide as many graph types. Apexcharts looked very simple to code. Echarts looked ok. I wasn&';t sure about the difficulty with Rgraph. I chose Google because it covered more types of graphs (except for Echarts). Also, I knew it would keep the footprint small. And, it was likely to be the graph library which people were familiar with, if they were familiar with any.
Using Google Graphs, you can create all sorts of graphs: annotation, area, bar, bubble, calendar, candlestick, column, combo, diff, donut, gantt, geo, gauge, histograms, interval, line, map (uses satellite images rather than line drawings as geo does), org, pie, sankey diagram, scatter, stepped area, table, timelines, tree map, trendlines, waterfall, and word trees. I coded for the most popular types of graphs.
To create a graph, first, you&';ll need to add this code to your <head> section.
<script src="https://www.gstatic.com/charts/loader.js"></script> - this is Google&';s Graph routine loader
<script src="https://stubbart.com/computer_consulting/code/xg_graphics.js"></script><script>xg_graphics_init()</script> after that.
In <body> add a div with an id, where you want the graph to go.
<script>xg_graph_google_init(graph_type)</script> before you call xg_graph_google_draw, which draws the graph.
xg_graph_google_init(graph_type) sets the following global variables:xg_graph_type_array - the current set of graph types that you can use; xg_graph_3d - defaults to true, only applies to pie charts; xg_graph_background_color - defaults to white; xg_graph_font - defaults to Arial; xg_graph_colors - an array of the default colors that pie, bar, and column charts use; xg_graph_stacked - false - only applies to bar and column charts.graph_type is donut, xg_graph_3d is false (Google doesn&';t draw 3d donut charts.), xg_graph_pie_hole='medium'graph_type is pie, xg_graph_3d is true, xg_graph_pie_hole='none' (if there&';s a hole in the pie, it&';s a donut). xg_graph_pie_hole can be none, small, medium, large, xl.xg_graph_pie_slice_visibility_threshold=0 (if you want to not show small slices, increase this value, they will get added to the Other slice. xg_graph_pie_slice_other_label='Other'. xg_graph_pie_slice_other_color='#cccccc' (a gray color).graph_type is bar or column, the data array contains a label and one or more values. If there are multiple values, the bars or columns for these extra values will show beside the bar/column for the first value (series). If there are multiple values and xg_graph_stacked is true, the bars or columns for these extra values will be stacked on top of the bar/column for the first value (stacked). Each series or stack must have the same number of elements in the array. Make the values 0, if they don&';t exist or are missing.graph_type is line, a line chart will be drawn. Line charts can contain lines, or point, or both. xg_graph_line_curve_type is n/y, defaults to n. xg_graph_line_line_dash_style is an array of dash width,dash gap. [1,1] or [2,2] ... [5,5], [6,2], [7,2] ... make good dashed lines. xg_graph_line_line_width is in px and defaults to 2. If 0, points will be diplayed, rather than lines. xg_graph_line_point_shape defaults to circle. It can be circle, triangle, square, diamond, star, or pentagon. xg_graph_line_point_size defaults to 7, which makes the points barely bigger than the line. xg_graph_line_points_visible is true/false, defaults to false.graph_type is table, xg_graph_table_allow_html=true, xg_graph_table_alternating_row_style=true, xg_graph_table_show_row_number=true. xg_graph_table_alternating_row_style=true (default) colors every other row a light gray.graph_type is geo, xg_graph_geo_dataless_region_color='#F5F5F5' (white smoke), xg_graph_geo_default_color='#267114' (a dark green). Dataless means it&';s in the data_array, but it&';s zero. Default means it&';s not in the data_array.xg_graph_geo_region can also be 3-digit continent or sub-continent code, a 2-character country code, or a 5-character US State (or Territory) code. Also, you can spell out country and state names.graph_type is gauge, xg_graph_gauge_min_max=[0,100]
After you call xg_graph_goole_init(graph_type), override any global variables that you need to override.data_array=[['Type','Number'],['apple',1],['pecan',0],['black bottom',10],['blueberry',5],['peach',20],['banana cream',25]] for example. The first row is labels, which is meaningless for a pie graph.xg_graph_google_apply_colors(data_array,color_array).xg_graph_google_draw(title,data_array,element)
xg_graph_google_init sets xg_graph_color_scheme to default.xg_graph_google_apply_colors(data_array,color_array). If you specify fewer colors than the number of data rows (not counting labels), the colors will repeat.
xg_graph_pie_slice_other_color sets the color for the Other slice.
xg_graph_google_init to primary. To change only the series, set xg_graph_google_init to series. To change both, first change xg_graph_google_init to primary and call xg_graph_google_apply_colors(data_array,color_array), then change xg_graph_google_init to primary+series and call xg_graph_google_apply_colors(data_array,color_array) again.
xg_graph_table_alternating_row_style=true every other row is colored a light gray. To override the coloring, set the following css classes: xg_table_header_color, xg_table_row_color, xg_table_alternating_row_color. <style>.xg_table_header_color{background-color:skyblue} .xg_table_row_color{background-color:azure} .xg_table_alternating_row_color{background-color:azure}</style>. If xg_graph_table_alternating_row_style=true, set xg_table_alternating_row_color class and leave xg_table_row_color class to {}. The header row background color is a gradient of white and whatever background color you use. These css classes can contain more style elements than just background-color. Default header background color is a white-lavender gradient. There is no default background color for rows when xg_graph_table_alternating_row_style=false. When xg_graph_table_alternating_row_style=true the default alternating row background color is snow. There is no default background for non-alternating rows. Call xg_graph_google_apply_colors('','') to show colors based on these class names, rather than the default colors.
xg_graph_geo_dataless_region_color colors regions in data_array where the value is 0. xg_graph_geo_default_color colors regions which are not in data_array. To change the gradient, call xg_graph_google_apply_colors(data_array,color_array). The gradient will be made up of all the colors in the array. Colors are not repeated. It is much better to use an svg graph than a geo graph for political or similar map graphs. If color_array contains as many different colors as there are locations in data_array and each location has a different value, each country will be colored using a different color from the color_array. If there are fewer colors and xg_graph_color_scheme is specific, colors will be repeated. Then, if each location has a different value, each country will be colored using one of the colors in color_array. If values repeat, in either case, some locations may be colored using a color in the color gradient made by the colors in color_array.
color_array=[['color1',min1,max1],['color2',min2,max2],['color3',min3,max3]]. All three colors must be specified. If you don&';t want a particular color to show on the gauge, make its min and max=-1.
For the graph, you will need a title (optional), a data array, and the element where you want the graph drawn - typically a <div>. If you want to specify the graph size, specify that in the style of the div. Google won&';t pick it up from the width and height attributes, only from width and height in the style (or class).
If you want your title styled, centered, etc. or if you want to have a subtitle. You&';ll need to specify them as separate elements above your div, and pass title=''. If you want a title on a Table or Geo Graph, you&';ll need to specify it this way. If you want to specify that an amount is a currency or to state something similar, I suggest adding a note to that effect below the div. Your html code might look like this:
<div>
<h2>title</h2>
<h3>subtitle</h3>
<div id="graph"></div>
<p style="font-size;smallest">notes</p>
</div>
<script>x_graph_google('',data_array,'graph')</script>