Home forums Using CanvasJS Range column chart

This topic contains 7 replies, has 2 voices, and was last updated by  Vishwas R 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #23506

    asha
    Member

    Hi,
    I am using range column chart. My Click event& tool tips are not working with in it.

    please check my code.

    weekBarGraph(barGraphData:any,lowTemp:any,hiTemp:any) {
        this.barWeekChart = new CanvasJS.Chart("chartContainer", {
      theme: "light2", // "light1", "light2", "dark1", "dark2"
      animationEnabled: true,
      axisY: {
        //includeZero: false,
        //interval: 10,
        gridThickness: 0,
        title: "Temperature",
        maximum: this.hiTempThreashold,
        ///minimum: this.lowTempThreshold,
        stripLines: [{
          value: this.lowTempThreshold,
          color: "green",
          labelFormatter: function ( e ) {
                   return  + e.stripLine.value;
             }
        },
          {
            value: this.hiTempThreashold,
            color: "red",
            labelFormatter: function ( e ) {
                   return  + e.stripLine.value;
             }
          }],
      },
      dataPointWidth: 40,
      axisX: {
        //includeZero: false,
        gridThickness: 0,
        title: "time",
        minimum: new Date(this.fromDate),
        maximum: new Date(this.toDate),
        valueFormatString: "DD MMM YYYY",
        intervalType: "day",
        interval:1,
        labelWrap:true,
        labelMaxWidth:50,
        labelAngle: 0
    
      },
      data: [
        {
          type: "rangeColumn",
          //yValueFormatString: "$#,##0.00",
          xValueFormatString: "DD MMM YYYY",
          indexLabel: "{y[#index]}" ,
          click: onClick,
          dataPoints: barGraphData
        }
      ]
    });
    this.barWeekChart.render();
    function onClick(e) {
    		console.log( e );
    	}
    }
    #23513

    Vishwas R
    Keymaster

    @asha,

    Tooltip and click event seems to be working fine. Can you kindly create JSFiddle reproducing the issue you are facing and brief us further about the same, so that we can look into the issue and help you resolve it.


    Vishwas R
    Team CanvasJS

    #23516

    asha
    Member

    I am using canvasjs in my Ionic mobile app. Is that a problem?

    #23522

    Vishwas R
    Keymaster

    @asha,

    CanvasJS works fine even with Ionic apps. Please take a look at this GitHub repository, where CanvasJS Charts are used in Ionic App.

    Kindly check if you are using official version of CanvasJS and not from NPM, as we don’t have official NPM package as of now. If you are using NPM version of CanvasJS I would suggest you to download it from our download page. After downloading, you can save CanvasJS file (canvasjs.min.js) in src folder of your project (‘src/assets/js’ or ‘src/lib’) and import the CanvasJS library to your app using import CanvasJS from 'canvasjs.min' (path may vary based on file location like ‘./src/assets/js/canvasjs.min’ or ‘./src/lib/canvasjs.min’). Or you can add it in your html file using script-tag. Please take a look at this ionic documentation on Adding 3rd Party Libraries.

    Also please refer this tutorial on How to Install 3rd Party Libraries in Ionic 2 and step-by-step guide given in this github thread for more info.


    Vishwas R
    Team CanvasJS

    #23534

    asha
    Member

    I am using Canvasjs 2.2 ,downloaded from official site and not using npm. But still its not working any other solutions?
    Thanks in advance.

    #23538

    Vishwas R
    Keymaster

    @asha,

    It seems to be working fine with ionic 3 across browsers including Chrome, Firefox, Safari, Edge and IE. Please take a look at this sample project.
    CanvasJS Range Column Chart - Ionic 3

    If the issue still persists, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, try it at our end to understand the scenario better and help you resolve it.


    Vishwas R
    Team CanvasJS

    #23562

    asha
    Member

    Hi,
    on loading graph, this tooltip class is given display:none css already in my page

    .canvasjs-chart-tooltip{
    position: absolute;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px;
    z-index: 1000;
    pointer-events: none;
    display: none;
    border-radius: 5px;
    }

    #23567

    Vishwas R
    Keymaster

    @asha,

    It seems to be working fine, please take a look at working sample shared in previous reply.

    Kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can run the actual code that’s causing issue and debug to resolve it.


    Vishwas R
    Team CanvasJS

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.