[Manoj Mohan]

@pimohdaimaoh,

You can create multiple charts in a single page by providing separate container and options for each chart as shown in this documentation page. In order to use single text file to render multiple charts, you need to parse the data from text file to the format accepted by CanvasJS. Please take a look at the code snippet below for the same.

function handleFiles() {
  var fileList = this.files;
  var reader = new FileReader();

  reader.readAsText(fileList[0]);
  reader.onload = function() {
    renderChart(reader);
  }

}

function renderChart(reader) {
  var dpsList = reader.result;  
  var dataPoint;

  dpsList = dpsList.split("\n");

  for(var i = 1; i < dpsList.length; i++) {
    var separateData = dpsList[i].split(" ");
    yValLand = [parseFloat(separateData[1]), parseFloat(separateData[2])];
    yValOcean = [parseFloat(separateData[4]), parseFloat(separateData[5])];
    xVal = new Date(parseInt(separateData[0]), parseInt(separateData[1]));

    landTempChart.options.data[0].dataPoints.push({x: xVal, y: yValLand})
    oceanTempChart.options.data[0].dataPoints.push({x: xVal, y: yValOcean})
  }

  landTempChart.render();
  oceanTempChart.render();
}

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ezsolve,

You can set the shared property of tooltip to true for showing single tooltip containing values from all data-series present in chart.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ankitlwt,

You can store json file in static folder and load it in view as data = open(dir_path + “/static/.json”).read(). You can then parse the JSON data in format accepted by CanvasJS Chart.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@bkshn,

Setting valueFormatString: "#,##0.0" should show values in this case. Please refer to valueFormatString documentation page to know more about the format options available.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@schweic,

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

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rr4v,

Thanks for bringing this issue to our notice. We will look into this in future releases.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@bkshn,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@stefan-alfs,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can reproduce the issue at our end, understand the scenario better and help you out?

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@vaibhav6200,

Sorry, it is not possible to visualize tree data structure as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@glowery,

It seems like you are using older version of CanvasJS Charts. We have updated the behaviour of tooltip to show content only for the dataseries that are visible in CanvasJS Charts v3.7. JSFiddle shared above uses the latest version of CanvasJS because of which tooltip shows the content of dataseries which are visible. Updating CanvasJS Chart version to latest will resolve the issue you are facing.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ali136m,

To overcome the issue you are facing, you can hide the dataseries which are outside of the viewport range by setting visible property to ‘false’ in rangeChanging event handler. Please take a look at the code snippet below for the same.

rangeChanging: function(e) {
  if(e.stockChart.charts[0].data.length > 1) {
    var chart = e.stockChart.charts[0];
    for(i=1; i<chart.data.length; i++) {
      if(chart.options.data[i].minMaxXValue[0] > e.maximum || chart.options.data[i].minMaxXValue[1] < e.minimum)
        chart.data[i].get('visible') && chart.data[i].set('visible', false, false);
      else
        !chart.data[i].get('visible') && chart.data[i].set('visible', true, false);
    }
  }
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ali136m,

The range of an axis depends on multiple factors like dataseries attached to it, the datapoint values of all the dataseries visible in the viewport, etc. In your case, the issue might be happening due to datapoint values in line series. Removing the line series seems to be working fine as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ravindu-dilhara,

The sample shared above seems to be working fine. If you are still facing issue, can you kindly share the sample reproducing the issue over Google-Drive or Onedrive so that we can look into your code, run it locally at our end to understand the scenario better and help you out?

https://imgur.com/a/5tQ4YHD

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@elitriona,

It seems like you are not rendering the chart after updating the datapoints on ajax request. Calling chart.render() after updating the datapoints will work fine in your case. Please take a look the code snippet below for the same.

$.getJSON('https://trionacgm.fly.dev/api/v1/entries.json?count=12', function(data) {
  chart.options.data[0].dataPoints = [];
  $.each(data, function(key, value) {
    chart.options.data[0].dataPoints.push({
      x: (value['date']),
      y: Number(value['sgv'])
    });
  });
  chart.render();
});

Also, check out this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@anu,

Can you kindly share sample data and brief us more about your requirement so that we can understand your scenario better and help you out?

—
Manoj Mohan
Team CanvasJS