Forum Replies Created by Thangaraj Raman

Viewing 15 posts - 166 through 180 (of 226 total)
  • @friday096,

    You can render a chart similar to the one you have shared by creating a dynamic chart and setting labelAutoFit to false as well as updating the y-axis maximum.

    Please check this JSFiddle for a working example.

    Live Chart


    Thangaraj Raman
    Team CanvasJS

    in reply to: StripLines for every 5 minutes #37937

    @blazg,

    Glad that you were able to make it work.


    Thangaraj Raman
    Team CanvasJS

    in reply to: White noise over labels in axisY and axisY2 #37926

    @netp,

    You can use the CanvasJS script from our website and fork the JSFiddle to reproduce the issue.


    Thangaraj Raman
    Team CanvasJS

    in reply to: StripLines for every 5 minutes #37925

    @blazg,

    You can render stripLines on x-axis for every 5 minutes in a dynamic chart with a few extra lines of code as shown in the code snippet below:

    function updateChart() {
        var deltaY ;
        time.setTime(time.getTime()+60*updateInterval);
        deltaY = 0.5 + Math.random() *(-0.5-0.5);
        yValue = Math.round((yValue + deltaY)*100)/100;
        dataPoints.push({
          x: time.getTime(),
          y: yValue
        });
          
        if(stripLineCounter%5 == 0) {
        	stripLineArray.push({value:time.getTime(), label: CanvasJS.formatDate(time.getTime(), "hh:mm")});
        }
        stripLineCounter++;
        
        if (dataPoints.length >  100 ) {
          dataPoints.shift();				
        }
        chart.render();
        setTimeout(updateChart, updateInterval);
      }
      updateChart();
    }

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Draw line between StripLines #37814

    @ragu1991nathan,

    As viewportMinimum and viewportMaximum are set programmatically while hiding all the dataSeries, the reset button will basically set the viewport range back to the state it was in after clicking on the hide button.

    You can set the viewportMinimum and viewportMaximum to null to reset the axis range in rangeChanged event when reset button is clicked.


    Thangaraj Raman
    Team CanvasJS

    in reply to: White noise over labels in axisY and axisY2 #37804

    @netp,

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

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact scenario, or the solution that we provide may not work properly due to the variation in chart options being used by you and us.

    Having a JSFiddle helps us in figuring out the issue and suggesting an appropriate solution accordingly.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Draw line between StripLines #37786

    @ragu1991nathan,

    You can retain the viewportMinimum and viewportMaximum for both axisX and axisY before hiding all the dataseries (by setting visible of each dataseries to false). Please find the code snippet for the same below.

    document.getElementById("hide").addEventListener("click", function(){
        for(var i = 0; i < chart.options.data.length; i++) {
          chart.options.data[i].showInLegend = false;
          chart.options.data[i].visible = false;
        }
        chart.axisX[0].set("viewportMinimum", chart.axisX[0].get("viewportMinimum"), false);
        chart.axisX[0].set("viewportMaximum", chart.axisX[0].get("viewportMaximum"), false);
        chart.axisY[0].set("viewportMinimum", chart.axisY[0].get("viewportMinimum"), false);
        chart.axisY[0].set("viewportMaximum", chart.axisY[0].get("viewportMaximum"), false);
        chart.render();
      });

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


    Thangaraj Raman
    Team CanvasJS

    in reply to: Draw line between StripLines #37774

    @ragu1991nathan,

    You can add a dummy line dataSeries with x-values based on stripLines values and use indexLabel to show the length between the stripLines. Please find the code snippet for the same below.

    chart.addTo("data", {
        type: "line",
        toolTipContent: null,
        highlightEnabled: false,
        markerSize: 0,
        dataPoints: [
          { x: striplines[0].get("value"), y: (chart.axisY[0].viewportMaximum + chart.axisY[0].viewportMinimum) / 2 },
          { x: (striplines[1].get("value") + striplines[0].get("value")) / 2, y: (chart.axisY[0].viewportMaximum - chart.axisY[0].viewportMinimum) / 2, indexLabel:  (striplines[1].get("value") - striplines[0].get("value")).toString()},
          { x: striplines[1].get("value"), y: (chart.axisY[0].viewportMaximum - chart.axisY[0].viewportMinimum) / 2 }
        ]
    });

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Show al labels on bar chart #37702

    @alfonso-arroyo,

    The interval at which axis labels are rendered is auto-calculated based on parameters like axis minimum, axis maximum, etc. However, you can override this by manually setting the interval property to show all labels.


    Thangaraj Raman
    Team CanvasJS.

    in reply to: Show all labels on bar chart #37701

    @pablo-montero,

    The interval at which axis labels are rendered is auto-calculated based on parameters like axis minimum, axis maximum, etc. However, you can override this by manually setting the interval property to show all labels.


    Thangaraj Raman
    Team CanvasJS.

    in reply to: viewportMaximum – limit to 100 most recent values #37686

    @phillips321,

    You can set the x-value as a date object instead of using labels.

    To only display a certain number of recent dataPoints you can set the viewportMinimum according to the number of dataPoints you would like to view. Please find the code snippet for the same below.

    chart.axisX[0].set("viewportMinimum", dps[0][dps[0].length - 1 - dpsInView].x)

    Please check this JSFiddle for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Hiding tooltip when mouse out of the point #37625

    @sparikh,

    You can set the mouseover and mouseout event handlers and create a custom function using the tooltip updated function to achieve the same behavior with a line chart. Please find the code snippet for the same below.

    toolTip: {
      updated: function(e) {
        if(!showToolTip)
          e.chart.toolTip.hide();
      }
    }

    Please check this updated JSFiddle for a working example.

    Hiding tooltip on mouseout


    Thangaraj Raman
    Team CanvasJS

    in reply to: Hiding tooltip when mouse out of the point #37602

    @sparikh,

    You can use the tooltip hide() method within the dataSeries mouseout function to hide the tooltip when the mouse is moved away from the dataPoint. Please find the code snippet for the same below.

    function onMouseout(e){
       e.chart.toolTip.hide();
    }

    Kindly take a look at this JSFiddle for a working example.

    Hide tooltip on mouseout


    Thangaraj Raman
    Team CanvasJS

    in reply to: Upgrade issue v2.3.2 to 3.6.1 – Export functionality #37593

    @elanchezhiyan,

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


    Thangaraj Raman
    Team CanvasJS

    in reply to: 1 Spline Chart with two lines #37574

    @phillips321,

    You can set axisYType property as “secondary” for the humidity dataSeries to plot it against the secondary y-axis.

    Kindly take a look at this updated JSFiddle for a working example.

    Chart with Secondary Y-Axis


    Thangaraj Raman
    Team CanvasJS

Viewing 15 posts - 166 through 180 (of 226 total)