jqplot / examples / bubblechart.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bubble Chart Test</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.2.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.bubbleRenderer.js"></script>
  <!-- END: load jqplot -->


<script language="javascript" type="text/javascript">
$(document).ready(function(){
      $.jqplot.config.enablePlugins = true;
      
var makes = ['Acura', 'Alfa Romeo', 'AM General', 'Aston Martin Lagonda Ltd.', 'Audi', 'BMW', 'Bugatti', 'Buick', 'Cadillac', 'Chevrolet', 'Citroen', 'DaimlerChrysler Corporation', 'Daewoo Motor Co.', 'Delorean Motor Company', 'Dodge', 'Ferrari', 'Fiat', 'Ford Motor Company', 'General Motors', 'GMC', 'Holden', 'Honda', 'Hummer', 'Hyundai', 'Infiniti', 'Isuzu', 'Jaguar Cars', 'Jeep', 'Jensen Motors', 'Kia', 'Laforza', 'Lamborghini', 'Lancia', 'Land Rover', 'Lincoln', 'Lotus Cars', 'Lexus', 'Maserati', 'Mazda', 'Mercedes-Benz', 'Mercury', 'MG', 'Minelli', 'The Mini Cooper', 'Mistubishi', 'Morgan Motor Co.', 'Mosler Automotive', 'Nissan', 'NUMMI ', 'Oldsmobile', 'Opel', 'Packard', 'Panoz', 'Peugeot', 'Pontiac', 'Porsche', 'Proton', 'PSA Peugeot Citroen', 'Renault', 'Rolls-Royce', 'Rover Cars', 'Saab', 'Saturn', 'Shelby American', 'Skoda', 'Spectre Cars', 'Studebaker Motor Company', 'Subaru', 'Suzuki', 'Th!nk', 'Toyota', 'Toyota Motor Manufacturing - Georgetown, KY', 'TVR', 'Vauxhall', 'Volkswagen', 'Volvo', 'Zimmer Motor Cars'];

var arr = []
console.log(makes.length);
var l = 3 + Math.ceil(Math.random()*(makes.length-20));
for (var i=0; i<7; i++) {
    arr.push([Math.round(Math.random() * 50), Math.round(Math.random() * 150), Math.round(400 + Math.random() * 900), makes[i]]);
}

// console.log(arr);


   s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.3, 2, 17, 'VW'], [1.2, 1.2, 13, 'Mini'], [2.7, 1.5, 5], [1.7, 1.2, 4], [1.6, 2.9, 3], [0.3, 0.6, 2], [1.3, 2.2, 10, 'Franklin'], [1.1, 1.3, 13, 'Nissan'], [1, 1, 12, 'Chrysler'], [2, 2.5, 11, 'Audi']];
   // s1 = [[0.6, 2.6, 12, 'Ford'], [0.5, 3, 16, 'GM'], [1.1, 1.3, 10, 'Nissan'], [1, 1, 20, 'Chrysler']];
   // s1 = [[23, 42, 1983], [12, 13, 4324, {label:'Ford', color:'indianred'}], [20, 58, 3900], [32, 29, 3425], [44, 55, 878]];

   plot1 = $.jqplot('chart1',[arr],{
       sortData: false,
       title: 'Bubble Test',
       seriesDefaults:{
           renderer: $.jqplot.BubbleRenderer,
           rendererOptions: {
               autoscalePointsFactor: -.15,
               // autoscaleMultiplier: 0.7,
               // autoscaleBubbles: false,
               // highlightMouseDown: false
               // varyBubbleColors: false
               bubbleAlpha: 0.6,
               highlightAlpha: 0.8
           },
           highlightMouseDown: true,
           shadow: true,
           shadowAlpha: 0.05
       },
       axesDefaults: {
           // pad: 1.4
       }
   });
   
 });
</script>
  </head>
  <body>
<?php include "nav.inc"; ?>
<div id="chart1" class="plot" style="width:600px;height:400px;"></div>
  </body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.