[Vishwas R]

@annewangari18,

X-Value can either be number or date-time whereas label can be string. Changing x to label should work fine in your case i.e. {"label":"Panga","y":10} instead of {"x":"Panga","y":10}.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemel619619,

It seems to be working fine.

It would be helpful for us to understand your scenario better when we look at your code working live in jsfiddle. So I request you to create jsfiddle and share it with us and brief the problem you are facing?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@hemel619619,

You seemed to be using chart within getData method but which is undefined as its not passed when the function is called. Passing chart as parameter to getData method should work fine in your case getData(chart);.

It would be helpful for us to understand your scenario better when we look at your code working live in jsfiddle. So I kindly request you to create jsfiddle and share it with us if you find any issue working in CanvasJS in future.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@d3bsky,

valueFormatString is used to format numbers and date time values (x-values) that appears on axisX but not for labels. Passing x-value to dataPoints should work fine in your case dps.push({"x":new Date(result[i].time), "y":result[i].humidity});.

To format labels, you can use labelFormatter.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@leprivilege,

Please take a look at an gallery example on Chart Data from Database for rendering chart in PHP with data from mysql database. You can also download PHP Samples from our download page for more working examples in PHP.

—
Vishwas R
Team CanvasJS

[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