[Vishwas R]

@kodian,

You can update datapoints in the chart for every 2 seconds by changing chart-options & calling chart.render() within setInterval.

setInterval(function() {
	chart.options.data[0].dataPoints.push({x: 10, y: 20});
	chart.render();
}, updateInterval);

To update the same with the data from the database, you need to read data from database & return it from PHP (service.php), parse it to the format accepted by CanvasJS & render the chart. Please find the code-snippet below.

var updateChart = function() {
	$.getJSON("service.php", function(result) {
		dps.splice(0, dps.length);
		$.each(result, function(index, value) {
			dps.push(value);
		});
	});

	chart.render();
};

setInterval(function() {
	updateChart()
}, updateInterval);

Please take a look at this sample project for complete working code.

Also refer to this forum thread and PHP Gallery Page for more examples along with working code. You can also download PHP sample that you can run locally from our download page.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Van,

Sorry, it’s not possible to add border to the bars in Range Bar Chart as of now. However you can check out other options like bevelEnabled to give chisel-effect at the corners of the bar.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hanojbudime,

1) Look at my stacked-bar-chart y-axis label is repeating why ? jsfiddle

In case of Stacked Bar Chart, multiple bars with aligned x values are plotted on same axis & not based on labels. Passing x-values should work fine in this case. Also, we suggest you to use legend instead of indexLabels to denote the name of news-media & to use shared tooltip to make visualization better. Please take a look at this updated JSFiddle with above mentioned changes.

2) How to add image on each stack bar like (each color on that bar should be image of that dataPoint)

Please take a look at this documentation page for step-to-step tutorial on positioning image on top of chart. This JSFiddle shows an example on positioning image over each bar in Stacked Bar Chart.

Also refer to this Gallery Page & this JSFiddle for more examples on positioning image on top of chart along with complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nehamahajan,

We keep improving our product on every update. The space between axis label & ticks are improved to make it look better & bring consistency across all the axes (axisX, axisX2, axisY & axisiY2). This change has happened in one of our updates because of which it might look different between v2.3.2 & v3.2.18. If you like to reduce space between axis-line & axis-label, you can do so by reducing the tickLength.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Michael,

You seem to have purchased commercial version of Chart & not StockChart. To remove trial version from StockChart, you can easily upgrade to StockChart license. One of our representatives from sales-team will contact you on this soon & help you on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@robvdv,

1. Config for axisX and axisY seem to be swapped with bar charts as opposed to column charts

In column charts, axisX is the horizontal and axisY is the vertical. In case of Bar charts, axisX is vertical and axisY is horizontal. In case of bar chart, if you like to set some properties for vertical axis, you will have to set it for axisX.

2. Changing either of these axes to labelTextAlign: ‘left’ does not left align the labels to the left margin

Setting labelTextAlign property allows you to align the text within particular label to left / center / right according to the line that has maximum width out of all the lines that are wrapped. In your example, label ‘long long long long long’ is getting wrapped after 3 times long making it the maximum width out of all the wrapped text. Please take a look at this updated JSFiddle where I have introduced a long text within a label which makes it more clear about this use-case.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bramotiti,

Yes, it’s possible to render chart with data from database. Please take a look at this gallery page for an example on rendering chart with data from MySQL database in PHP. If you are using different technology like ASP.NET, Java, etc., kindly download working samples from our download page. If you are unable to find sample for the technology that’s being used in your application, kindly share the technologies used so that we can share a working sample for you.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sptrainee31,

jQuery UI datepicker doesn’t have time component. However you can use timepicker addon along with jQuery UI datepicker to show time-component. Please refer this article for more information.

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ebrewer,

Sorry, line-break is not supported in indexLabel as of now. However you can add multiple space in-between the words to bring it to new-line once it crosses the max-width as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@myezasifiso,

Sorry, showing tooltip on hovering axis label is not available as of now.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@myezasifiso,

HTML tags are not supported in axis labels. As addressed in previous reply, if you like to break word into multiple lines you can use labelMaxWidth. If you like to add symbols in labels, you can use unicode characters. Please take a look at this thread for more information.

If this doesn’t fulfill your requirements, kindly brief us more about your requirements so that we can understand it better & try to help you achieve the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

You can use JSON.parse() to convert string to JavaScript object / JSON in this case.

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing & share it with us so that we can look into the code / chart-options being used, understand the scenario better & help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@usha,

You can show custom text in legend-items by setting legendText property (which falls back to name property of dataPoint). You can achieve this by passing legendText property along with label for each dataPoint as shown in the below code-snippet.

dataPoints.push({
	label: (points[0]),
	legendText: (points[0]),
	y: parseFloat(points[1])
});

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@malvipanchal,

You can customize the text of export / print options by setting culture. Either you can change the text of JPG or PNG option to ‘Save as Image’ & hide the other option with the help of CSS display property. Please find the code-snippet below.

.canvasjs-chart-toolbar div>div:nth-child(2) {
  display: none !important;
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@pawan-it17,

You can swap datapoints based on colors using bubble-sort & show it in chart by adding a delay after every iteration. Delay is required as chart gets rendered within few milliseconds along with sorting datapoints. Please find the code-snippet below.

function bubbleSort() {
  var dps = chart.options.data[0].dataPoints;
  var len = dps.length;
  var inx = 0;
  var jnx = 0;

  (function sortEachElement() {
    if(jnx >= len - 1 - inx) {
      jnx = 0;
      inx++;
    }
    if(inx < len) {
      if( dps[jnx].color > dps[jnx+1].color ) {
        var temp = dps[jnx];
        dps[jnx] = dps[jnx+1];
        dps[jnx+1] = temp;
        for(var i=0; i<dps.length; i++) {
          dps[i].x = undefined;
        }
        chart.options.data[0].dataPoints = dps; 
        chart.render();
        
      }
     
      jnx++;
      setTimeout(function (){
        sortEachElement();
      }, 10);
    }
  })();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS