Forum Replies Created by Thangaraj Raman

Viewing 15 posts - 211 through 225 (of 226 total)
  • in reply to: About CSV data series graph #36200

    Lakshmi Venkatappa,

    To create a chart from CSV, you will have to get the CSV data using AJAX call and convert the same to CanvasJS supported format. Please check this documentation page for a step-by-step tutorial on the same.

    Chart from CSV data

    The sample data that you have provided seems to be in JSON format. If you are looking to render a chart from JSON data please check this documentation page for a tutorial. However, if you are still facing issues in rendering the chart please share your sample data(CSV or JSON file) over Google-Drive or OneDrive so that we can analyze your data and help you out.


    Thangaraj Raman
    Team CanvasJS

    in reply to: Dynamically parse 2 separate JSON outputs for the same chart #36127

    @marco1987,

    You will have to create a separate chart container with a unique id for each chart. You can use the CSS display property to hide/unhide a chart based on the option selected from the dropdown menu.

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

    render chart using drop-down

    Thangaraj Raman
    Team CanvasJS

    in reply to: link the rangeSelector of 2 graphs #36041

    @ben551445,

    You can use the rangeChanged event handler to sync the range of both the stockcharts when there is a change in the inputFields, rangeButtons or navigator. Please refer to the code snippet below:

    function syncHandler(e) {
      for(i = 0; i < stockCharts.length; i++) {
        var stockChart = stockCharts[i];
        if(stockChart != e.stockChart) {
          stockChart.options.navigator.slider.minimum = e.minimum;
          stockChart.options.navigator.slider.maximum = e.maximum;
          stockChart.render();
        }
      }
    }
    

    Please take a look at this JSFiddle for working code.

    StockChart with Synchronized range


    Thangaraj Raman
    Team CanvasJS

    in reply to: Date display on axis #35934

    @shalkt,

    The datapoint y-value can only accept numeric values as of now. However, you can store a custom option (let’s say yLabel) for the song name and show the same in tooltip with the help of toolTipContent as shown in the code-snippet below.

    array_push($dataPoints, array("x"=> strtotime($row['sch_date']) * 1000, "y"=> 1, "yLabel"=> $row['label']));
    toolTipContent: "{x}: {yLabel}",

    chart displaying custom option in tooltip

    Please check this updated project for a working example.


    Thangaraj Raman
    Team CanvasJS

    in reply to: reversed property in scatter Chart #35897

    Nishant Chauhan,

    Axis reversed property seems to be working fine in JS, JSP, etc. 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 run it locally at our end, look into the code to understand the scenario better, and help you out?


    Thangaraj Raman
    Team CanvasJS

    in reply to: Date display on axis #35770

    @shalkt,

    Please refer to this webpage for instructions on sharing files from Google Drive


    Thangaraj Raman
    Team CanvasJS

    in reply to: Date display on axis #35762

    @shalkt,

    Axis range and interval are auto-calculated based on datapoint values in the chart. However, it can be overridden by setting minimum, maximum, and interval properties for axisX or axisY.

    Y axis values are not displayed at all.

    Can you please create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with the sample data/database so that we can look into the code, understand the scenario better and help you out?


    Thangaraj Raman
    Team CanvasJS

    in reply to: Blur area chart #35725

    @sonika,

    Based on the JSFiddle shared by you, calling chart.render() inside the click event handler after the class expandedgraph is added to the DIV container seems to be working fine. Please check the below code snippet –

    $("#PortfolioTrend").click(function () {
      $("#zoom").addClass("expandedgraph");
      chart.render();
    })

    Also, please take a look at this JSFiddle for a working example.

    Displaying Chart in a popup


    Thangaraj Raman
    Team CanvasJS

    in reply to: Blur area chart #35671

    @sonika,

    Can you please create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out?


    Thangaraj Raman
    Team CanvasJS

    in reply to: How do I show y-axis with data converted to percentage #35281

    Suhas Patil,

    You can use labelFormatter function on axisY to convert the axisY labels to percentages.

    To switch the axisY labels from percentages to absolute values you can create a drop-down menu with the respective options. Based on the option selected you can update the labelFormatter function and then call chart.render().

    document.getElementById("changeAxisYLabel").addEventListener('change', function(event){
      if (event.target.value == "absoluteValue") {
        chart.options.axisY.labelFormatter = function(e) {
          return e.value;
        }
      }
      else if (event.target.value == "percentage") {
        chart.options.axisY.labelFormatter = convertToPercentage;
      }
      chart.render();
    });

    Please take a look at this JSFiddle for a working example on the same.

    Chart with Axis Y Labels as Percentage


    Thangaraj Raman
    Team CanvasJS

    in reply to: Elemental grid color… #35244

    Chris,

    Color of the axis lines can be changed by setting lineColor for axisX or axisY respectively.

    Chart with Axis Line Color


    Thangaraj Raman
    Team CanvasJS

    in reply to: Elemental grid color… #35203

    Chris,

    Color of the grid lines can be changed by setting the gridColor for axisX or axisY respectively.

    Chart with Axis Y Grid Color


    Thangaraj Raman
    Team CanvasJS

    in reply to: Change cursor icon #35187

    Alex,

    The commercial version of CanvasJS includes all features.

    Cursor type can be changed when you move the mouse over dataPoints, dataSeries, or legend by setting the respective cursor properties.

    If you are looking for something else, can you kindly brief us further about your requirement so that we can understand your scenario better and help you out with an appropriate solution?


    Thangaraj Raman
    Team CanvasJS

    in reply to: CanvasJS chart with signal peak loses xy zoom ability #35078

    Volker Voß,

    As mentioned before, there is a restriction on the number of dataPoints required for zooming to work and we don’t have an option to remove this restriction as of now.


    Thangaraj Raman
    Team CanvasJS

    in reply to: CanvasJS chart with signal peak loses xy zoom ability #35063

    Volker Voß,

    Based on your scenario you can assign the dataSeries with signalPeak values to an existing y-axis instead of creating a new y-axis by setting axisYIndex and it should work fine.

    Please take a look at this updated JSFiddle.

    Zooming with multiple Y-Axis


    Thangaraj Raman
    Team CanvasJS

Viewing 15 posts - 211 through 225 (of 226 total)