Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have been struggling with the same issue. I have not completely figured it out, but I have found an alternative that does what I think you are describing. Here is the code (explanation below):</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css"&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; dojo.require("dojox.charting.StoreSeries"); dojo.require("dojo.store.Memory"); dojo.require("dojo.store.Observable"); dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.Chart"); dojo.require("dojox.charting.plot2d.Areas"); dojo.ready(function () { renderArrayChart(); renderStoreChart(); }); function renderArrayChart() { try { var dataChart = new dojox.charting.Chart("myArrayChart", { stretchToFit: false, scrolling: false, type: dojox.charting.plot2d.Areas, title: "update array, rerender" }); // create an array of x/y pairs as the data source var data = [{ x: 1, y: 2.1}]; dataChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 }); // set min/max so the Y axis scale does not change with the data dataChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 }); // create the series with the data array as the source dataChart.addSeries("y", data); dataChart.render(); // this counter is used as the x value for new data points var startNumber = data.length; //update datastore to simulate new data var interval = setInterval(function () { // if we have more than 9 data points in the array, remove the first one if (data.length &gt; 9) data.splice(0, 1); // push a new data point onto the array using the counter as the X value data.push({ x: ++startNumber, y: Math.ceil(Math.random() * 29) }); // update the series with the updated arrray dataChart.updateSeries("y", data); // re-render the chart dataChart.render(); }, 1000); } catch (ex) { alert(ex.message); } } function renderStoreChart() { try { // create an array as the data source var dataArray = [{ id: 1, value: 2.1}]; // create the observable data store var dataStore = dojo.store.Observable(new dojo.store.Memory({ data: { identifier: "id", items: dataArray } })); var storeChart = new dojox.charting.Chart("myStoreChart", { stretchToFit: false, scrolling: false, type: dojox.charting.plot2d.Areas, title: "data store" }); storeChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 }); // set min/max so the Y axis scale does not change with the data storeChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 }); storeChart.addSeries("y", new dojox.charting.StoreSeries(dataStore, { bindings: { x: "id", y: "value"} })); storeChart.render(); // this counter is used as the x value for new data points var startNumber = 1; //update datastore to simulate new data var interval = setInterval(function () { // if we have more than the desired number data points in the store, remove the first one if (startNumber &gt; 9) dataStore.notify(null, startNumber - 10); // add a new point to the data store dataStore.notify({ id: ++startNumber, value: Math.ceil(Math.random() * 29) }); }, 1000); } catch (ex) { alert(ex.message); } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="myArrayChart" style="width: 500px; height: 200px;"&gt;&lt;/div&gt;&lt;br /&gt; &lt;div id="myStoreChart" style="width: 500px; height: 200px;"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The top chart uses a simple array as the data source (instead of an Observable store). In the interval function, it simply slices the first array element (after reaching the desired number of elements) and adds a new element. It then updates the series (dataChart.updateSeries) and then re-renders the chart. In order to get the X axis labels to work correctly, each array item is an object x and y value (e.g. {x: 1, y: 2.1}). </p> <p>The bottom chart uses the data store (an adaptation of your example). It does get the data to scroll off the chart. The dataStore.notify(null, objectId) method will remove the object with the given id from the data store. However, the X axis labels on this chart still do not display correctly.</p> <p>In either case, the chart does not scale well. Even with only about 50 data points, the rendering gets very slow. I may try looking at other options, such as <a href="http://people.iola.dk/olau/flot/examples/realtime.html" rel="nofollow">Flot</a> - which seems to perform better with a larger number of data points.</p>
    singulars
    1. This table or related slice is empty.
    1. POdojox.charting.Chart dataRange not restricting the chart x axis properly
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USmweaver
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POdojox.charting.Chart dataRange not restricting the chart x axis properly
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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