StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Method 1: Multiple Charts</strong></p> <p>This is probably the simplest in concept (though still a hassle).</p> <p>Summary:</p> <ol> <li>Split data in to groups (eliminate the gaps)</li> <li>Create a separate chart for each group</li> <li>Eliminate the vAxis labels for every chart past the first</li> <li>Create a consistent vAxis min/max value</li> <li>Use CSS to line the charts up side to side</li> </ol> <p>Details:</p> <p>If you have a static data set, you can just split it by hand. If it isn't static, then you have to write some javascript to split up your data. I can't really help you here since I don't know how your data works.</p> <p>As far as setting up the charts, I'll leave that up to you. I don't know how you want them formatted, so again I can't really help you with the current info.</p> <p>To create a consistent axis value for all charts, you need to use some basic math in a javascript function to assign the same numbers to each vAxis max/min value. Here is a sample:</p> <pre><code>// Take the Max/Min of all data values in all graphs var totalMax = 345; var totalMin = -123; // Figure out the largest number (positive or negative) var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin)); // Round to an exponent of 10 appropriate for the biggest number var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10); var roundingDec = Math.pow(10,roundingExp); // Round your max and min to the nearest exponent of 10 var newMax = Math.ceil(totalMax/roundingDec)*roundingDec; var newMin = Math.floor(totalMin/roundingDec)*roundingDec; // Determine the range of your values var range = newMax - newMin; // Define the number of gridlines (default 5) var gridlines = 5; // Determine an appropriate gap between gridlines var interval = range / (gridlines - 1); // Round that interval up to the exponent of 10 var newInterval = Math.ceil(interval/roundingDec)*roundingDec; // Re-round your max and min to the new interval var finalMax = Math.ceil(totalMax/newInterval)*newInterval; var finalMin = Math.floor(totalMin/newInterval)*newInterval; </code></pre> <p><strong>Method 2: Multiple Series</strong></p> <p>As long as the people viewing your data understand they are different sets, then there's no reason the axis needs to say the exact date/time as long as they can easily figure that out elsewhere.</p> <p>Summary:</p> <ol> <li>Separate your data in to different series for each 'sequence'</li> <li>Artificially shorten the gaps between sequences (if they are 15 seconds each, then have a 5 second gap between series, or just start every 15 seconds)</li> <li>Format each different series with a name labeling when the run started/ended</li> </ol> <p>Details:</p> <p>Again, you will have to split your data manually or create javascript to do it, but what you want to do is to move each set of numbers in to its own column, like so:</p> <pre><code>1360096658270, 10.228335, null 1360096658274, 10.308437, null 1360096658277, 10.294770, null [...] 1360096673968, 9.014943, null 1360096673969, 8.971434, null 1360096673970, 9.041739, null 1360096673971, 9.097484, null ^^-- 15 seconds <--- (~10 days) 1360989176509, null, 9.856928 1360989176513, null, 9.852907 1360989176517, null, 9.861740 1360989176523, null, 9.820416 1360989176527, null, 9.871401 </code></pre> <p>This will make each series be a different color (and have a different label in the legend/on mouseover), so you can see the difference between runs, but also get a nice tooltip saying "This data was gathered from X to Y" so that if the time the data was taken is important, it's still in there (albeit not on the X axis).</p> <p>These are the easiest ways.</p> <p><strong>Method 3: Manually Editing the X-Axis Labels</strong></p> <p>The third way is the most flexible but also takes the most work. You can create a custom javascript function to manipulate the X-axis labels in SVG. More details on this <a href="https://stackoverflow.com/questions/14526032/google-charts-bubble-charts-categorical-x-and-y-axes-instead-of-numeric">here</a> by @jeffery_the_wind:</p> <pre><code>/* * * The following 2 functions are a little hacky, they have to be done after calling the "draw" function * The bubble chart originally displays only numbers along the x and y axes instead of customer or product names * These 2 functions replace those numbers with the words for the customers and products * */ for ( var i = -2; i < products.length + 1; i ++ ){ $('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){ if (t == i){ if (i >= products.length || i < 0){ return " "; } return products[i]; } }); } for ( var i = -2; i <= customers.length + 3; i ++ ){ $('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){ if (i >= customers.length + 1 || i <= 0){ return " "; }else if (t == i){ return customers[i-1]; } }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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