[Manoj Mohan]

@yo3dgjhcms-ro,

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]

@tgriffiths,

We are unable to reproduce the issue at our end, it seems to work fine across iPad & iPhone. However, we suggest you to create chart instance once and update add datapoints in AJAX call instead of creating new chart instance for every datapoint. Also, instead of setting striplines properties using set method, we suggest you to update it through options and call render method once after updating all the options. Please take a look at this updated sample project for complete working code.

If the issue still persists, kindly share us more details like iOS version and the device in which you are facing issue so that we can try it out at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@supportprojectionsmart-com,

Can you kindly share a JSFiddle or a pictorial representation of your requirements so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@gibran-shah,

Sorry, this feature is not available as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@himanshu-singhal,

You can avoid overlapping of indexlabels by skipping alternate labels based on chart width. Repeating the same thing on rangeChanged event will avoid overlapping of indexlabels upon zoom / pan. Please find the code-snippet for the same below.

function skipIndexLabel() {
  var axisXMin = chart.axisX[0].viewportMinimum;
  var axisXMax = chart.axisX[0].viewportMaximum;
  var noDps = noOfDataPointWithinViewport(axisXMin, axisXMax);
  var chartBounds = chart.get("bounds");
  var widthOfChart = chartBounds.x2 - chartBounds.x1;
  var widthOfColumn = widthOfChart / noDps;

  if(widthOfColumn > 60) 
    skipIndexLabelMod = 1;
  else if(widthOfColumn > 40) 
    skipIndexLabelMod = 2;
  else if(widthOfColumn > 30) 
    skipIndexLabelMod = 3;
  else if(widthOfColumn > 20) 
    skipIndexLabelMod = 4;
  else if(widthOfColumn > 10) 
    skipIndexLabelMod = 5;
  else 
    skipIndexLabelMod = 6;

  for(var i=0; i<chart.options.data[3].dataPoints.length; i++) {
    if(i%skipIndexLabelMod === 0) {
      chart.options.data[3].dataPoints[i].indexLabel = "#total";
    } else {
      chart.options.data[3].dataPoints[i].indexLabel = "";
    }
  }
  chart.render();
}

Please take a look at this JSFiddle for working code.

P.S.: You can even reduce the font-size of indexlabels by seting indexLabelFontSize property to smaller value along with the above mentioned solution to improve it further.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Gibran,

You need to subtract the offset of the chart container from e.pageX/e.pageY to get the coordinate value of the click with respective to canvas as shown in this documentation page.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@pimohdaimaoh,

The JSFiddle shared above seems to be working fine with the temperature.txt file which contains the data shared by you.

If you are still facing the issue, kindly share sample data you are using for temperature.txt so that we can reproduce the issue at our end, understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@leonardo123123,

You can use multi-series chart to display the information about multiple departments. You can loop through each department information and parse it in dataPoint format accepted by CanvasJS to each dataseries of chart.

If you are still facing the issue, 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]

how about if theres TWO different data in one text and I want to create a separate graph output in one page?
Example:

Mean Surface Air Temperature over Ocean or Land Areas (C)
Annual Mean Anomalies with respect to 1951-1980

@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.

OR if the tx data is this?

Seasonal cycle from MERRA2 using base period 1980-2015
Year Anomaly
1880.04 -2.6
1880.13 -2.4
1880.21 -1.57
1880.29 -0.64….

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

—–
Manoj Mohan
Team CanvasJS

[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