[Vishwas R]

@d3bsky,

Can you kindly share sample project along with sample database over Google-Drive or Onedrive so that we can look at your code, understand it better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@samgonzul,

X-Value can be numeric or date-time. But in the dataPoints that you are passing x-values are string. Changing ‘x’ to label, i.e. [{"y":1,"label":"model3"},{"y":1,"label":"model4″},{"y":1,"label":"model1"},{"y":1,"label":"model2"}] should work fine.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@d3bsky,

$ / jQuery is not defined is caused when jQuery is not loaded in the web-page. Including jQuery should work fine in your case.

If this doesn’t solve the issue you are facing, kindly create a static HTML file reproducing the issue you are facing and share it over Google-Drive or Onedrive so that we can look into your code and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@chandrakala-i,

Shift is a JavaScript array method that removes the first element from an array whereas slice is an array method that returns a shallow copy of a portion of an array. You can use slice method to remove specific number of elements from dataPoints array.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ajeetkumar786,

The code that you have shared seems to be working fine across browsers. Can you kindly share sample project reproducing the issue over Google-Drive or Onedrive so that we can look into it and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ajeetkumar786,

Based on the error that you have shared Uncaught ReferenceError: CanvasJS is not defined., it seems like CanvasJS script is not loaded in your application. Can you kindly try after adding script in your app?

The HTML code that you have shared seems to be working fine. It would be helpful for us to understand the issue you are facing if you could share your app reproducing the issue over Google-Drive or Onedrive.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@leo,

You can overlay the zoom-back button on top of reset button to perform zoom-out step-by-step on clicking reset button. Please find the code snippet below.

function back(){
  var viewportMinStack = chart.options.viewportMinStack;
  var viewportMaxStack = chart.options.viewportMaxStack;
  //if(!chart.axisX){
  //		chart.axisX = {};
  //	}
  if(viewportMinStack.length>1){
    viewportMinStack.pop();
    viewportMaxStack.pop();
    axisX.viewportMinimum = viewportMinStack[viewportMinStack.length-1];
    axisX.viewportMaximum = viewportMaxStack[viewportMaxStack.length-1];
  }
  else{
    axisX.viewportMinimum = null;
    axisX.viewportMaximum = null;
    document.getElementById("button").style.visibility = "hidden";
  }
  chart.render();
}
var button = document.getElementById( "button" );
button.addEventListener("click", back);
document.getElementsByClassName("canvasjs-chart-toolbar")[0].lastChild.style.visibility = 'hidden';

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

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemel619619,

Glad that its working fine :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemel619619,

Please take a look at this jsfiddle for an example on rendering multi-series chart from JSON.

If this doesn’t help you out, kindly create jsfiddle reproducing the issue so that we can look into your code & JSON format and help you out accordingly.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@d3bsky,

Please refer Chart Data from Database for an example on rendering chart with data from database.

You can also download PHP samples from our Download Page and checkout the examples.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemel619619,

You need to include jQuery in your page to use jQuery methods like getJSON, when and done. Including jQuery should work fine in your case.

Please try adding <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> in your html page.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@derissl,

Please take a look at updated jsfiddle showing chart similar to the image that you have shared – achieved using stackedColumn Chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fbahashwan,

You can set filled area color using color property and the color of the line/border of area using lineColor. Please refer documentation for list of chart options / more info.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lonster_monster,

Glad that it works :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lonster_monster,

To convert PHP date to JavaScript timestamp, first you need to convert PHP date to PHP timestamp using strtotime and then convert PHP timestamp to JavaScript timestamp by multiplying PHP timestamp by 1000.

$phpDate = date("Y-m-d h:i:sa");
$phpTimestamp = strtotime($phpDate);
$javaScriptTimestamp = $phpTimestamp * 1000;

—
Vishwas R
Team CanvasJS