how to apply click events on axis in dojo graph

Question

how to apply click events on axis in dojo graph

1.1k Views Asked by sirisha At 03 December 2013 at 11:56

I want to apply click events on axis of dojo graph. It is possible to write click events on axis? I have searched in google for sample code i have not found. Any one knows please me.

Original Q&A

There are 1 best solutions below

**Tarun Chaudhary** · Answer 1 · 2013-12-10T11:04:09.083000

If u wants operation on bar columns for respective data after onClick event,the solution code is as:

<html>
<head>
<script> 
 dojo.require("dojox.charting.action2d.Tooltip");
 dojo.xhrPost({
     url : "any URL or for fatching data",     // only if you wants Dynamic data
     handleAs : "json",                   // Dynamic data Pattern
     load : function(response, ioargs) {
      require([

               "dojox/charting/Chart",
               "dojox/charting/themes/Claro",  
               "dojox/charting/plot2d/Columns",
               "dojox/charting/action2d/Highlight",
               "dojox/charting/plot2d/Markers",
               "dojox/charting/axis2d/Default",
               "dojo/domReady!" ], 
    function(Chart, theme, ColumnsPlot, Highlight, Tooltip) {
      var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
      var chart = new Chart("chartNode", {
                  title: "Chart Title",
                  titlePos: "bottom",
                  titleGap: 25,
                  titleFont: "normal normal normal 15pt Arial",
                  titleFontColor: "orange"
                });
              chart.setTheme(theme);
              chart.addPlot("default", {
              type: ColumnsPlot,
              markers: true,
              gap: 8 
          });

        chart.addAxis("x",{labels: response.data, font: "normal normal bold 11pt Tahoma",rotation:-20});
        chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
        chart.addSeries("Students record",chartData);
        new dojox.charting.action2d.Highlight(chart,"default");
        new dojox.charting.action2d.Tooltip(chart,
                            "default", {        
                                  text : function(point) {
                                        console.debug(point);
                                     //   return "This is "  + point.y " " +point.x;
                                      return"This is " + point.y;
                                      }
                     });
        chart.render();

        chart.connectToPlot("default", function(evt) {
             console.warn(evt.type, " on element ", evt.element,
                                " with shape ", evt.shape);

             console.info("Chart event on default plot!", evt);
                        console.info("Event type is: ", evt.type);
             console.info("The element clicked was: ", evt.element);
                        var shape = evt.shape, type = evt.type;
                          // React to click event
                        if (type == "onclick") {
                           alert("onClick event...........");
                            new dojox.gfx.fx.animateTransform({
                                duration : 1200,
                                shape : shape,
                                transform : [ {
                                    name : "rotategAt",
                                    start : [ 0, 240, 240 ],
                                    end : [ 360, 240, 240 ]
                                } ]
                            }).play();
                            console.log("after rotateFx............");
                        }
                        // If it's a mouseover event
                        else if (type == "onmouseover") {
                            // Store the original color
                            if (!shape.originalFill) {
                                shape.originalFill = shape.fillStyle;
                            }
                            // Set the fill color to pink
                            `enter code     here`shape.setFill("pink`enter code here`");
                        }
                        // If it's a mouseout event
                        else if (type == "onmouseout") {
                            // Set the fill the original fill
                            shape.setFill(shape.originalFill);
                        }

                    });
        });
    },
    error : function(response, ioargs) {
        //underlay.hide();
        console.log("Inside Handle Error");
      }
   });

   </script>
  </head>
 <body>
     <div style="width: 700px;height: 600">
       <fieldset> 
         <div id="chartNode" style="width: 700px; height: 500px;">BAR Chart.</div>
      </fieldset> 
   </div>
  </body>
</html>

Here, onClick event after clicking on a bar-column. First it will display a message and than rotate to its left.

how to apply click events on axis in dojo graph

There are 1 best solutions below

Related Questions in DOJO

Related Questions in DOJOX.CHARTING

Trending Questions

Popular # Hahtags

Popular Questions