[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

[Manoj Mohan]

@ganesh,

Removing the following line seems to be working fine require "getjson.php";. If the issue still persists, 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 better and help you out.

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@saltstrong,

You can programmatically zoom into a region by setting viewportMinimum and viewportMaximum.

To zoom into a certain region, there should be a minimum of 3-4 dataPoints – behavior is designed such that zooming is limited upto a certain region, so the user doesn’t end up zooming into a blank-region (region with no dataPoints). Due to this restriction, it’s not possible to pan chart as you zoom into the region with just 1 dataPoint.

——-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joyrex,

Glad that it works for your use-case :)

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dollarb71,

You can keep just one JSON file. Parsing JSON data before passing it to chart options should work fine in this case. Please take a look at this JSFiddle.

——-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@dollarb71,

You can use multiseries chart to fulfill your requirements. Please take a look at this JSFiddle.

—–
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joyrex,

You can open bootstrap modal and pass the link attribute of respective datapoint clicked to modal by using click event handler of dataPoints as shown in below code snippet.

var link;
function onClick(e){
  link = e.dataPoint.link;
  $('#myModal').modal('show');
};

$('#myModal').on('shown.bs.modal', function (e) {
  $('#myModal').find('.modal-body').load(link)
});
$('#myModal').on('hidden.bs.modal', function (e) {
  $('#myModal').find('.modal-body').html('')
});

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

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@mrunal95,

hi, i want to make fix chart of x and y value are not change base on data point .
x axis value 40-180 interval 10 and
y axis value 145 to 200 interval 5
data point is low or high but this x y value not change.

You can achieve the above requirement using the splineArea chart and by setting the maximum and minimum for the axisX and maximum and minimum for the axisY based on your requirement.

2. i have to give fix background-image in graph create area which i want to show on pdf also .
i set background image it show on web but on save pdf time it will not show so i need to solve this issue ,thanks for help

Exporting chart as PDF is not supported as an inbuilt feature as of now. However, using third party libraries like jsPDF, you can export chart as PDF. If you could share JSFiddle reproducing the issue you are facing along with the library you are using for exporting, we can look into the possible issue and help you achieve your requirement.

———
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@markpx,

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

——
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@smithfx,

Thanks for the suggestion. It seems like screenX and screenY properties are not required in this JSFiddle.

—–
Manoj Mohan
Team CanvasJS