This is a demo of a Line chart using the trace effect and with no vertical gridlines. The chart uses the CSV reader that's bundled with RGraph amd the CSV data is part of the page - in a DIV tag. The tooltips are significantly customised and the range of the axes is smaller than normal by making use of the yaxisScaleMin and yaxisScaleMax properties.
This goes in the documents header:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../libraries/RGraph.svg.common.core.js" ></script> <script src="../libraries/RGraph.svg.common.csv.js" ></script> <script src="../libraries/RGraph.svg.common.tooltips.js" ></script> <script src="../libraries/RGraph.svg.line.js" ></script>Put this where you want the chart to show up:
<div style="display: none" id="myData"> 2016-09-30,72.228 2016-09-29,75.373 2016-09-28,75.14 2016-09-27,73.519 2016-09-26,73.219 2016-09-23,75.502 2016-09-22,78.25 2016-09-21,77.118 2016-09-20,74.233 2016-09-19,76.608 2016-09-16,78.078 2016-09-15,83.409 2016-09-14,83.342 2016-09-13,83.671 2016-09-12,83.281 2016-09-09,84.24 2016-09-08,83.834 2016-09-07,83.035 2016-09-06,82.077 2016-09-05,81.682 2016-09-02,79.55 2016-09-01,78.03 2016-08-31,78.036 2016-08-30,77.958 2016-08-29,77.967 2016-08-26,77.86 2016-08-25,77.855 2016-08-24,77.795 2016-08-23,77.524 2016-08-22,77.416 2016-08-19,77.535 2016-08-18,77.498 2016-08-17,77.573 2016-08-16,77.887 2016-08-15,77.876 2016-08-12,77.816 2016-08-11,77.847 2016-08-10,77.905 2016-08-09,78.03 2016-08-08,78.095 2016-08-05,77.879 2016-08-04,77.794 2016-08-03,77.444 2016-08-02,78.34 2016-08-01,79.371 2016-07-29,78.735 2016-07-28,78.738 2016-07-27,78.603 2016-07-26,77.973 2016-07-25,78.777 2016-07-22,78.599 2016-07-21,78.339 2016-07-20,78.129 2016-07-19,78.057 2016-07-18,78.507 2016-07-15,78.019 2016-07-14,77.906 2016-07-13,77.015 2016-07-12,76.714 2016-07-11,75.837 2016-07-08,75.584 2016-07-07,75.753 2016-07-06,76.146 2016-07-05,79.625 2016-07-04,81.884 2016-07-01,81.539 2016-06-30,80.468 2016-06-29,80.398 2016-06-28,79.024 2016-06-27,77.545 2016-06-24,79.637 2016-06-23,83.707 2016-06-22,83.095 2016-06-21,82.538 2016-06-20,82.548 2016-06-17,80.737 2016-06-16,79.625 2016-06-15,80.357 2016-06-14,79.927 2016-06-13,81.708 2016-06-10,83.283 2016-06-09,83.453 2016-06-08,83.31 2016-06-07,83.066 2016-06-06,82.875 2016-06-03,83.024 2016-06-02,83.101 2016-06-01,83.148 2016-05-31,83.595 2016-05-30,83.515 2016-05-27,83.584 2016-05-26,83.606 2016-05-25,83.047 2016-05-24,82.521 2016-05-23,82.517 2016-05-20,82.37 2016-05-19,82.121 2016-05-18,82.153 2016-05-17,82.096 2016-05-16,81.698 2016-05-13,81.787 2016-05-12,81.815 2016-05-11,81.843 2016-05-10,81.935 2016-05-09,81.755 2016-05-06,82.009 2016-05-05,82.435 2016-05-04,82.438 2016-05-03,83.076 2016-05-02,83.813 2016-04-29,83.83 2016-04-28,83.925 2016-04-27,82.997 2016-04-26,82.88 2016-04-25,83.119 2016-04-22,83.594 2016-04-21,83.215 2016-04-20,82.004 2016-04-19,81.584 2016-04-18,80.887 2016-04-15,80.887 2016-04-14,80.456 2016-04-13,79.215 2016-04-12,78.75 2016-04-11,79.187 2016-04-08,79.787 2016-04-07,80.214 2016-04-06,81.002 2016-04-05,81.286 2016-04-04,81.487 2016-04-01,81.291 2016-03-31,81.508 2016-03-30,81.513 2016-03-29,81.471 2016-03-24,82.066 2016-03-23,82.45 2016-03-22,82.429 2016-03-21,83.17 2016-03-18,83.09 2016-03-17,82.895 2016-03-16,82.15 2016-03-15,85.628 2016-03-14,87.119 2016-03-11,86.616 2016-03-10,82.011 2016-03-09,80.149 2016-03-08,80.239 2016-03-07,80.203 2016-03-04,80.139 2016-03-03,80.042 2016-03-02,80.016 2016-03-01,79.128 2016-02-29,77.922 2016-02-26,77.913 2016-02-25,76.769 2016-02-24,76.366 2016-02-23,78.098 2016-02-22,78.629 2016-02-19,77.767 2016-02-18,78.586 2016-02-17,81.145 2016-02-16,79.649 2016-02-15,77.387 2016-02-12,74.087 2016-02-11,72.294 2016-02-10,76.319 2016-02-09,71.094 2016-02-08,73.631 2016-02-05,76.67 2016-02-04,77.083 2016-02-03,80.145 2016-02-02,82.35 2016-02-01,84.596 2016-01-29,85.617 2016-01-28,88.318 2016-01-27,87.854 2016-01-26,87.58 2016-01-25,88.205 2016-01-22,88.451 2016-01-21,86.992 2016-01-20,88.287 2016-01-19,89.82 2016-01-18,89.345 2016-01-15,90.26 2016-01-14,90.893 2016-01-13,91.523 2016-01-12,91.477 2016-01-11,91.858 2016-01-08,91.991 2016-01-07,91.595 2016-01-06,92.364 2016-01-05,92.736 2016-01-04,92.751 2015-12-31,93.261 2015-12-30,93.239 2015-12-29,93.161 2015-12-28,93.325 2015-12-24,93.232 2015-12-23,93.119 2015-12-22,93.198 2015-12-21,93.334 2015-12-18,93.364 2015-12-17,93.491 2015-12-16,92.964 2015-12-15,92.703 2015-12-14,91.941 2015-12-11,92.898 2015-12-10,93.35 2015-12-09,93.529 2015-12-08,93.834 2015-12-07,93.982 2015-12-04,93.839 2015-12-03,93.977 2015-12-02,94.009 2015-12-01,93.852 2015-11-30,93.764 2015-11-27,93.726 2015-11-26,93.739 2015-11-25,93.694 2015-11-24,93.975 2015-11-23,94.518 2015-11-20,94.597 2015-11-19,94.655 2015-11-18,94.465 2015-11-17,94.251 2015-11-16,93.895 2015-11-13,94.129 2015-11-12,94.199 2015-11-11,94.174 2015-11-10,94.171 2015-11-09,94.185 2015-11-06,94.275 2015-11-05,94.35 2015-11-04,94.35 2015-11-03,93.937 2015-11-02,93.658 2015-10-30,93.698 2015-10-29,94.846 2015-10-28,95.274 2015-10-27,95.315 2015-10-26,95.508 2015-10-23,95.72 2015-10-22,94.759 2015-10-21,94.528 2015-10-20,94.422 2015-10-19,94.313 2015-10-16,94.076 2015-10-15,93.937 2015-10-14,93.747 2015-10-13,94.233 2015-10-12,94.795 2015-10-09,94.789 2015-10-08,94.459 2015-10-07,96.663 2015-10-06,95.679 2015-10-05,95.363 2015-10-02,94.976 2015-10-01,95.011 2015-09-30,95 2015-09-29,94.849 2015-09-28,96.001 2015-09-25,96.879 2015-09-24,96.891 2015-09-23,97.401 2015-09-22,97.678 2015-09-21,98.148 2015-09-18,98.364 2015-09-17,98.148 2015-09-16,98.042 2015-09-15,97.996 2015-09-14,98.218 2015-09-11,98.249 2015-09-10,98.262 2015-09-09,98.574 2015-09-08,98.176 2015-09-07,98.058 2015-09-04,98.085 2015-09-03,98.29 2015-09-02,98.133 2015-09-01,97.984 2015-08-31,98.213 2015-08-28,98.245 2015-08-27,98.312 2015-08-26,97.499 2015-08-25,97.385 2015-08-24,96.624 2015-08-21,97.717 2015-08-20,98.203 2015-08-19,98.479 2015-08-18,98.605 2015-08-17,98.687 2015-08-14,98.87 2015-08-13,99.224 2015-08-12,99.195 2015-08-11,99.655 2015-08-10,99.805 2015-08-07,99.858 2015-08-06,99.928 2015-08-05,100.011 2015-08-04,100.005 2015-08-03,100.459 2015-07-31,100.477 2015-07-30,100.302 2015-07-29,100.354 2015-07-28,100.267 2015-07-27,100.176 2015-07-24,100.627 2015-07-23,100.764 2015-07-22,100.759 2015-07-21,101.059 2015-07-20,101.31 2015-07-17,101.178 2015-07-16,100.833 2015-07-15,100.425 2015-07-14,100.151 2015-07-13,100.42 2015-07-10,99.185 2015-07-09,98.337 2015-07-08,97.656 2015-07-07,97.727 2015-07-06,97.959 2015-07-03,98.735 2015-07-02,98.752 2015-07-01,98.506 2015-06-30,97.979 2015-06-29,97.994 2015-06-26,99.174 2015-06-25,99.045 2015-06-24,99.133 2015-06-23,99.268 2015-06-22,98.401 2015-06-19,97.181 2015-06-18,96.982 2015-06-17,97.17 2015-06-16,97.241 2015-06-15,97.394 2015-06-12,98.412 2015-06-11,98.895 2015-06-10,98.609 2015-06-09,99.114 2015-06-08,99.447 2015-06-05,99.289 2015-06-04,99.673 2015-06-03,99.925 2015-06-02,100.283 2015-06-01,100.55 2015-05-29,100.595 2015-05-28,100.829 2015-05-27,100.88 2015-05-26,100.785 2015-05-25,101.137 2015-05-22,101.133 2015-05-21,101.141 2015-05-20,101.278 2015-05-19,101.308 2015-05-18,100.958 2015-05-15,100.982 2015-05-14,100.888 2015-05-13,100.995 2015-05-12,100.705 2015-05-11,101.248 2015-05-08,101.089 2015-05-07,100.482 2015-05-06,101.337 2015-05-05,101.598 2015-05-04,101.888 2015-04-30,101.66 2015-04-29,101.7 2015-04-28,101.778 2015-04-27,101.589 2015-04-24,101.215 2015-04-23,101.075 2015-04-22,100.935 2015-04-21,100.875 2015-04-20,100.941 2015-04-17,100.64 2015-04-16,100.968 2015-04-15,101.427 2015-04-14,101.415 2015-04-13,101.931 2015-04-10,102.003 2015-04-09,101.905 2015-04-08,101.777 2015-04-07,101.617 2015-04-02,101.236 2015-04-01,101.225 2015-03-31,101.258 2015-03-30,101.048 2015-03-27,100.941 2015-03-26,100.868 2015-03-25,101.003 2015-03-24,100.921 2015-03-23,100.996 2015-03-20,101.119 2015-03-19,100.891 2015-03-18,100.71 2015-03-17,100.888 2015-03-16,101.348 2015-03-13,101.573 2015-03-12,101.571 2015-03-11,101.301 2015-03-10,101.161 2015-03-09,101.618 2015-03-06,101.926 2015-03-05,101.446 2015-03-04,100.831 2015-03-03,101.027 2015-03-02,101.446 2015-02-27,101.376 2015-02-26,100.93 2015-02-25,100.703 2015-02-24,100.667 2015-02-23,100.396 2015-02-20,100.243 2015-02-19,100.057 2015-02-18,99.979 2015-02-17,99.772 2015-02-16,99.897 2015-02-13,99.992 2015-02-12,99.935 2015-02-11,99.832 2015-02-10,100.261 2015-02-09,100.3 2015-02-06,100.668 2015-02-05,100.342 2015-02-04,100.218 2015-02-03,99.957 2015-02-02,99.343 2015-01-30,99.698 2015-01-29,99.741 2015-01-28,100.035 2015-01-27,100.033 2015-01-26,100.255 2015-01-23,100.248 2015-01-22,99.135 2015-01-21,98.317 2015-01-20,97.881 2015-01-19,97.436 2015-01-16,97.367 2015-01-15,97.827 2015-01-14,98.055 2015-01-13,97.933 2015-01-12,97.664 2015-01-09,97.717 2015-01-08,97.648 2015-01-07,97.263 2015-01-06,96.701 2015-01-05,97.049 2015-01-02,97.25 2014-12-31,97.078 2014-12-30,97.196 2014-12-29,97.09 2014-12-24,97.074 2014-12-23,97.056 2014-12-22,97.054 2014-12-19,96.824 2014-12-18,96.367 2014-12-17,95.161 2014-12-16,94.722 2014-12-15,95.735 2014-12-12,96.102 2014-12-11,97.146 2014-12-10,97.476 2014-12-09,98.214 2014-12-08,98.644 2014-12-05,98.637 2014-12-04,98.017 2014-12-03,97.785 2014-12-02,97.593 2014-12-01,97.329 2014-11-28,97.456 2014-11-27,97.325 2014-11-26,97.258 2014-11-25,97.247 2014-11-24,97.099 2014-11-21,96.703 2014-11-20,96.185 2014-11-19,96.487 2014-11-18,96.697 2014-11-17,97.253 2014-11-14,97.494 2014-11-13,97.748 2014-11-12,97.732 2014-11-11,97.875 2014-11-10,97.731 2014-11-07,97.664 2014-11-06,97.798 2014-11-05,97.745 2014-11-04,97.541 2014-11-03,97.634 2014-10-31,97.38 2014-10-30,96.717 2014-10-29,97.139 2014-10-28,97.276 2014-10-27,97.236 2014-10-24,97.516 2014-10-23,97.158 2014-10-22,96.947 2014-10-21,96.442 2014-10-20,95.752 2014-10-17,95.792 2014-10-16,94.826 2014-10-15,95.169 2014-10-14,96.034 2014-10-13,95.873 2014-10-10,96.201 2014-10-09,96.932 2014-10-08,97.018 2014-10-07,97.677 2014-10-06,98.383 2014-10-03,97.753 2014-10-02,96.782 2014-10-01,97.055 2014-09-30,96.61 2014-09-29,96.261 2014-09-26,97.55 2014-09-25,97.863 2014-09-24,98.085 2014-09-23,98.552 2014-09-22,99.285 2014-09-19,99.575 2014-09-18,99.345 2014-09-17,98.59 2014-09-16,98.118 2014-09-15,98.222 2014-09-12,98.486 2014-09-11,98.836 2014-09-10,98.165 2014-09-09,98.287 2014-09-08,98.334 2014-09-05,98.497 2014-09-04,98.604 2014-09-03,98.541 2014-09-02,99.238 2014-09-01,99.426 2014-08-29,99.413 2014-08-28,99.49 2014-08-27,100.136 2014-08-26,100.266 2014-08-25,99.566 2014-08-22,99.282 2014-08-21,99.172 2014-08-20,99.225 2014-08-19,99.844 2014-08-18,99.847 2014-08-15,99.692 2014-08-14,99.655 2014-08-13,99.311 2014-08-12,98.394 2014-08-11,97.873 2014-08-08,96.085 2014-08-07,96.735 2014-08-06,96.919 2014-08-05,98.296 2014-08-04,98.712 2014-08-01,98.104 2014-07-31,99.427 2014-07-30,100.731 2014-07-29,100.835 2014-07-28,101.062 2014-07-25,101.527 2014-07-24,101.75 2014-07-23,101.649 2014-07-22,101.736 2014-07-21,101.076 2014-07-18,101.066 2014-07-17,101.361 2014-07-16,101.448 2014-07-15,101.142 2014-07-14,101.262 2014-07-11,100.98 2014-07-10,100.304 2014-07-09,100.849 2014-07-08,101.322 2014-07-07,102.098 2014-07-04,102.07 2014-07-03,102.069 2014-07-02,101.742 2014-07-01,101.162 2014-06-30,100.639 2014-06-27,100.979 2014-06-26,101.5 2014-06-25,101.841 2014-06-24,102.256 2014-06-23,102.294 2014-06-20,102.437 2014-06-19,102.578 2014-06-18,101.977 2014-06-17,101.869 2014-06-16,101.606 2014-06-13,102.282 2014-06-12,102.977 2014-06-11,103.306 2014-06-10,104.231 2014-06-09,104.496 2014-06-06,104.063 2014-06-05,102.243 2014-06-04,101.623 2014-06-03,101.604 2014-06-02,101.599 2014-05-30,101.555 2014-05-29,101.556 2014-05-28,101.551 2014-05-27,101.281 2014-05-26,100.527 2014-05-23,100.295 2014-05-22,100.173 2014-05-21,99.98 </div> <div style="width: 950px; height: 250px" id="chart-container"></div>This is the code that generates the chart:
<script> new RGraph.CSV('id:myData', function (csv) { var data = csv.getCol(1), tooltips = csv.getCol(0) data = RGraph.SVG.arrayReverse(data); tooltips = RGraph.SVG.arrayReverse(tooltips); tooltips.forEach(function (v,k,arr) { var d = new Date(RGraph.SVG.parseDate(v)); var month = d.getMonth(); var date = d.getDate(); var year = d.getFullYear(); var months = [ 'January','February','March', 'April','May','June', 'July','August','September', 'October','November','December', ]; if (date === 1 || date === 21 || date === 31) {var append = 'st'} else if (date === 2 || date === 22) {var append = 'nd'} else if (date === 3 || date === 23) {var append = 'rd'} else {var append = 'th'} arr[k] = '<i>Last price:</i><br />{1} {2}{5} {3}: <b>{4}</b>'.format( months[month], date, year, data[k], append ); RGraph.SVG.tooltips.style.textAlign = 'left'; RGraph.SVG.tooltips.style.backgroundColor = 'rgba(255,255,255,0.75)'; RGraph.SVG.tooltips.style.border = '3px solid blue'; }) new RGraph.SVG.Line({ id: 'chart-container', data: data, options: { linewidth: 2, backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridHlinesCount: 4, yaxis: false, xaxis:false, yaxisScaleMax: 110, yaxisScaleMin: 70, yaxisLabelsCount: 4, marginLeft: 50, marginRight: 50, colors: ['#7CB5EC'], title: 'Deutsche Bank\'s coco bonds are in a slump', tooltips: tooltips, xaxisLabels: [ '','','Jul `14', '','','Oct `14', '','','Jan `15', '','','Apr `15', '','','Jul `15', '','','Oct `15', '','','Jan `16', '','','Apr `16', '','','Jul `16', '','','Sep `16' ] } }).trace(); }); </script>