Forum Replies Created by Manoj Mohan

Viewing 15 posts - 241 through 255 (of 823 total)
  • in reply to: How to redisplay crosshairs across renders #36189

    @rlong,

    Thanks for reporting the use-case. There seems to be an issue with value parameter in labelFormatter of crosshair when snapToDataPoint for y-axis is set to true. We will fix it in our future releases.

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: How to redisplay crosshairs across renders #36116

    @rlong,

    We have just released v3.4.5 with the bug fix related to showAt method of secondary y-axis crosshair. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.


    Manoj Mohan
    Team CanvasJS

    in reply to: How to redisplay crosshairs across renders #36080

    @rlong,

    What I would like to do is automatically display the crosshairs wherever the cursor is after the chart has been rendered without requiring the cursor to move first. Is there any way I can do this?

    You can display the crosshairs at the last cursor position after rendering the chart by storing the last cursor position with respective to x and y axis in mousemove event callback function. After the chart render method is called, you can display the crosshair at last cursor position using showAt method. Please take a look at this below code snippet for the same.

    setInterval(() => {
        chart.render();
    	
      	//Check if crosshair positions is within plot area
        if( chart.axisX[0].bounds.x1 <= crossHairPositionX && chart.axisX[0].bounds.x2 >= crossHairPositionX && chart.axisY[0].bounds.y1 <= crossHairPositionY && chart.axisY[0].bounds.y2 >= crossHairPositionY) {
          if(crossHairPositionX != null && crossHairPositionY != null) {
            chart.axisX[0].crosshair.showAt(chart.axisX[0].convertPixelToValue(crossHairPositionX));
            chart.axisY[0].crosshair.showAt(chart.axisY[0].convertPixelToValue(crossHairPositionY));
          }
        }
        
      }, 1000);
    
      $(".canvasjs-chart-canvas").last().on("mousemove", function(e) {
        var parentOffset = $(this).parent().offset();
        var relX = e.pageX - parentOffset.left;
        crossHairPositionX = relX;
        var relY = e.pageY - parentOffset.top;
        crossHairPositionY = relY;
      });

    Also check out this updated JSFiddle for complete working code.

    Retaining crosshair value after chart render is called

    The last note is that for whatever reason, the showAt method does not seem to work for the Y2 axis at all. I don’t understand why but if you look at this jsfiddle, which is the same in every way from the one above except I’m using the Y2 axis, you’ll see that the crosshair will not display for the Y2 axis using the showAt method

    Thanks for reporting the use-case. It seems like a bug & we will fix it in our upcoming versions.

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: Blurry column charts #35992

    @elanchezhiyan,

    Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code / chart-options being used, understand the scenario better, and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    @gowri-d,

    You can use react-modal module to generate modal and bind the click event in dataPoint to open modal as shown in the below code snippet.

     openModal(e) {
        this.setState({showModal: true, x: e.dataPoint.x, y: e.dataPoint.y});
      }
      .
      .
      .
       const options = {
          data: [
            {
              //Change type to "line", "bar", "area", "pie", etc.
              type: "column",
              click: this.openModal,
              dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
              ]
            }
          ]
        },
        .
        .
        .
        <Modal
          isOpen={this.state.showModal}
          contentLabel="Modal"
          style={customStyles}
         >
         .
         .
    

    Please checkout this StackBlitz project for an example on the same.

    Open react modal on datapoint click

    ——
    Manoj Mohan
    Team CanvasJS

    @gowri-d,

    Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or OneDrive so that we can look into the code, run it locally at our end to understand the scenario better and help you out?


    Manoj Mohan
    Team CanvasJS

    @pankaj0086,

    Sorry for the inconvenience caused. As iOS has dropped the canvas memory buffer to 224MB, we have tried to optimize memory consumption of our library. Also, we will optimize it further in our future releases.

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: “Hidden” event does not trigger on Crosshair #35914

    @shivan,

    We have just released v1.4.3 with this bug fix. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.


    Manoj Mohan
    Team CanvasJS

    in reply to: logarithmic function #35882

    @elanchezhiyan,

    You can set the interval for axisX to overcome the issue of getting repeated values in x-axis.

    If you are still facing the issue, can you kindly create JSFiddle reproducing the issue and share it with us so that we can understand your scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: Notation used for large numbers #35802

    @agaur,

    CanvasJS library is based on JavaScript and hence it inherits all its behaviour and limitations. However, we will reconsider the behaviour of handling large numbers for improvement in our future releases.

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: Notation used for large numbers #35753

    @agaur,

    The number you are passing to y-value seems to be greater than JavaScript Number.MAX_SAFE_INTEGER, because of which axis labels are not rendered properly.

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: logarithmic function #35738

    @elanchezhiyan,

    Previously shared code seems to work fine with positive values. The logic can be improved to make it work with negative values as shown in the below code-snippet

    function getSubscriptString(value) {
        var subscriptValue = Math.ceil(Math.log(value)/Math.log(10));
    
        //Handling double digit numbers
        if(subscriptValue > 9 || subscriptValue < -9) {
          return (subscriptValue < -9 ? "\u207B" : "") + (Math.abs(subscriptValue)+"").split('').reduce(
            function(prevVal,val) {
              return prevVal + unicodeStringForSubscript[val];
            }, "")
        }
        
        return (subscriptValue < 0 ? "\u207B": "") + unicodeStringForSubscript[Math.abs(subscriptValue)];
      }
    ..
    axisX:{
          title: "Logarithmic Axis",
          logarithmic: true,
          logarithmBase: 10,
          labelFormatter: function(e) {
            return 10 + getSubscriptString(e.value);
          }
        }
    ..
    

    Also, check out this JSFiddle for complete working sample.

    Display negative power values in x-Axis labels

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: Chart within ToolTip or Chart within a Chart #35726

    @aisolutions,

    You can pass the pie1, pie2,… values to respective dataPoints of the scatter chart and on displaying the tooltip, you can get the values for pie chart using e.entries[0].dataPoints object. Please take a look at the code snippet below for the same.

    
    .
    .
    toolTip: {
          updated: function(e) {
            typeof pieChart.destroy === "function" && pieChart.destroy();  
            pieChart = new CanvasJS.Chart('pie-chart', chartOptions);
            pieChart.options.title.text = e.entries[0].dataPoint.name;
            pieChart.options.data[0].dataPoints = [];
            pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie1});
            pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie2});
            pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie3});
            pieChart.render(); 
          },
          contentFormatter: function() {
            return "<div id='pie-chart' style='width:200px; height:200px;'></div>";
          },
          hidden: function() {
            typeof pieChart.destroy === "function" && pieChart.destroy();
          }
        }
    .
    .
     dataPoints: [
            { y: 219960, name: "First", pie1: 20, pie2: 30, pie3: 50},
            { y: 363040, name: "Second", pie1: 60, pie2: 20, pie3: 40}
          ]
    .
    .
    

    Please take a look at this JSFiddle for complete working code.

    Displaying pie chart within tooltip

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: logarithmic function #35718

    @elanchezhiyan,

    You can use unicode characters in labelFormatter to display power (subscript) values in the axis labels. Please check out the code snippet for the same.

    var unicodeStringForSubscript = ["\u2070", "\u00B9", "\u00B2", "\u00B3", "\u2074", "\u2075", "\u2076", "\u2077", "\u2078", "\u2079"]
    .
    .
     axisX:{
          title: "Logarithmic Axis",
          logarithmic: true,
          logarithmBase: 10,
          labelFormatter: function(e) {
            return 10 + unicodeStringForSubscript[Math.ceil(Math.log(e.value)/Math.log(10))] ;
          }
    .
    .
    

    Also, take a look at this JSFiddle for a complete working code.

    Display power values in X-Axis Labels

    —-
    Manoj Mohan
    Team CanvasJS

    in reply to: get charts.axisY2[0].bounds without first rendering. #35699

    @canvy,

    I need to be able to get a charts.axisY2[0].bounds property calculated BEFORE I render it. How can I do that?

    Sorry, it’s not possible to access bounds of the axis before rendering the chart. However after rendering it once, you get access to all the properties. Please refer to the Methods & Properties documentation for more info.

    how can I use offscreenCanvas with my chart too?

    offscreenCanvas is not supported in CanvasJS as of now.


    Manoj Mohan
    Team CanvasJS

Viewing 15 posts - 241 through 255 (of 823 total)