Creating a scatterplot chart

Now that we have created our new function file, we are ready to begin building our chart. A scatterplot chart is rendered the same in jqPlot as a normal line chart except that we turn off the lines connecting our data points.

1. We start our code by including the trend line plugin and our new functions.js file. We create a new data conversion function called dataConversion. Since remoteDataCallback is passing back an array, we simply need to wrap it in another array for jqPlot:

   <script src="../js/jqplot.trendline.min.js"></script>
   <script src="../js/functions.js"></script>
   <script>
   function dataConversion(remoteData) {
     var data = new Array();
     data[0] = remoteData;
     return data;
   }

2. We create our chart object and pass in the URL of the data feed that IT created for us:

   $(document).ready(function(){
     var share_conversions = $.jqplot ('share_conversions', "./data/share_conversions.json",
     {
       title:'Conversions from Total Shares',

3. We assign our new function remoteDataCallback to dataRenderer. Next we create an object called dataCallback and assign it dataConversion. This goes in the dataRendererOptions option. When our chart is rendered, jqPlot will call remoteDataCallback and then it will pass our JSON object, remoteData, to dataConversion:

       dataRenderer: remoteDataCallback,
       dataRendererOptions: { dataCallback: dataConversion },
   

4. For our series object, we set showLine to false on our data series to turn off the line. We also create an object for our trend line:

       series:[
         {
           showLine: false,
           trendline: {
             show: true,  
             color: '#666666',  
             lineWidth: 4
           }
         },
       ],

5. We set labels for our axes, and since we are dealing with noncurrency numbers, we don't need to format them:

       axes:{
         xaxis:{ label: 'Shares on Twitter' },
         yaxis:{ label: 'Conversions' }
       }
     });
   });
   </script>
   <div id="share_conversions" style="width:600px;"></div>

We are eager to see how our chart turns out. We load the page in our browser and see the resulting scatterplot shown in the following screenshot:

Intuition would lead us to believe that as the number of social shares on Twitter increase, the number of conversions also increase. The numbers seem to agree with this hypothesis but equally, the numbers could have just as easily shown a decrease in conversions. This is why scatterplots are ideal; we start with an idea of what we expect the data to tell us and then attempt to test it with a scatterplot and trend line.

We call Calvin to have him take a look at what we've got. He stops by about fifteen minutes later. "This is awesome guys. Can you e-mail me links to these charts? Once the VPs look at this tomorrow, we'll give you some feedback."

A smile appears on Calvin's face. "All this has put me in a really generous mood. Let's swing by the sandwich shop down the street and I'll pick up the tab." We look at each other; we're not going to turn down a free lunch.