[Manoj Mohan]

@b_juarez,

We are looking into your query and will get back to you at the earliest.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@sanat,

Please take a look a this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@b_juarez,

Please take a look at this Gallery Example for rendering chart with data from the database. You can also download PHP sample from our download page.

If this doesn’t help you resolve the issue you are facing, kindly share sample project along with sample database over Google Drive / One Drive so that we can run it locally at our end, understand the scenario better and help you resolve it.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@gargprateek526,

You are passing Column as chart-type in the code shared above which is not a valid chart-type. Changing chart-type from Column to column should work fine in your case. Please take a look at this updated sample.

Please refer to this documentation page for more information about chart-types available in CanvasJS.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@oscaradrian8,

Can you kindly share sample project along with sample CSV over Google-Drive or Onedrive and brief us more about the issue you are facing so that we can run it locally, understand the scenario better and help you out?

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@fluid,

Whenever you move finger/pointer on the chart, the chart has to know if you are trying to scroll the page or interact with the chart. Hence we have implemented a behavior where if you hold the finger for a while on the chart, it captures the event and doesn’t scroll the page. On the other hand, if you move pointer/finger quickly without pausing, it allows you to scroll the webpage. Kindly check the behavior and let us know if it works as briefed here!

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@markpx,

Please take a look at this JSFiddle.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nsn,

Can you kindly create JSFiddle reproducing the issue you are facing and 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]

@dollarb71,

Parsing the JSON after the AJAX request should work fine in your case. Please take a look at this JSFiddle.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ganesh,

You seem to be passing label for legendText which is not present in dataPoints. Either passing label or name or legendText in dataPoint should work fine in your case.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ganesh,

To create a chart based on dropdown selection in PHP using data from database, you need to first create a PHP service that will provide data for a corresponding year from database. Please check the below code snippet to create such a service –

getData.php

<?php
header('Content-Type: application/json');

	$link = new \PDO(   'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4', //'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4',
                        'root', //'root',
                        '', //'',
                        array(
                            \PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                            \PDO::ATTR_PERSISTENT => false
                        )
                    );				
	$handle = $link->prepare("SELECT * FROM datapoints where YEAR(x) = :year order by x");
	$handle->bindParam(":year",$_GET["year"], PDO::PARAM_INT);
    $handle->execute(); 
    $result = $handle->fetchAll(\PDO::FETCH_OBJ);
	$data_points = array();
	foreach($result as $row){
		// x column is in timestamp, convert unixtimestamp(seconds) to javascript timestamp(milliseconds) by multipying the x value by 1000 Please refer https://stackoverflow.com/a/15593812 for more information
        array_push($data_points, array("x"=> strtotime($row->x)*1000, "y"=> $row->y));
    }
	$link = null;

echo json_encode($data_points, JSON_NUMERIC_CHECK);

Then call the above service when an option is selected from a dropdown and render the chart based on the data received as a result from the service. Please check the below code snippet –

$( ".dropdown" ).change(function() {
	chart.options.data[0].dataPoints = [];
	var e = document.getElementById("dd");
	var selectedYear = e.options[e.selectedIndex].value;
	if( !isNaN(Number(selectedYear)) ) {
		chart.options.title.text = "Year: " + selectedYear;
		chart.options.title.verticalAlign = "top";
		var data = { "year" : selectedYear }
		$.getJSON("getData.php", data, function(result){
			chart.options.data[0].dataPoints = result;
			chart.render();
		})
	} else {
		chart.options.title.text = "Select Year From Dropdown";
		chart.options.title.verticalAlign = "center";
	}
	chart.render()
});

Also, kindly take a look at this sample project for a working example.

Considering this as a duplicate of Apply dropdown filter in php with database search. Hence, closing the same.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ganesh,

For creating a chart based on dropdown filter in php using data from database, you need to first create a php service getData.php which will provide data for any given year from database. Please take a below code snippet for getData.php service.

header('Content-Type: application/json');

$link = new \PDO(   'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4', //'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4',
                    'root', //'root',
                    '', //'',
                    array(
                        \PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                        \PDO::ATTR_PERSISTENT => false
                    )
                );				
$handle = $link->prepare("SELECT * FROM datapoints where YEAR(x) = :year order by x");
$handle->bindParam(":year",$_GET["year"], PDO::PARAM_INT);
$handle->execute(); 
$result = $handle->fetchAll(\PDO::FETCH_OBJ);
$data_points = array();
foreach($result as $row){
    // x column is in timestamp, convert unixtimestamp(seconds) to javascript timestamp(milliseconds) by multipying the x value by 1000 Please refer https://stackoverflow.com/a/15593812 for more information
    array_push($data_points, array("x"=> strtotime($row->x)*1000, "y"=> $row->y));
}
$link = null;

echo json_encode($data_points, JSON_NUMERIC_CHECK);

You can call getData.php service upon changing the year through dropdown and render the chart with data received from the service. Please take a look the below code snippet for the same.

$( ".dropdown" ).change(function() {
	chart.options.data[0].dataPoints = [];
	var e = document.getElementById("dd");
	var selectedYear = e.options[e.selectedIndex].value;
	if( !isNaN(Number(selectedYear)) ) {
		chart.options.title.text = "Year: " + selectedYear;
		chart.options.title.verticalAlign = "top";
		var data = { "year" : selectedYear }
		$.getJSON("getData.php", data, function(result){
			chart.options.data[0].dataPoints = result;
			chart.render();
		})
	} else {
		chart.options.title.text = "Select Year From Dropdown";
		chart.options.title.verticalAlign = "center";
	}
	chart.render()
});

Also, Please take a look at this sample project for an example on creating chart based on dropdown filter in php using data from database.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ketanajudiya,

Index-labels overlap each other as there is no space between column and the chart extreme. You can avoid this by setting indexLabelPlacement to inside or by increasing indexLabelMaxWidth.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@saltstrong,

Please take a look at this JSFiddle.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@saltstrong,

You can set the viewportMinimum as viewportMinimum: new Date(2019,03,14) and viewportMaximum as viewportMaximum:new Date(2019,04,14) to achieve zooming programmatically over data/time axisX type.

——-
Manoj Mohan
Team CanvasJS