[Manoj Mohan]

@joshuasosa,

Glad the you were able to figure it out based on your scenario :)

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Greg,

We tried creating chart with the sample JSON used by you and it seems to be working fine. Please take a look at the screenshot below where date in tooltip is shown as per the JSON data i.e. for 1st Jan 2019, closing value as 130.53.

Also, check out this updated JSFiddle for the same.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@greg-aharonian,

JavaScript dates may display an incorrect day when passed in ISO format (YYYY-MM-DD), depending on the user’s time zone. According to MDN, date-only formats are interpreted as UTC time, and date-time formats are interpreted as local time when the time zone offset is absent. To avoid this problem, you can use date-time format or use a different date format along with time-zone. Please take a look at this JSFiddle for an example on the same.

Also, refer to this Stack Overflow thread for more information.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@maksuda,

CanvasJS is a JavaScript Charting Library and provides API to create & customize charts in the applications. With the help of API, you can build interactive dashboard. Please take a look at these dashboard samples built using CanvasJS.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@klauskobald,

CanvasJS is a client-side library that requires browser environment and APIs to run. You should prevent running CanvasJS in the server environment. To do so in Nuxt app, you can use .client suffix to your component containing CanvasJS Chart. Please checkout this StackBlitz example for an example on integrating CanvasJS Charts in Nuxt app.

Also, check out this documentation page of nuxt to know more about client side component.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dbrtechnopharma,

In this example, we are reading data from /static/btc-usd-weekly-2021.json file. In your case, you can store the Nifty 200 data in a JSON format and pass it as datapoints to the chart.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jtr,

Glad that you figured it out :)

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@jtr,

Please take a look at this Gallery Page for an example on rendering chart with data from JSON in PHP. If you are still facing issue, kindly create a sample project reproducing the issue you are facing & share it with us so that we can look into the code, understand the scenario better and help you out.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nydia,

You can use rangeChanged event to get to know the datapoint with maximum value within viewport on zooming/panning. Please take a look at this JSFiddle for an example on showing maximum datapoint within viewport using stripline.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joshuasosa,

You can show axis labels in exponential form with the help of unicode characters as mentioned in this thread. Please take a look at this JSFiddle for an example.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@themich,

[Update]

We have released CanvasJS Angular Charts v1.1.0 to make our charts work with Angular Universal(SSR) apps. Please refer to the release blog for more information.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

JE,

[Update]

We have released CanvasJS Angular Charts v1.1.0 to make our charts work with Angular Universal(SSR) apps. Please refer to the release blog for more information.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@harishv,

You can create a websocket service in Angular app which establishes connection with your C-program and receives data. The received data should be parsed to the format accepted by CanvasJS to update the chart. Please check the code-snippet below that shows how to parse the data received from the websocket.

.
ngOnInit(): void {
  this.websocketService.connect();
  this.websocketService.messageReceived.subscribe((message: string) => {
    // message passed from the socket is in format { "value": 10 }. Parse to dataPoint format as per value returned from the socket service.
    let data = JSON.parse(message);
    this.dataPoints.push({
      y: data.value
    });
    this.chart.render();
  })
}
.

You can download the working sample from here. Also, refer to this article for more information on creating websocket service in Angular.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@themich,

CanvasJS is a client-side library that requires browser environment and APIs to run. You should prevent running CanvasJS in the server environment by importing chart component only when document object is present. Please take a look at the code-snippet below.

/*canvasjs.angular.component.ts*/
.
.
if(typeof document === 'object' && !!document)
    var CanvasJS = require('../../node_modules/@canvasjs/charts');
.
.
/*app.component.ts*/
export class AppComponent {
  isDOMPresent:Boolean = typeof document === "object" && !!document;
  .
  .
}
/*app.component.html*/
<div>
  <canvasjs-chart  *ngIf="isDOMPresent" [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>
</div>

Kindly download the working sample project that shows how to add CanvasJS Angular Chart component in Angular v17 (SSR) from here.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mustadirmahmood,

Sorry, rendering CanvasJS Chart as SVG is not possible as of now.

—-
Manoj Mohan
Team CanvasJS