A black and gray SVG Line chart
A straightforward Line chart
that's showing UFO sightings
over the past century. As you can see - people's creativity
is clearly on the increase - particularly since the 1990s!
The background grid is customised with white and an increased number of vertical lines.
The x-axis
labels are just years, the axes have been
turned off and the tickmarks for the line are filled circles.
On the whole, it's a pretty regular Line chart
. The
responsive
configuration just shrinks the size of the chart
and reduces the size of the linewidth
and the
tickmarksSize
options.
This goes in the documents header:
<script src="../libraries/RGraph.svg.common.core.js" ></script> <script src="../libraries/RGraph.svg.line.js" ></script>Put this where you want the chart to show up:
<div style="float: right"> <div style="width: 600px; height: 250px" id="chart-container"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag:
<script> // A Line chart that shows the increase over the years // of UFO sightings. The background color and the grid // have been color inverted with the grid being // white and the background color being gray. The axes // have been disabled and the text is slightly smaller // than the default. new RGraph.SVG.Line({ id: 'chart-container', data: [0,2,3,2,3,6,5,6,10,42,46], options: { backgroundColor: '#eee', backgroundGridColor: 'white', backgroundGridVlinesCount: 20, backgroundGridLinewidth: 2, colors: ['black'], tickmarksStyle: 'filledcircle', xaxis: false, yaxis: false, yaxisScaleUnitsPost: 'k', textSize: 10, xaxisLabels: ['1910','1920','1930','1940','1950','1960','1970','1980','1990','2000','2010'], // Add some responsive capability responsive: [ {maxWidth: null,width:600,height:250,parentCss: {'float':'right',textAlign:'none'},options:{xaxisLabelsAngle: 0,linewidth:2,tickmarksSize:6}}, {maxWidth: 850, width:400,height:200,parentCss: {'float':'none',textAlign:'center'}, options:{xaxisLabelsAngle: 45,linewidth:2,tickmarksSize:5}} ] } // Use the trace() animation to show the chart }).trace(); </script>