Forum Replies Created by Adithya Menon

Viewing 15 posts - 91 through 105 (of 191 total)
  • in reply to: Graph in the form of a table! #37572

    @oleglr,

    Considering this thread as duplicate of Tabular presentation of graph data and hence closing the same.

    —-
    Adithya Menon
    Team CanvasJS

    in reply to: Tabular presentation of graph data #37571

    @oleglr,

    It is not possible to create a graph in tabular form (based on your screenshot) using CanvasJS as of now. However, with a few lines of code, it is possible to create a table with data from the chart as shown in the code-snippet below,

    function addTable(chart){
    	var tableData = "";
    	for(var i = 0; i < chart.data.length; i++){
      		tableData += "<tr>" + "<td style='color:" + chart.data[i].color + "'>■" + chart.data[i].name + "</td>";
          for(var j = 0; j < chart.data[i].dataPoints.length; j++){
          	tableData += ("<td>" + chart.data[i].dataPoints[j].y +"%</td>")
          }
          tableData += "</tr>";
      }
      $("#chartData").append(tableData)
    }

    Kindly take a look at this JSFiddle for an example on the same.

    multiseries column chart with data-table


    Adithya Menon
    Team CanvasJS

    in reply to: Add x-padding for the chart #37516

    @ragu1991nathan,

    Based on the minimum x-value among all the data series, you can set the minimum for X-axis to add some space between the Y-axis line and the first datapoint as shown in the code-snippet below,

    function setXMin() {
      var xMinValue = 0;
      for(var i = 0; i < chart.options.data.length; i++) {
        xValues.push(chart.options.data[i].dataPoints[0].x);
      }
      xMinValue = Math.min(...xValues);
      chart.axisX[0].set("minimum", xMinValue - chart.axisX[0].get("interval"))
    }

    Kindly take a look at this updated JSFiddle for an example on the same.

    Please refer to this forum thread for more information & examples.

    setting minimum value of X-axis


    Adithya Menon
    Team CanvasJS

    in reply to: Add simple stripLine #37496

    @obrienb111,

    When just labels are passed without x-values, x-values are automatically added in successive order as 0,1,2,3,4…

    In order to add a stripLine to a particular value, you can set the value property of the stripLines as the corresponding x-value of the dataPoint. You can use the label property in order to set the label of the stripline as an 8-char string format of time.


    Adithya Menon
    Team CanvasJS

    in reply to: Show timeseries interpolated value in tooltip #37469

    @cancanvas,

    In order to show the toolTip for the interpolated dataPoint, you will have to add the dataPoint to the dataSeries. However, you can hide the dataPoint by setting the markerSize property to 1 and highlightEnabled property to false.

    Kindly take a look at this updated JSFiddle for an example on the same.

    chart with a hidden data point calculated using linear interpolation formula


    Adithya Menon
    Team CanvasJS

    in reply to: About Donut CHart #37468

    @vaibhav-babhulgaonkarpowerweave-com,

    Sorry, it is not possible to scale/zoom a particular dataPoint (on a doughnut chart) on hover as of now.


    Adithya Menon
    Team CanvasJS

    in reply to: Show timeseries interpolated value in tooltip #37449

    @cancanvas,

    You can use the linear interpolation formula to find a point on a straight line. This interpolated value (y = y1 + ((x – x1) / (x2 – x1)) * (y2 – y1)) can be added to your dataSeries to display the toolTip.

    Kindly take a look at this updated JSFiddle for an example on the same.

    chart with data calculated using linear interpolation formula


    Adithya Menon
    Team CanvasJS

    in reply to: How to Draw Vertical Line #37367

    @vairamani,

    It is possible to add stripLines dynamically on a chart by binding mouse events to the chart as shown in the code-snippet below,

    $(".canvasjs-chart-canvas").last().on("mousedown", function(e) {  
      var parentOffset = $(this).parent().offset();
      var relX = e.pageX - parentOffset.left;
      var relY = e.pageY - parentOffset.top;
      chart.options.axisX[0].stripLines = []; //Comment this line to add as many stripLine based on mouse events than single stripline
      startValue = chart.axisX[0].convertPixelToValue(relX);
    });
    
    $(".canvasjs-chart-canvas").last().on("mouseup", function(e) {
      var parentOffset = $(this).parent().offset();
      var relX = e.pageX - parentOffset.left;
      var relY = e.pageY - parentOffset.top;
    
      endValue = chart.axisX[0].convertPixelToValue(relX);
      if(startValue === endValue)
        chart.options.axisX[0].stripLines.push({value: startValue });
      else
        chart.options.axisX[0].stripLines.push({startValue: startValue, endValue: endValue});
      chart.render();
    });

    Kindly take a look at this JSFiddle for an example with complete code.

    area chart with dynamic striplines


    Adithya Menon
    Team CanvasJS

    in reply to: Whisker length – too Small #37351

    @elanchezhiyan,

    By default, the whiskerLength gets limited to the dataPointWidth. Setting dataPointWidth property (dataPointWidth: 15) should work fine in this case.

    Kindly take a look at this updated JSFiddle for an example on the same.

    error chart with whisker length set manually


    Adithya Menon
    Team CanvasJS

    in reply to: axisX clipped when we have secondary axisY #37237

    @aazimi,

    Thank you for reporting the use case. It seems to be happening during different scenarios of the secondary Y-axis. We will revisit & reconsider this behavior in future releases.

    As a workaround, you can add a dummy dataSeries attched to primary Y-axis as shown in the code-snippet below,

    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);   
    data.push({type: "line"});

    Please take a look at this JSFiddle for an example with complete code.


    Adithya Menon
    Team CanvasJS

    in reply to: column chart odd behavious #37196

    @pauls,

    To create a chart as per your requirement, you can go ahead and remove the x values passed to the dataPoints array. Passing only label and y properties to dataPoints should work fine in your case.

    Kindly take a look at this updated JSFiddle for an example with complete code.

    column chart with labels and y values


    Adithya Menon
    Team CanvasJS

    in reply to: Export CanvasJS to PDF #37140

    Ragu,

    To export the chart in a pdf with a light theme, you can use chart.set() to change the theme to light1 or light2 right before fetching the base64 image of the chart as shown in the code-snippet below,

    $("#exportButton").click(function(){
        var pdf = new jsPDF();
        var chartTheme = chart.get("theme");
        chart.set("theme", "light2");
        var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
        var dataURL = canvas.toDataURL();
        chart.set("theme", chartTheme);
        pdf.addImage(dataURL, 'JPEG', 0, 0);
        pdf.save("download.pdf");
    });

    Kindly take a look at this JSFiddle for an example on the same with complete code.

    export chart to pdf using jspdf and toDataURL

    in reply to: Date pass throw php #37105

    @umeshkrishna,

    In order to convert PHP date to Charts (JavaScript timestamp), you need to convert PHP date to PHP timestamp using strtotime and then convert PHP timestamp to JavaScript timestamp by multiplying PHP timestamp by 1000 as shown below,

    $phpDate = date("Y-m-d h:i:sa");
    $phpTimestamp = strtotime($phpDate);
    $javaScriptTimestamp = $phpTimestamp * 1000;

    You also need to set xValueType property to ‘dateTime’ as x-value will be a timestamp.

    Chart with PHP timestamp values

    __
    Adithya Menon
    Team CanvasJS

    in reply to: Find max peak on spline chart #37056

    @dunhamcd,

    We don’t have any property to find the coordinates of the highest / lowest peak as an inbuilt feature for now. However, with a few lines of code, it’s possible to find the same using canvas API, which we have showcased in the example shared in the previous reply. The same can be further improved to make it work across different sets of datapoints. Below is the code-snippet which gets the image-data of canvas to find the top-most colored pixel coordinate. Converting the same to value-coordinate using convertPixelToValue will give you the y-value of the highest peak in the curve/spline chart,

    for (var i = 0; i < imageData.length; i += 4) {
      if (i % (4 * parseInt(chart1.plotArea.width)) === 0) {
        coloredRegionData.push([]);
        temp = i;
      }
      if (imageData[i] === 255 && imageData[i + 1] === 0)
        coloredRegionData[coloredRegionData.length - 1].push((i - temp) / 4);
    }

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

    ____
    Adithya Menon
    Team CanvasJS

    in reply to: Find max peak on spline chart #37045

    @dunhamcd,

    Thanks for the JSFiddle. We are looking into your query and will get back to you at the earliest.

    ____
    Adithya Menon
    Team CanvasJS

Viewing 15 posts - 91 through 105 (of 191 total)