[Manoj Mohan]

@rolly,

To integrate CanvasJS with your PHP application, you can check out this gallery example. To know about the connection changes that need to be done, please take a look at the below lines in the example shown.

// Creating a new connection.
// Replace your-hostname, your-db, your-username, your-password according to your database
$link = new \PDO(   'mysql:host=your-hostname;dbname=your-db;charset=utf8mb4', //'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4',
                 'your-username', //'root',
                 'your-password', //'',
                 array(
  \PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
   \PDO::ATTR_PERSISTENT => false
  )
);

Also check out this forum thread for more information about integrating CanvasJS with PHP.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@rolly,

Can you please let us know the server side technology being used by you so that we can understand your scenario better and help you with the appropriate steps to integrate in your application?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mrdavid,

Aligning the zero value across multiple y-axes is not available as an inbuilt feature as of now. However, you can align it by setting minimum, maximum and interval of the axes dynamically as shown in the code snippet below.

var allAxes = [...chart.axisY, ...chart.axisY2];

allAxes.forEach(axisInstance => {
  var initialMin = axisInstance.get("minimum");
  var initialMax = axisInstance.get("maximum");
  var initialInterval = axisInstance.get("interval");

  var newMin, newMax;

  if (initialMin >= 0) {
    newMin = (-initialMax * desiredFraction) / (1 - desiredFraction);
    newMax = initialMax;
  } else if (initialMax <= 0) {
    newMin = initialMin;
    newMax = (initialMin * (desiredFraction - 1)) / desiredFraction;
  } else {
    newMin = Math.min(
      initialMin,
      (-initialMax * desiredFraction) / (1 - desiredFraction)
    );
    newMax = (-newMin * (1 - desiredFraction)) / desiredFraction;

    // Ensure newMax doesn't undershoot data
    if (newMax < initialMax) {
      newMax = initialMax;
      newMin = (-newMax * desiredFraction) / (1 - desiredFraction);
    }
  }

  // Update axis values & re-render
  axisInstance.set("minimum", newMin, false);
  axisInstance.set("maximum", newMax, false);
  axisInstance.set("interval", initialInterval);
});

Also check out this JSFiddle for the complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@khansadev,

We were unable to reproduce the issue related to disappearing of the chart in the Firefox browser even after running for more than 24hrs.

why, the crosshair, does not work properly here,

Regarding the crosshair behavior, it will always snap to the closest x-axis value when snapToDataPoint is set to true. Since the datapoints on the x-axis are very close to each other, the y-axis crosshair may show values that are not exactly the one you’re expecting. To resolve this, you can try setting snapToDataPoint to false in your use case.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@khansadev,

We were unable to reproduce the issue as the code that has been shared above is missing some dependencies when running it. Can you kindly share code along with sample data over Google-Drive or Onedrive so that we can reproduce the issue at our end and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@khansadev,

Chart seems to be working fine even when opening a page on more than 20 tabs containing 8-10 dynamic/real-time charts. Although we see marginal increase in GPU usage but chart doesn’t disappear. Can you kindly share a complete code over Google-Drive or Onedrive reproducing the issue you are facing 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]

@omeren,

Sorry, borders are not available for column as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@omeren,

I want to only radius the upper right and left parts of the data series in the column chart. Is this possible?

Sorry, it is not possible to have corner radius in column chart as of now.

Can I set the background color and frame color of the data series in the column chart separately?

Are you looking for interlaced color? To change the color of the column, you can use color property of datapoint. If this doesn’t fulfill your requirement, kindly share a pictorial representation and brief us further about your requirement so that we can understand your scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@riron2421,

To remove the weekend gap from the chart, you can use customBreaks as shown in this code snippet.

function removeWeekendGap(chart) {
  var scaleBreaks = [],
      dps = chart.data[0].dataPoints;
  for (var i = 1; i < dps.length; i++) {
    if (dps[i].x.getDate() - 1 != dps[i - 1].x.getDate())
      scaleBreaks.push({
        startValue: new Date(
          dps[i - 1].x.getTime() + 12 * 60 * 60 * 1000
        ),
        endValue: new Date(dps[i].x.getTime() - 12 * 60 * 60 * 1000),
      });
  }

  chart.axisX[0].scaleBreaks.customBreaks = scaleBreaks;
  chart.render();
}

Please check out this Stackblitz for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Marco,

To zoom into a certain region, there should be a minimum of 3-4 dataPoints – behavior is designed such that zooming is limited upto a certain region, so the user doesn’t end up zooming into a blank-region (region with no dataPoints). It is not possible to change the restriction as of now.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@phungthienphu,

One of our representatives from the sales team will get in touch with you regarding license query.

For any other license related queries feel free to contact us at sales@canvasjs.com.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@eszlariz2,

You can host the commercial version of the CanvasJS chart package (@canvasjs/charts) on your own server by following these steps:

1. Compress the package into a .tar.gz file.
2. Upload the compressed file to your server.
3. In your package.json, reference the package using the URL of your server, like this:

@canvasjs/charts": "https://your-server.com/packages/canvasjs-charts-v3.10.16.tar.gz

This approach avoids conflicts with public npm versions and integrates smoothly into your CI system. Please refer to this article for more information.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@arj,

Can you 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 and help you out?

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@arj,

You can reset dataPointWidth to auto-calculated value by setting it to null after rendering the chart with desired dataPointWidth.

chart.set("dataPointWidth", null)

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@arj,

Thank you for your feedback on the column gaps in the chart. The varying space between the columns occur to make them look crisp & avoid a blurry appearance, especially with a larger number of datapoints. We’ll revisit this behavior to improve it in future versions. In the meantime, you can try setting dataPointWidth to a smaller value if that helps in your case.

—-
Manoj Mohan
Team CanvasJS