This uses the new %{table}
option for a formatted tooltip. The code to implement it
can get quite hairy (three nested arrays) so pay close attention when writing it.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.vprogress.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="120" height="400">[No canvas support]</canvas> <style> .RGraph_tooltip h2 { margin: 5px; font-style: italic; } .RGraph_tooltip table { border-collapse: collapse; font-family: Verdana; } .RGraph_tooltip thead th { font-style: italic; } .RGraph_tooltip th, .RGraph_tooltip td { padding: 5px; border: 1px solid #ccc; } .RGraph_tooltip td:nth-child(1){ font-style: italic; } .RGraph_tooltip tr:nth-child(2n+2) td:nth-child(1n+2){ background-color: #eee; } .RGraph_tooltip tr:nth-child(2n+1) td:nth-child(1n+2){ background-color: #ddd; } </style>This is the code that generates the chart: