[Manoj Mohan]

@pf-canvasjs,

To interpret x-values as timestamps, set the xValueType to dateTime in the dataSeries options.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@pf-canvasjs,

I have been trying to set the interval and interval type of the Chart X Axis in my React app and it is throwing a run-time error.
I am trying to set the interval type to “day” or “month”.
But it crashes!

Browser can crash if the overall interval is too small because of interval & intervalType combination. You can avoid this by setting interval & intervalType, according to axis range, such that there are minimal labels to be rendered on the axis. If you are still facing the issue, kindly share the JSFiddle or CodePen reproducing the issue so that we can look into the options being passed, understand your scenario better and help you out.

I tried the same with the JSFiddle example given in the documentation and that has the same issue. It is failing with an error “Uncaught ReferenceError: CanvasJS is not defined”

There seems to be some issue in JSFiddle because of which the script mentioned in the resource section doesn’t get loaded. To overcome this, you can place the code to include https://cdn.canvasjs.com/canvasjs.min.js script inside the html content and should work fine in your case.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Shannon,

Glad that you figured it out.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Shannon,

Can you kindly create a JSFiddle reproducing the issue you are facing along with sample data (dummy data) & 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]

@redcncsas,

You can define interval groups and their associated styles (like color or lineDashType) in an object. Then, iterate through the dataPoints and assign each dataPoint to the appropriate dataSeries as per associated interval groups. Please take a look at this StackBlitz project for complete working code.

And also for each of those groups do we calculate the regression line separately?

You can use line chart to draw regression line. Please refer to this article for more information on performing regression analysis with CanvasJS.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@redcncsas,

Yes, you can achieve this in CanvasJS by splitting your data into multiple series, each representing a specific time period. Each series can have its own unique styling, such as different colors, line dash-type or markers. Since the x-axis is time-based, CanvasJS will automatically create gaps for the periods without data (like April or August) and the series will overlap if needed. Please have a look at the below code snippet for splitting the data across multiple dataseries.

data: [{
  type: "line",
  dataPoints: [
    { x: new Date(2023, 0, 1), y: 120 },
    { x: new Date(2023, 2, 30), y: 135 }
  ],
  color: "#FF0000"  // Red for Jan-Mar
}, {
  type: "line",
  dataPoints: [
    { x: new Date(2023, 4, 1), y: 170 },
    { x: new Date(2023, 6, 20), y: 180 }
  ],
  color: "#0000FF",  // Blue for May-Jul
  lineDashType: "dash"   // Dashed line style
}]

Also, check out this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

window.onload is executed after the entire page (including all dependent resources like images, stylesheets, and scripts) has finished loading. It ensures that all DOM elements and resources (like the CanvasJS script) are available before the code inside window.onload is run. $(document).ready() runs as soon as the DOM is fully loaded and ready, but before other resources (like images and external stylesheets) are completely loaded. Please refer to this link for more information about window.onload.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

It seems like you’re assigning the same ID to both the chart container and its wrapper. This is likely causing the overlayed canvas (added for the axis) to be removed. Replacing it with a unique ID should resolve this issue. Additionally, you need to call the copyAxis function when the window is resized or when scrolling occurs. Since you’re using Split.js, which doesn’t trigger an event on resizing the div blocks, there might be an issue with the positioning of the axis element. Please take a look at this updated JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

Updating all the occurrence of chart object’s variables names in the example should work fine in your case. Please take a look at this updated JSFiddle where chart object is passed as an argument to copyAxis function.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik,

It seems like you are using a different variable name for chart object. Replacing it with the proper variable name should work fine in your case.

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

@dpanscik,

The StackBlitz sample shared above uses CanvasJS StockChart not Chart. Error was being thrown as you were trying to access axisX & axisY as stockchart.charts[0].axisX instead of accessing them directly as stockChart.axisX. Also, we need to consider x-axis bounds instead of y-axis for fixing the axis as you are using Bar chart which has axisX as vertical and axisY as horizontal axis.

Please take a look at this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dpanscik

Why do you define dataPoints2 = []; is it used somewhere that is not visible in this example?

Thanks for the feedback. We have updated the sample project.

I tried to drop the necessary code into a existing javascript canvas.js project and I am getting an error.

Can you kindly create a 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]

@dpanscik,

To make the y-axis stationery, you can position an overlayed canvas on top of the stockchart and copy the y-axis onto the overlayed canvas.

Please check this StackBlitz for a working example.

—
Manoj Mohan
Team CanvasJS

[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