Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Interesting requirements and I think I have all of them except for the fifth one. To do this is fairly easy. You need <a href="http://api.highcharts.com/highcharts#xAxis.plotLines" rel="nofollow noreferrer"><code>plotLines</code></a>, input form, and another <code>&lt;div&gt;</code> element.</p> <p>First you need to pull your year from the input form and add 1 year to it (not sure why +1 but here you go):</p> <pre><code>passedYear = parseInt($('input:text').val(), 10) + 1; </code></pre> <p>Then you need to convert this human readable year to a javascript time stamp:</p> <pre><code>showYear = Date.UTC(passedYear, 0, 1); </code></pre> <p>From here you also need to take into account if the user inputs a value higher than the max year of the data (and also less than the minimum). Here is how to test for the greater than scenario:</p> <pre><code>var extremes = chart.xAxis[0].getExtremes(); var maxYear; maxYear = extremes.dataMax; if (maxYear &gt; showYear) { do stuff } </code></pre> <p>You then create your initial <code>plotLine</code>:</p> <pre><code> chart.xAxis[0].addPlotLine({ value: showYear, color: 'red', width: 2, id: 'plotLine' }); </code></pre> <p>Next you wanted to show additional <code>plotLine</code> items at 5-year increments:</p> <pre><code>var plInterval; plInterval = 5; while (nextPL &lt; maxYear) { chart.xAxis[0].addPlotLine({ value: nextPL, color: 'red', width: 2, id: 'plotLine' }); nextYear = nextYear + plInterval; nextPL = Date.UTC(nextYear, 0, 1); } </code></pre> <p>This is to assure that we do not add unnecessary <code>plotLine</code> items out to infinity that will never be shown.</p> <p>Additional requirement was to show "You pay xxxx" text on the page. For this you need a <code>&lt;div&gt;</code> element (or whatever, up to you) to write to. To get the values there is a great function I pulled from <a href="https://stackoverflow.com/questions/12014412/highcharts-getting-y-value-in-one-series-based-on-x-value-from-another-series">here</a>:</p> <pre><code>function getYValue(chartObj, seriesIndex, xValue) { var yValue = null; var points = chartObj.series[seriesIndex].points; for (var i = 0; i &lt; points.length; i++) { if (points[i].x &gt;= xValue) break; yValue = points[i].y; } return yValue; } </code></pre> <p>I use it like:</p> <pre><code>var yVal1; yVal1 = getYValue(chart, 0, maxYear); strInterestPay = strInterestPay + yVal1 + '%, '; </code></pre> <p>I then write this <code>strInterestPay</code> to the <code>&lt;div&gt;</code>:</p> <pre><code>$("div:interest").html(strInterestPay); </code></pre> <p>Now, we need to write out the percentages for the additional <code>plotLine</code> items:</p> <pre><code>yVal1 = getYValue(chart, 0, nextPL); strInterestPay = ', ' + yVal1 + '%'; $('.content').append(strInterestPay); </code></pre> <p><a href="http://jsfiddle.net/wergeld/aHja5/" rel="nofollow noreferrer">DEMO</a></p>
    singulars
    1. This table or related slice is empty.
    1. POInput field in highcharts graphic
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USwergeld
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhow, really interesting/usefull. Thank you. I've editted the chart to this: http://jsfiddle.net/jerryvermanen/mjvEK/1/. Still wondering about the fifth requirement. Could you help me out with that one? Look at the comments above.
      singulars
      1. PO
      1. USJerry Vermanen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload