Rose chart doesn't find the canvas

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by jose luis on 13th May 2014
Hi,
I'm new to javascript and I am attempting to insert a Rose graph inside an info window. Everything works fine if I just create the canvas and paint a simple line, but when I replace the line by the rose graph the program stops.
I debugget the error and I found that the problem is when creating the rose graph with:

var windrose = new RGraph.Rose('cvs2', [4, 6, 3, 5, 2, 8, 9]);

This function calls

var tmp = RGraph.getCanvasTag(id); in RGraph.rose.js where tmp should be tmp[id, canvas].

In my case tmp is tmp[id, null]

Thanks a lot for the help!

Here is the code:

<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!--The viewport meta tag is used to improve the presentation and behavior
     of the samples on iOS devices-->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
     <title>Working on chart</title>
     <link rel="stylesheet" href="js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css\">
     <link rel="stylesheet" href="js.arcgis.com/3.9/js/esri/css/esri.css\">
     <style>
       html, body{
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
       }
       #chartdiv
       {
              height:200px;
        }
        #map{
         margin: 0;
         padding: 0;
       }
       .chart {
         width:200px;
         height:200px;
         padding:0px !important;
       }
     </style>

       <script src="../RGraph/libraries/RGraph.common.core.js" type="text/javascript"></script>
       <script src="../RGraph/libraries/RGraph.rose.js" type="text/javascript"></script>

     <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

     <script src="js.arcgis.com/3.9/\"></script>
     <script>
         $(document).ready(function () {
             var rose = new RGraph.Rose('cvs', [4, 6, 3, 5, 2, 8, 9])
             .set('background.grid.spokes.overhang', 0) // 0 is the default
             .draw();
         })

         var map;

         require([
         "esri/map", "esri/layers/FeatureLayer",
         "esri/dijit/InfoWindow", "esri/InfoTemplate",
         "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
         "dijit/layout/ContentPane", "dijit/layout/TabContainer",
         "dojo/dom-construct", "dojo/dom-class",
         "dojo/number", "dojo/domReady!"
       ], function (
         Map, FeatureLayer,
         InfoWindow, InfoTemplate,
         SimpleFillSymbol, SimpleRenderer,
         ContentPane, TabContainer,
         domConstruct, domClass,
         number, parser
       ) {

           // Use the info window instead of the popup.
           var infoWindow = new InfoWindow(null, domConstruct.create("div"));
           infoWindow.startup();

           map = new Map("map", {
               basemap: "streets",
               center: [-113.405, 43.521],
               infoWindow: infoWindow,
               zoom: 6
           });
           map.infoWindow.resize(300, 350);

           var template = new esri.InfoTemplate();
           // Flag icons are from twitter.com/thefella, released under creative commons.
           template.setTitle("<b><img src='flags/${STATE_ABBR}.png'> ${STATE_NAME}</b>");
           template.setContent(getWindowContent);

           var statesLayer = new FeatureLayer("sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5\", {
               mode: FeatureLayer.MODE_ONDEMAND,
               infoTemplate: template,
               outFields: ["*"]
           });
           var symbol = new SimpleFillSymbol();
           statesLayer.setRenderer(new SimpleRenderer(symbol));

           map.addLayer(statesLayer);

           function getWindowContent(graphic) {
               // Make a tab container.
               var tc = new TabContainer({
                   style: "width:100%;height:100%;"
               }, domConstruct.create("div", { id: "parent1" }, tc));

               // Display attribute information.
               var cp1 = new ContentPane({
                   title: "Details",
                   content: "<a target='_blank' href='en.wikipedia.org/wiki/\" +
               graphic.attributes.STATE_NAME + "'>Wikipedia Entry</a><br><br>Median Age: " +
               graphic.attributes.MED_AGE + "<br>Median Age (Male): " +
               graphic.attributes.MED_AGE_M + "<br>Median Age (Female): " +
               graphic.attributes.MED_AGE_F
               });
               // Display a dojo pie chart for the male/female percentage.
               var cp2 = new ContentPane({
                   title: "Pie Chart"
               });
               tc.addChild(cp2);
               tc.addChild(cp1);

               //Create the chart that will display in the second tab.
               var c = domConstruct.create("div", {
                   id: "demoChart"
               }, domConstruct.create("div"));

               var c2 = domConstruct.create("canvas", {
                   id: "cvs2",
                   width: "300",
                   height: "300",
                   style: "border:1px solid #000000;"
               }, c);

               domConstruct.place(c2, c,"after")

// var ctx = c2.getContext("2d");
// ctx.moveTo(0, 0);
// ctx.lineTo(200, 100);
// ctx.stroke();

               var windrose = new RGraph.Rose('cvs2', [4, 6, 3, 5, 2, 8, 9]);
               windrose.draw();
               //domClass.add(chart, "chart");

               cp2.set("content", c);
               console.debug("adios");

               return tc.domNode;
           }
       });
     </script>
   </head>
  
   <body class="claro">
       <div id="chartdiv">
       <b>Menu</b><br>
       <canvas id="cvs" width="200" height="200">[No canvas support]</canvas>
         </div>
     <div id="map"></div>

   </body>
</html>
Posted by Richard on 14th May 2014
Hi

The canvas ID you're using in the constructor is cvs2 but your canvas tag ID is cvs - so when you create the object it won't be able to find the canvas.






Richard

Add a reply




« Back to message list