[Vishwas R]

@snehal,

Can you kindly share the sample project reproducing the issue you are facing along with sample database over Google-Drive or Onedrive so that we can look into the structure of database and your code, understand your scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@paulfansare,

You can render chart with dataPoints based on the values being selected from dropdown using change event. Below is the code-snippet for the same.

$(".dropdown").change(function() {
	chart.options.data[0].dataPoints = [];
  var e = document.getElementById("dd");
	var selected = e.options[e.selectedIndex].value;
  dps = jsonData[selected];
  chart.options.title = { text: "Chart with " + selected };
  for(var i in dps) {
  	var xVal = dps[i].x;
    chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
  }
  chart.render();
});

Please take a look at this JSFiddle for complete code.

But i am facing an issue, i want to add data series using a multiselect dropdown,

It would be helpful for us to understand your issue better when we look at your code working live in jsfiddle. So I request you to create jsfiddle reproducing the issue and share it with us.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@cronk005,

The issue seems to happen due to overriding of window.onload event. Changing it to jQuery ready / load should work fine in your case. Please find the sample project here. Please refer this stackoverflow thread for more info.

PS: dataPoints are hardcoded in sample-project as AJAX requests (php-service-http://globe-trekking.com/vg/charts/top_aircraft_data.php) gave 404 Not Found Error.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@snehal,

Please take a look at this sample project to render multi-series stackedColumn chart with data from database.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jmnn,

In update method, you are updating the last dataPoint’s y-value only and not x-value because of which x-value remains same and being shown in crosshair as such. Updating x and y-values should work fine in your case. To keep axis labels constant, please take a look at this sample dashboard. You can download the dashboards sample from our download page and try customizing and running locally.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@paulfansare,

Yes, it works even if you add few more dataSeries as it’s made generic to work with multi-series.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@stella,

Exporting chart data as excel / CSV is not available as an inbuilt feature as of now. However with few lines of code, you can convert chart data into comma-separated CSV and download it. Please find the code snippet for the same below.

function convertChartDataToCSV(args) {  
  var result, ctr, keys, columnDelimiter, lineDelimiter, data;

  data = args.data || null;
  if (data == null || !data.length) {
    return null;
  }

  columnDelimiter = args.columnDelimiter || ',';
  lineDelimiter = args.lineDelimiter || '\n';

  keys = Object.keys(data[0]);

  result = '';
  result += keys.join(columnDelimiter);
  result += lineDelimiter;

  data.forEach(function(item) {
    ctr = 0;
    keys.forEach(function(key) {
      if (ctr > 0) result += columnDelimiter;
      result += item[key];
      ctr++;
    });
    result += lineDelimiter;
  });
  return result;
}

Please take a look at this JSFiddle for fully functional example on exporting chart data as CSV. Also take a look at this plugin, which does the same.

If this doesn’t help you, kindly share working sample project along with sample database over Google-Drive or Onedrive so that we can try running it locally, understand your scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jasata,

Sorry, polar charts are not available as of now.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@paulfansare,

You can loop through dataPoints of all the series to calculate the minimum, maximum & average values. Please find the code snippet below.

function performCalculations(dataPointValue, currentValue, seriesIndex) {  
  sum = 0;
  for( var j = 0; j<dataPointValue.length; j++ )
    sum = sum - (-dataPointValue[j]);
  average = sum / dataPointValue.length;
  seriesIndex = seriesIndex + 1;

  $("tr:eq("+seriesIndex+") #td" + 0).html(seriesIndex)
  $("tr:eq("+seriesIndex+") #td" + 1).html(Math.min.apply(null, dataPointValue))
  $("tr:eq("+seriesIndex+") #td" + 2).html(Math.max.apply(null, dataPointValue))
  $("tr:eq("+seriesIndex+") #td" + 3).html(average.toFixed(2))
  $("tr:eq("+seriesIndex+") #td" + 4).html(currentValue)
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@snehal,

The project the you have shared doesn’t seem to have CanvasJS Charts in it. If you are looking for rendering chart with data from database in PHP, please take a look at gallery example on PHP Chart Data from Database. You can also download PHP samples (which includes reading data from database) from our download page and run it locally.

If you are still facing any issue, please create sample project reproducing the issue and share it with us so that we can look into your code, understand it better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jmnn,

How could I update the crosshair?

It would be helpful for us to understand your scenario better when we look at working code live in JSFiddle than guessing the issue by looking at screenshot. I request you to create JSFiddle reproducing the issue and share it with us.

I also thought about erasing the last datapoint and adding the new one, but I did not find the instructions to erase a datapoint. Can you give some solution?

Datapoints is an array. So you can remove last dataPoint using either pop method or splice method.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Maksim,

Updating the width of image on resizing the window should work fine in your case. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jerry_k7,

dataPoints can accept [{"x": 1, "y": 23},...] or labels and few other properties like indexLabel, color, etc and not as id and temp. Changing $point = array("id" => $row['id'] , "temp" => $row['temp']); to $point = array("x" => $row['id'] , "y" => $row['temp']); in data.php should work fine in your case. Please download the updated sample code here.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Maksim,

If you are trying to add background image to chart, you can add background-image to the chart-container and set chart backgroundColor to transparent. Below is the code-snippet.

<div id="chartContainer" style="height: 300px; width: 100%; background-image:url('https://canvasjs.com/wp-content/uploads/2021/03/background-image-for-chart.jpg');"></div>

Please take a look at this JSFiddle for complete code.

Or if you like to position image on-top of chart with defined width and position, you can add image and position with the help of CSS properties as shown in this tutorial.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@newvibe,

Sorry, adding space in indexLabel or margin / padding to the indexLabel is not possible as of now.

—
Vishwas R
Team CanvasJS