[Vishwas R]

@ljohnson,

We are unable to reproduce the issue at our end. I request you to share a sample reproducing the issue – along with sample data so that we can look into the code, understand the scenario better and help you resolve the same.

I would also recommend you to use the latest version of CanvasJS and try the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ljohnson,

Can you kindly share JSFiddle reproducing the issue you are facing so that we can look into the code, understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

Adam,

CanvasJS is a JavaScript Charting library that can be integrated with any technologies like Angular, React, VueJS, etc. Please refer this tutorial for deployment of website in Azure.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@warwick,

Sorry, we don’t have a gauge chart as of now but a semi doughnut chart can be used to create it. Please below the steps below for creating a gauge chart using a doughnut chart.

First, we need to create an object that will store all the necessary data that is needed to be shown on the gauge chart. The code snippet below shows an example of that object:

var gauge = {
  title:{text: "Gauge Chart"},
  data: { y: 7 }, //gauge value 
  maximum: 10
};

In the second step, we will initialize the chart object and populate its dataPoints considering the fact that only half of the doughnut chart be displayed. Please refer to the code snippet below for achieving the same:

var chart = new CanvasJS.Chart("chartContainer");
createGauge(chart);

//Function for gauge
function createGauge(chart){
  //Caluculation of remaining parameters to render gauge with the help of doughnut
  gauge.unoccupied = {
    y: gauge.maximum - gauge.data.y , 
    color: "#DEDEDE", 
    toolTipContent: null, 
    highlightEnabled: false,
    click : function (){ gauge.unoccupied.exploded = true; }
  }
  gauge.data.click = function (){ gauge.data.exploded = true; };
  if(!gauge.data.color)
    gauge.data.color = "#69C434";
  gauge.valueText = {text: gauge.data.y.toString(), verticalAlign :"center"};

  var data = {
    type: "doughnut",
    dataPoints: [
      {
        y: gauge.maximum ,
        color: "transparent",
        toolTipContent: null
      },
      gauge.data,
      gauge.unoccupied
    ],
  };

  if(!chart.options.data)
    chart.options.data = [];
  chart.options.data.push(data);

  if(gauge.title){
    chart.options.title = gauge.title;
  }

  //For showing value
  if(!chart.options.subtitles)
    chart.options.subtitles = [];
  chart.options.subtitles.push(gauge.valueText);

  chart.render();
}

You can also refer to take a look at this JSFiddle for a working example with sample code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nickneyland,

The dataPoints seems to be random as they are generated using random method and are not from CSV. Please take a look at this JSFiddle for Dynamic chart from CSV.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@bakanarchie,

In jQuery plugin, you can get reference to the chart object using $(“#chartContainer”).CanvasJSChart(). And you can update any of the options – like $("#chartContainer").CanvasJSChart().options.data[0].type = "column".

However if you like to update chart-options and call chart.render(), as a first step you need to get chart reference as $("#chartContainer").CanvasJSChart(). Once you have reference to the chart, you can update the chart-options and call chart.render(). Please refer second example in jQuery integration page for a live example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sagar-nevinainfotech,

Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Khanh,

You can explode (slideout / slidein) a slice of pie / doughnut chart programmatically using exploded property. Please refer documentation for more info on the same along with live example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rahulmanas,

You can customize the color of marker using markerColor. Please refer documentation for more customization options.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemantdave,

Can you kindly share sample project reproducing the issue you are facing over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemantdave,

Can you kindly share sample project reproducing the issue you are facing over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you out.

Considering this as duplicate of canvasjs charts not working in vtiger dashboard widget, hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@dhami97,

You can update chart without refreshing the page by updating chart-options and re-rendering it. Please take a look at this documentation page and updated JSFiddle for the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@akarsh5080,

Epoch timestamp is in seconds whereas JavaScript uses milliseconds as timestamp. Converting epoch timestamp to JavaScript timestamp before passing it to chart should work fine in your case. You can convert epoch timestamp to JavaScript timestmap by multiplying epoch timestamp by 1000. $javaScriptTimestamp = $epochTimestamp * 1000; Please refer this stackoverflow thread for more information on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@santoshbaruah,

Please take a look at the gallery example on rendering chart in PHP with data from database. You can also download sample project from our download page to run it locally.

If this doesn’t help you fulfill your requirements or finding any difficulty in integrating CanvasJS in your PHP page, kindly share sample project along with sample database over Google-Drive or Onedrive so that we can run it locally at our end, understand the issue you are facing and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@swathichittani,

React Charts seems to be working fine, please download React Samples from our download page.

If the issue still persists, kindly create sample project and share it with us over Google-Drive or Onedrive so that we can run it at our end, understand the scenario better and help you resolve the same.

—
Vishwas R
Team CanvasJS