Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/Chart/GoogleVisualizationBubbleChart

This chart and its examples are implemented using Sgvizler 0.6, for version 0.5 see Sgvizler/0.5/DesigningQueries.

source:misc/image/screenshot/gBubbleChart.png

Google Bubble Chart

Draws a bubble chart, i.e., a scatter chart, but where the color and size of dots are dermined by data values.

Chart ID
google.visualization.BubbleChart
External reference
 https://developers.google.com/chart/interactive/docs/gallery/bubblechart
Other similiar charts
Sgvizler/Chart/GoogleVisualizationAnnotatedTimeLine
Sgvizler/Chart/GoogleVisualizationAreaChart
Sgvizler/Chart/GoogleVisualizationBarChart
Sgvizler/Chart/GoogleVisualizationBubbleChart
Sgvizler/Chart/GoogleVisualizationColumnChart
Sgvizler/Chart/GoogleVisualizationImageSparkLine
Sgvizler/Chart/GoogleVisualizationLineChart
Sgvizler/Chart/GoogleVisualizationMotionChart
Sgvizler/Chart/GoogleVisualizationScatterChart
Sgvizler/Chart/GoogleVisualizationSteppedAreaChart

Query result set format

3--5 columns:

  1. Label
    Datatype: Any?
  2. X-axis value
    Datatype: Number
  3. Y-axis value
    Datatype: Number
  4. Value which determines the dot's color
    Datatype: Number
  5. Value which determines the dot's size
    Datatype: Number

The two latter columns are optional.

See  Google's page on this chart for more details.

Chart options

See  Google's page on this chart for all available options.

See Sgvizler/Using, or the example(s) below, for how to set options.

Live Example

Query: The query is the exact same as what is used for many of the other example charts: The total production of oil, gas, condensate, NGL and water per year on Ekofisk, but for this chart it does not work as is, since the position of the dot is determined by the 2. and

  1. column, which is different from the other charts that use the same

query as example query---so currently this example just shows how the chart displays: #55.

HTML

<div id="ex"
   data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd"
   data-sgvizler-query="
        SELECT ?year ?Oil_millSm3 ?Gas_billSm3 ?NGL_millSm3 ?Condensate_millSm3 ?Water_millSm3 
        { ?period a npdv:FieldProductionPeriod ; 
              npdv:hasField &lt;http://sws.ifi.uio.no/npd/field/Ekofisk&gt; ; 
              npdv:year ?year ; 
              npdv:producedNetOilMillSm3 ?Oil_millSm3 ; 
              npdv:producedNetGasBillSm3 ?Gas_billSm3 ; 
              npdv:producedNetNGLMillSm3 ?NGL_millSm3 ; 
              npdv:producedNetCondensateMillSm3 ?Condensate_millSm3 ; 
              npdv:producedWaterMillSm3 ?Water_millSm3 ;
              OPTIONAL{ ?period npdv:month ?month } . 
              FILTER (!bound(?month)) 
         } ORDER BY ?year" 
   data-sgvizler-chart="google.visualization.BubbleChart"
   style="width:400px; height:265px; border:1px solid black; display: inline-block;"></div>

Result

The result of the HTML above (left), and a google.visualization.Table rendering of the same query (right).


Notes

See Sgvizler/Setup for how Sgvizler is setup on this site.

Note that the query and visualization is ment to show the use of Sgvizler, and may not be the most appropriate way of illustrating this result set.

Feedback

Tickets

#55
Bubble chart: better example

User Examples and Comments

Users, please insert (links to) other examples of usage of this Sgvizler chart, or relevant comments here.