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 yaxisMin and yaxisMax 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,
yaxisMax: 110,
yaxisMin: 70,
yaxisLabelsCount: 4,
gutterLeft: 50,
gutterRight: 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>