{"id":2170,"date":"2025-01-02T15:18:49","date_gmt":"2025-01-02T15:18:49","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=2170"},"modified":"2025-04-05T10:41:25","modified_gmt":"2025-04-05T10:41:25","slug":"create-dynamic-javascript-graph-chart-with-php","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/create-dynamic-javascript-graph-chart-with-php\/","title":{"rendered":"How to create dynamic Javascript graph chart with php?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2170\" class=\"elementor elementor-2170\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dae269c e-flex e-con-boxed e-con e-parent\" data-id=\"dae269c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b4dc77e elementor-widget elementor-widget-text-editor\" data-id=\"b4dc77e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Dynamic <strong>Javascript graph chart<\/strong> play an important role in modern web development to display any budget and population of that area. This post will show you that how to create <a href=\"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/\"><strong>dynamic population graph using JavaScript<\/strong><\/a>. The article shows how to generate an exponential growth population graph with a dropdown filter and a Plotly.js-powered visualization.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96b43e2 e-flex e-con-boxed e-con e-parent\" data-id=\"96b43e2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8850dee elementor-widget elementor-widget-heading\" data-id=\"8850dee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"> Database for Javascript graph chart<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a17b533 elementor-widget elementor-widget-text-editor\" data-id=\"a17b533\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To use dynamic Javascript graph chart, firstly you will need to create a database . In this tutorial, we&#8217;ll create a mysqli database called location_db, which contains three key tables: state, city, and local_region. These tables constitute the basis for dynamic filtering and generating population trend graphs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a01934c elementor-widget elementor-widget-heading\" data-id=\"a01934c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">HTML Structure (index.php):<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-313707f elementor-widget elementor-widget-text-editor\" data-id=\"313707f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li data-sourcepos=\"5:1-5:77\">It defines the basic webpage structure, with header, body, and footer sections.<\/li><li data-sourcepos=\"6:1-6:85\">It includes essential JavaScript and CSS libraries like jQuery, Plotly, and Bootstrap.<\/li><li data-sourcepos=\"7:1-7:79\">Creates a form with dropdown menus for State, City, and Local Area selection.<\/li><li data-sourcepos=\"8:1-9:0\">Displays a placeholder for the graph (<code>&lt;div id=\"areaGraph\"&gt;&lt;\/div&gt;<\/code>)<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b29e71 elementor-widget elementor-widget-code-highlight\" data-id=\"1b29e71\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Dynamic Location Selector and Plotly Graph<\/title>\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.plot.ly\/plotly-latest.min.js\"><\/script>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\r\n    <link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<\/head>\r\n<body>\r\n    <h1 class=\"text-center\">Rapid Increase Population Graph<\/h1>\r\n<br><br>\r\n    <form>\r\n        <!-- State Dropdown -->\r\n        <label for=\"state\">State:<\/label>\r\n        <select id=\"state\" name=\"state\"class=\"form-group\">\r\n            <option value=\"\">Select State<\/option>\r\n            <?php foreach ($stateData as $state) : ?>\r\n                <option value=\"<?php echo $state['id']; ?>\"><?php echo $state['name']; ?><\/option>\r\n            <?php endforeach; ?>\r\n        <\/select>\r\n<br><br>\r\n        <!-- City Dropdown -->\r\n        <label for=\"city\">City:<\/label>\r\n        <select id=\"city\" name=\"city\" disabled>\r\n            <option value=\"\">Select City<\/option>\r\n        <\/select>\r\n<br><br>\r\n        <!-- Local Area Dropdown -->\r\n        <label for=\"local_area\">Local Area:<\/label>\r\n        <select id=\"local_area\" name=\"local_area\" disabled>\r\n            <option value=\"\">Select Local Area<\/option>\r\n        <\/select>\r\n    <\/form>\r\n\r\n<h2 class=\"text-center\">Active and Deactive Areas Graph<\/h2>\r\n    <div id=\"areaGraph\" style=\"width:100%; height:400px; padding-bottom:45px\"><\/div>\r\n    \r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16783db elementor-widget elementor-widget-heading\" data-id=\"16783db\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Backend: Fetching Dynamic Data for  Javascript graph chart with PHP and MySQLi<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed32ecc elementor-widget elementor-widget-text-editor\" data-id=\"ed32ecc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The backend uses PHP and MySQLi to <a href=\"https:\/\/codingtutorials.in\/add-multiple-pin-on-google-maps-javascript-dynamically\/\"><strong>dynamically fetch data<\/strong><\/a> based on user selection. Here&#8217;s the code to show data for states, cities, and local areas:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2898610 elementor-widget elementor-widget-code-highlight\" data-id=\"2898610\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp><?php\r\n$host = 'localhost';\r\n$user = 'root';\r\n$password = '';\r\n$database = 'location_db'; \r\n$conn = mysqli_connect($host, $user, $password, $database);\r\nif (!$conn) {\r\n    die(\"Connection failed: \" . mysqli_connect_error());\r\n}\r\n\r\n\/\/ Fetch States\r\n$sql = \"SELECT id, name FROM states\";\r\n$stateResult = mysqli_query($conn, $sql);\r\n$stateData = [];\r\nwhile ($row = mysqli_fetch_array($stateResult)) {\r\n    $stateData[] = $row;\r\n}\r\n\r\n\/\/ Fetch Cities\r\n$sql = \"SELECT id, name, state_id FROM cities\";\r\n$cityResult = mysqli_query($conn, $sql);\r\n$cityData = [];\r\nwhile ($row = mysqli_fetch_assoc($cityResult)) {\r\n    $cityData[] = $row;\r\n}\r\n\r\n\/\/ Fetch Local Areas\r\n$sql = \"SELECT id, name, city_id, active_areaname, deactive_areaname FROM local_areas\";\r\n$localAreaResult = mysqli_query($conn, $sql);\r\n$localAreaData = [];\r\nwhile ($row = mysqli_fetch_assoc($localAreaResult)) {\r\n    $localAreaData[] = $row;\r\n}\r\n\r\nmysqli_close($conn);\r\n?><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0048e46 elementor-widget elementor-widget-text-editor\" data-id=\"0048e46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This PHP code allows dynamic retrieval of hierarchical data for create real-time graphs and charts.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07e95a3 elementor-widget elementor-widget-heading\" data-id=\"07e95a3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Frontend: Dynamic dropdown for graph filter<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3fddade elementor-widget elementor-widget-text-editor\" data-id=\"3fddade\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Dynamic graphs and charts require the user to filter inputs and visualize specific datasets. Using jQuery, the following code dynamically populates the city and local area dropdowns based on user selection:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b617618 elementor-widget elementor-widget-code-highlight\" data-id=\"b617618\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$(document).ready(function () {\n    const cityData = <?php echo json_encode($cityData); ?>;\n    const localAreaData = <?php echo json_encode($localAreaData); ?>;\n\n    $('#state').on('change', function () {\n        const stateId = $(this).val();\n        $('#city').prop('disabled', false).html('<option value=\"\">Select City<\/option>');\n\n        cityData.forEach(city => {\n            if (city.state_id == stateId) {\n                $('#city').append(`<option value=\"${city.id}\">${city.name}<\/option>`);\n            }\n        });\n    });\n\n    $('#city').on('change', function () {\n        const cityId = $(this).val();\n        $('#local_area').prop('disabled', false).html('<option value=\"\">Select Local Area<\/option>');\n\n        localAreaData.forEach(area => {\n            if (area.city_id == cityId) {\n                $('#local_area').append(`<option value=\"${area.id}\">${area.name}<\/option>`);\n            }\n        });\n    });\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9469d3b elementor-widget elementor-widget-text-editor\" data-id=\"9469d3b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With this arrangement, dropdown menus can be updated in real time, ensuring smooth navigation for dynamic charts and graphs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9855bb6 elementor-widget elementor-widget-heading\" data-id=\"9855bb6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Visualizing Data with Dynamic Graphs Using Plotly.js<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d6c027 elementor-widget elementor-widget-text-editor\" data-id=\"0d6c027\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using specific data, Plotly.js creates dynamic Javascript graph chart and graphs.\u00a0 The code to create a bar chart comparing active and inactive areas is given below:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b85af5 elementor-widget elementor-widget-code-highlight\" data-id=\"8b85af5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$('#local_area').on('change', function () {\n    const areaId = $(this).val();\n    const selectedArea = localAreaData.find(area => area.id == areaId);\n\n    if (selectedArea) {\n        const activeAreas = selectedArea.active_areaname.split(',').map(item => item.trim());\n        const deactiveAreas = selectedArea.deactive_areaname.split(',').map(item => item.trim());\n\n        const data = [\n            {\n                x: activeAreas,\n                y: Array(activeAreas.length).fill(1),\n                type: 'bar',\n                name: 'Active Areas',\n                marker: { color: 'green' }\n            },\n            {\n                x: deactiveAreas,\n                y: Array(deactiveAreas.length).fill(1),\n                type: 'bar',\n                name: 'Deactive Areas',\n                marker: { color: 'red' }\n            }\n        ];\n\n        const layout = {\n            title: 'Active and Deactive Areas',\n            barmode: 'group',\n            xaxis: { title: 'Areas' },\n            yaxis: { title: 'Count' }\n        };\n\n        Plotly.newPlot('areaGraph', data, layout);\n    }\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-999cbe0 elementor-widget elementor-widget-text-editor\" data-id=\"999cbe0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This code dynamically updates the chart based on the selected local area, making it an effective tool for real-time data visualization.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18a39f9 elementor-widget elementor-widget-heading\" data-id=\"18a39f9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Styling a dynamic graph interface<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-545b4e7 elementor-widget elementor-widget-text-editor\" data-id=\"545b4e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Using CSS, you can enhance the visual appeal of dynamic graphs and charts. Here&#8217;s an excerpt from the style used:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd81aa2 elementor-widget elementor-widget-code-highlight\" data-id=\"cd81aa2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>*{\r\n    margin: 0;\r\n    padding: 0;\r\n    overflow-x: hidden;\r\n}\r\nbody{\r\n    background-color: blueviolet\r\n}\r\nh1, h2, h3, p, label{\r\n    color: white;\r\n    font-family: \"poppin\", sans-serif;\r\n}\r\nform{\r\n    margin-left: 22%;\r\n}\r\nselect{\r\n    height: 45px;\r\n    width: 200px;\r\n}\r\nbr{\r\n    display: none;\r\n}\r\nlabel\r\n{\r\n    font-size: 20px;\r\n}\r\n@media only screen and (max-width:768px)\r\n{\r\n form\r\n{\r\n   margin-left: 0%!important; \r\n}\r\nbr\r\n{\r\n    display: block;\r\n}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59eb8d0 elementor-widget elementor-widget-heading\" data-id=\"59eb8d0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Features of Dynamic Graphs and Charts<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5f896c elementor-widget elementor-widget-text-editor\" data-id=\"a5f896c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Real-Time Updates<\/strong>: Dropdowns and graphs update dynamically based on user selection.<\/li><li><strong>Interactive Visualization<\/strong>: Users can interact with the graphs for detailed information.<\/li><li><strong>Custom Filters<\/strong>: State, city and local area filters make the app highly customizable.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a485d43 elementor-widget elementor-widget-heading\" data-id=\"a485d43\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why Use Dynamic Graphs and Charts?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98d951c elementor-widget elementor-widget-text-editor\" data-id=\"98d951c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Dynamic graph charts provide an engaging way to understand data, especially population trends. This combination of PHP, MySQLi, JavaScript and Plotly.js ensures a scalable and interactive solution to data visualization needs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e5435b e-flex e-con-boxed e-con e-parent\" data-id=\"7e5435b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-035e9c6 elementor-widget elementor-widget-shortcode\" data-id=\"035e9c6\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode2196-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2196-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode2196-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode2196-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Dynamic graph source code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"state-city-localarea.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic Javascript graph chart play an important role in modern web development to display any budget and population<\/p>\n","protected":false},"author":1,"featured_media":2192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,32],"tags":[305,303,308,306,304,309,313,307,312],"class_list":["post-2170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-php","tag-chart-js","tag-charts","tag-dynamic-charts","tag-google-charts","tag-graphs","tag-interactive-charts","tag-javascript-graph-chart","tag-plotly-js","tag-visual-chart-rendering"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>create dynamic Javascript graph chart with php<\/title>\n<meta name=\"description\" content=\"create dynamic Javascript graph chart with PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visual chart rendering.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"create dynamic graphs charts using php and javascript\" \/>\n<meta property=\"og:description\" content=\"how to create dynamic graphs using PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visually chart rendering.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-02T15:18:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:41:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1424\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"create dynamic graphs charts using php and javascript\" \/>\n<meta name=\"twitter:description\" content=\"how to create dynamic graphs using PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visually chart rendering.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"create dynamic Javascript graph chart with php","description":"create dynamic Javascript graph chart with PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visual chart rendering.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"create dynamic graphs charts using php and javascript","og_description":"how to create dynamic graphs using PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visually chart rendering.","og_url":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2025-01-02T15:18:49+00:00","article_modified_time":"2025-04-05T10:41:25+00:00","og_image":[{"width":2560,"height":1424,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_title":"create dynamic graphs charts using php and javascript","twitter_description":"how to create dynamic graphs using PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visually chart rendering.","twitter_image":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/create-dynamic-javascript-graph-chart-with-php\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"How to create dynamic Javascript graph chart with php?","datePublished":"2025-01-02T15:18:49+00:00","dateModified":"2025-04-05T10:41:25+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/create-dynamic-javascript-graph-chart-with-php\/"},"wordCount":440,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","keywords":["chart.js","charts","dynamic charts","google charts","graphs","interactive charts","Javascript graph chart","plotly.js","visual chart rendering."],"articleSection":["Javascript","php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/create-dynamic-javascript-graph-chart-with-php\/","url":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/","name":"create dynamic Javascript graph chart with php","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","datePublished":"2025-01-02T15:18:49+00:00","dateModified":"2025-04-05T10:41:25+00:00","description":"create dynamic Javascript graph chart with PHP for backend data processing and JavaScript (for example, Plotly.js) for interactive, visual chart rendering.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2025\/01\/graph.webp","width":2560,"height":1424,"caption":"Javascript graph chart"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/how-to-create-dynamic-graphs-charts-using-php-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"How to create dynamic graphs charts using php and javascript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=2170"}],"version-history":[{"count":59,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2170\/revisions"}],"predecessor-version":[{"id":2788,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/2170\/revisions\/2788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/2192"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=2170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=2170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=2170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}