diff --git a/src/components/map/observation-dialog.js b/src/components/map/observation-dialog.js
index 4d0ab9d6..b9f5b0e3 100644
--- a/src/components/map/observation-dialog.js
+++ b/src/components/map/observation-dialog.js
@@ -1,6 +1,8 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import BaseFloatingDialog from "@utils/base-floating-dialog";
+import {useLayers} from "@context";
+import ObservationChart from "@utils/observation-chart";
 
 // define the properties of this component
 ObservationDialog.propTypes = {
@@ -8,20 +10,26 @@ ObservationDialog.propTypes = {
 };
 
 export default function ObservationDialog(obs_data) {
-    // TODO: the url is put in here but it will eventually
-    //  return a graph using data from this url
+
+    // get references to the observation data/list
+    const {
+        selectedObservations,
+        setSelectedObservations
+    } = useLayers();
+
+    // create a graph using data from this url
     const graphObj = (url) => {
+        const args = {dataUrl: url};
+
         return (
             <Fragment>
-                <div>
-                    {url}
-                </div>
+                <ObservationChart  {...args}/>
             </Fragment>
         );
     };
 
     // create an object for the base dialog
-    const floaterArgs = {title: obs_data.obs.station_name, description: obs_data.obs.location_name, openDialogImmediately:true, "dialogObject": {...graphObj(obs_data.obs.csvurl)}};
+    const floaterArgs = {title: obs_data.obs.location_name, dialogObject: {...graphObj(obs_data.obs.csvurl)}, dataKey: obs_data.obs.location_name, dataList: selectedObservations, setDataList: setSelectedObservations};
 
     // render the dialog.
     // the key here will be used to remove the dialog from the selected observation list when the dialog is closed