Beautiful Charts for your PHP Applications
Add Beautiful Charts to your PHP Applications & Websites using CanvasJS. Charts are Responsive & support Zooming, Panning, Animation, Exporting, Events & Realtime Updates. It comes with 24 different types of Charts including line, column, bar, stacked column, range, spline, area, pie, doughnut, stock charts, etc. To top it all off, it can easily render thousands of data-points without any performance lag.
Click on any example below to see live demo-
Simple API that lets you create Charts in Minutes!
CanvasJS has a very simple API which lets you to add beautiful HTML5 Charts into your PHP application in minutes. Checkout the basic example and code below. -
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </head> <?php $dataPoints = array( array("y" => 6, "label" => "Apple"), array("y" => 4, "label" => "Mango"), array("y" => 5, "label" => "Orange"), array("y" => 7, "label" => "Banana"), array("y" => 4, "label" => "Pineapple"), array("y" => 6, "label" => "Pears"), array("y" => 7, "label" => "Grapes"), array("y" => 5, "label" => "Lychee"), array("y" => 4, "label" => "Jackfruit") ); ?> <body> <div id="chartContainer"></div> <script type="text/javascript"> $(function () { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", animationEnabled: true, title: { text: "Basic Column Chart using CanvasJS" }, data: [ { type: "column", dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> } ] }); chart.render(); }); </script> </body> </html>
-
Supports 24 different types of Charts
CanvasJS comes with a wide range of Charts Types including line, area, bar, spline, pie, doughnut candlestick, etc. Checkout all chart types in our gallery. -
<!DOCTYPE html> <html> <head> <title>Top Categories of New Year's Resolution</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </head> <?php $dataPoints = array( array("y" => 35, "name" => "Health", "exploded" => true), array("y" => 20, "name" => "Finance"), array("y" => 18, "name" => "Career"), array("y" => 15, "name" => "Education"), array("y" => 5, "name" => "Family"), array("y" => 7, "name" => "Real Estate") ); ?> <body> <div id="chartContainer"></div> <script type="text/javascript"> $(function () { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", title:{ text: "Top Categories of New Year's Resolution" }, exportFileName: "New Year Resolutions", exportEnabled: true, animationEnabled: true, data: [ { type: "pie", showInLegend: true, toolTipContent: "{name}: <strong>{y}%</strong>", indexLabel: "{name} {y}%", dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> }] }); chart.render(); }); </script> </body> </html> -
High Performance
Unlike traditional SVG and Flash Charts, CanvasJS allows you to render line charts with thousands of Data Points in few milliseconds! You can see live examples below. Also try Zooming & Panning to see the performance. -
<!DOCTYPE html> <html> <head> <title>Basic Column Chart using CanvasJS</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </head> <?php $dataPoints = array(); $y = 40; for($i = 0; $i < 10000; $i++){ $y += rand(0, 10) - 5; array_push($dataPoints, array("x" => $i, "y" => $y)); } ?> <body> <div id="chartContainer"></div> <script type="text/javascript"> $(function () { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", zoomEnabled: true, animationEnabled: true, title: { text: "Performance Demo - 10000 DataPoints" }, subtitles:[ { text: "(Try Zooming & Panning)" } ], data: [ { type: "line", dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> } ] }); chart.render(); }); </script> </body> </html>
