Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To add to @Ricardo's great answer, I have also done something very similar. In fact, I won't be wrong if i said I went a step further than this. Hence would like to share the approach.</p> <p>I have created a wrapper over the highchart library. This gives multiple benefits, following being the main advantages that encouraged going in this path</p> <ul> <li><strong>Decoupling:</strong> Decouples your code from highcharts</li> <li><strong>Easy Upgrades:</strong> This wrapper will be the only code that will require modification in case of any breaking changes in highchart api after upgrades, or even if one decides to move to a differnt charting library altogether (even from highchart to highstock can be exhaustive if your application uses charts extensively)</li> <li><strong>Easy of use:</strong> The wrapper api is kept very simple, only things that may vary are exposed as options (That too whose values won't be as a deep js object like HC already has, mostly 1 level deep), each having a default value. So most of the time our chart creation is very short, with the constructor taking 1 <code>options</code> object with merely 4-5 properties whose defaults don't suit the chart under creation</li> <li><strong>Consistent UX:</strong> Consistent look &amp; feel across the application. eg: tool tip format &amp; position, colors, font family, colors, toolbar (exporting) buttons, etc</li> <li><strong>Avoid duplication:</strong> Of course as a valid answer of the asked question it has to avoid duplication, and it does to a huge extent</li> </ul> <p>Here is what the <code>options</code> look like with their default values </p> <pre><code>defaults : { chartType : "line", startTime : 0, interval : 1000, chartData : [], title : "Product Name", navigator : true, legends : true, presetTimeRanges : [], primaryToolbarButtons : true, secondaryToolbarButtons : true, zoomX : true, zoomY : false, height : null, width : null, panning : false, reflow : false, yDecimals : 2, container : "container", allowFullScreen : true, credits : false, showAll : false, fontSize : "normal", // other option available is "small" showBtnsInNewTab : false, xAxisTitle : null, yAxisTitle : null, onLoad : null, pointMarkers : false, categories : [] } </code></pre> <p>As you can see, most of the times, its just <code>chartData</code> that changes. Even if you need to set some property, its mainly just true/false types, nothing like the horror that highchart constructor expects (not critizing them, the amount of options they provide is just amazing from customization Point of View, but for every developer in the team to understand &amp; master it can take some time)</p> <p>So creation of chart is as simple as</p> <pre><code>var chart=new myLib.Chart({ chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]] }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POManage multiple highchart charts in a single webpage
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USJugal Thakkar
    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
    3. 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