← Back to branch summary

~popey/stock-ticker-mobile-app/fix-1288885

« back to all changes in this revision

Viewing changes to javascript/graph.js

  • Committer: Robert Steckroth
  • Date: 2013-07-02 15:37:23 UTC
  • Revision ID: robertsteckroth@gmail.com-20130702153723-yfps89fsaqkasg9a
Fix to graph date printing. Update to design.

Show diffs side-by-side

added added

removed removed

Lines of Context:
javascript/graph.js
105
105
        var dayInfo = []
106
106
        var graphBottom = this.graph.options.bottomPadding+((this.graph.ctx.measureText('M').width+5)*2)
107
107
        var curr = Math.round((mX-this.graph.options.leftPadding) / this.space_average)
108
 
        if ( curr > this.past_len-1 )
109
 
            curr = this.past_len-1
 
108
        if ( curr > this.past_len )
 
109
            curr = this.past_len
110
110
        else if ( curr < 0 )
111
111
            curr = 0
112
112
 
142
142
    sn.max_close_low = 10000000 // Higher than any stock cam
143
143
    this.min_value = 10000000 // This is a "this" so it can be used in the getDay member function
144
144
 
 
145
 
145
146
    for ( var x = this.past_len; x >= 0;  x-- ) {
146
147
          sn.day_volume = parseFloat(this.listModel.get(x).volume)
147
148
          sn.day_close = parseFloat(this.listModel.get(x).close)
196
197
    sn.day_high = 0 //Re-using this varible here
197
198
    sn.day_low = 0  //Re-using this varible here
198
199
    sn.day_close = 0//Re-using this varible here
199
 
    var day_open = 0, text_pos = 1, date_text = ""
200
 
 
201
 
    if ( this.past_len > 90 ) // This needs to divide by screen width
202
 
        date_text = this.listModel.get(this.past_len).date.split('-')[1]+"/"+this.listModel.get(this.past_len).date.split('-')[2]+"/"+this.listModel.get(this.past_len).date.split('-')[0].substr(2)
203
 
    else date_text = this.listModel.get(this.past_len).date.split('-')[2]
204
 
 
 
200
    var day_open = 0, text_pos = 0, date_text = ""
 
201
 
 
202
    var oneShot = false, dateSpacing, dateTextLength, dateFormat = ''
 
203
 
 
204
    var dateArray = this.listModel.get(this.past_len).date.split('-')
 
205
    if ( parseInt(dateArray[1]) < parseInt(new Date().getMonth()) )  // This will find if the chart goes back from this month and year for text display
 
206
        dateFormat = 'month'
 
207
    if ( parseInt(dateArray[0]) < parseInt(new Date().getFullYear()) )
 
208
        dateFormat = 'year'
205
209
 
206
210
    var xv = this.graph.options.leftPadding, ff = false
207
 
    for ( var i = this.past_len; i >= 1;  i-- ) {
 
211
 
 
212
 
 
213
 
 
214
 
 
215
 
 
216
 
 
217
 
 
218
        this.graph.ctx.beginPath()
 
219
        xv = this.graph.options.leftPadding
 
220
        this.graph.ctx.moveTo(xv, this.graph.options.height-this.volume_size-graph_bottom )
 
221
 
 
222
        for ( var i = this.past_len; i >= 0;  i-- ) {
 
223
 
 
224
            // Graph trade line
 
225
            if ( !ff ) ff = (this.graph.options.height-this.volume_size-graph_bottom)-(parseFloat(this.listModel.get(i).close-this.min_value)*this.value_adjust).toFixed(2)
 
226
            ff = (this.graph.options.height-this.volume_size-graph_bottom)-(parseFloat(this.listModel.get(i).close-this.min_value)*this.value_adjust).toFixed(2)
 
227
 
 
228
            this.graph.ctx.lineTo(xv, ff )
 
229
            this.graph.ctx.strokeStyle = this.chartLineColor
 
230
            this.graph.ctx.stroke();
 
231
            // ----------------------------
 
232
            xv += this.space_average
 
233
        }
 
234
 
 
235
        this.graph.ctx.lineTo(xv-this.space_average, this.graph.options.height-this.volume_size-graph_bottom )
 
236
 
 
237
        this.graph.ctx.stroke()
 
238
 
 
239
        if ( this.graph.options.showDayRange !== "yes" ) {
 
240
            this.graph.ctx.closePath()
 
241
            this.graph.ctx.fillStyle = this.graph.ctx.createLinearGradient(this.graph.options.width-this.graph.options.rightPadding, 0,
 
242
            this.graph.options.width-this.graph.options.rightPadding, this.graph.options.height-this.volume_size-graph_bottom).addColorStop(0,"#A1A1A1").addColorStop(1,"#ededed")
 
243
            this.graph.ctx.fill()
 
244
        }
 
245
 
 
246
 
 
247
 
 
248
 
 
249
 
 
250
 
 
251
 
 
252
 
 
253
 
 
254
 
 
255
 
 
256
 
 
257
 
 
258
    xv = this.graph.options.leftPadding
 
259
 
 
260
    for ( var i = this.past_len; i >= 0;  i-- ) {
208
261
 
209
262
          day_open = parseFloat(this.listModel.get(i).open)
210
263
          sn.day_close = parseFloat(this.listModel.get(i).close)
211
264
 
 
265
        /*
212
266
        // Graph trade line
213
267
        if ( !ff ) ff = (this.graph.options.height-this.volume_size-graph_bottom)-(parseFloat(this.listModel.get(i).close-this.min_value)*this.value_adjust).toFixed(2)
214
268
        this.graph.ctx.beginPath()
221
275
        this.graph.ctx.stroke();
222
276
        // ----------------------------
223
277
 
 
278
        */
 
279
 
224
280
        // Graph day range
225
281
        if ( this.graph.options.showDayRange === "yes" ) {
226
282
            sn.day_low = (this.graph.options.height-this.volume_size-graph_bottom)-(parseFloat(this.listModel.get(i).low-this.min_value)*this.value_adjust).toFixed(2)
252
308
 
253
309
        // Graph bottom date text
254
310
         this.graph.ctx.fillStyle = this.graph.options.dateTextColor
255
 
         if ( text_pos > (date_text.length)*this.char_pixel_size && (i*this.space_average) > (date_text.length)*this.char_pixel_size && (i*this.space_average) > (date_text.length)*this.char_pixel_size )  {
256
 
              text_pos = 0
257
 
              if ( this.past_len > 90 )
258
 
                  date_text = this.listModel.get(i).date.split('-')[1]+"/"+this.listModel.get(i).date.split('-')[2]+"/"+this.listModel.get(i).date.split('-')[0].substr(2)
259
 
              else date_text = this.listModel.get(i).date.split('-')[2]
260
 
              this.graph.ctx.textBaseline = 'bottom'
261
 
              this.graph.ctx.fillText(date_text, xv-((date_text.length*this.char_pixel_size)/2), this.graph.options.height)
 
311
 
 
312
        dateArray = this.listModel.get(i).date.split('-')
 
313
        if ( !dateFormat ) {
 
314
            date_text = dateArray[2].toString()
 
315
            dateSpacing = 10
 
316
        }
 
317
        else if ( dateFormat === 'month' ) {
 
318
            date_text = dateArray[1]+"/"+dateArray[2]
 
319
            dateSpacing = 10
 
320
        }
 
321
        else if ( dateFormat === 'year' ) {
 
322
            //date_text = this.listModel.get(i).date.split('-')  // I wonder how thorough the gargage collection is in qt?
 
323
            //date_text = date_text[1]+"/"+date_text[2]+"/"+date_text[0].substr(2)
 
324
            date_text = dateArray[1]+"/"+dateArray[2]+"/"+dateArray[0].substr(2)
 
325
            dateSpacing = 10
 
326
        }
 
327
 
 
328
        dateTextLength = date_text.length*this.char_pixel_size
 
329
        if ( ( text_pos >= dateTextLength/4 && !oneShot ) || ( text_pos >= dateTextLength/2+dateSpacing && i*this.space_average > dateTextLength/4 ) ) {
 
330
            text_pos = 0
 
331
            oneShot = true
 
332
            this.graph.ctx.textBaseline = 'bottom'
 
333
            this.graph.ctx.fillText(date_text, xv-dateTextLength/4, this.graph.options.height)
262
334
        }
263
335
        // ----------------------------
264
336
 
265
 
 
266
337
        text_pos += this.space_average
267
338
        xv += this.space_average
268
339
    }
295
366
    }
296
367
 
297
368
    this.graph.ctx.stroke();
 
369
 
298
370
    }
299
371
 
300
372
 
 
373
 
301
374
}
302
375
 
303
 
var graph = new Graph({topPadding: 20, rightPadding: 5, bottomPadding: 0, leftPadding: 5, middleLine: "yes", showDayRange: "no",
 
376
var graph = new Graph({topPadding: 20, rightPadding: 5, bottomPadding: 0, leftPadding: 5, middleLine: "no", showDayRange: "no",
304
377
                          dateTextColor: "#3D1D04", tradePointColor: "#434343", volumeLineColor: "#2C2832"
305
378
                      })
306
379