{"id":25324,"date":"2020-06-16T12:15:57","date_gmt":"2020-06-16T09:15:57","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=25324"},"modified":"2020-07-07T10:30:43","modified_gmt":"2020-07-07T07:30:43","slug":"charting-data-quickly-with-chart-js-in-react","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/","title":{"rendered":"Charting data quickly with Chart.js in React"},"content":{"rendered":"\n

I’m working on a small weather station project, and I was looking for a way to plot the weather data quickly on a chart.<\/p>\n\n\n\n

My first idea was to use the big visualization libraries such as D3.js and Fabrics, but they were way too heavy to get started with for my needs. They can do everything, but I was just looking for a quick chart, not another new framework to learn.<\/p>\n\n\n\n

I finally choose to use the Chart.js library (https:\/\/www.chartjs.org\/<\/a>). It\u2019s not the smallest library ever at 117.7KB minified and gzipped, but it does pull moment.js as a dependency which account for half the size. Still, for a chart-heavy application such as this one, I\u2019m willing to pay that resource cost. Besides, I\u2019ll be the only one use this application on my own network.<\/p>\n\n\n\n

\"\"
Weather plotted on a Chart.js chart. Example data, it was not really that cold in June.<\/figcaption><\/figure><\/div>\n\n\n\n

Since it\u2019s a JavaScript library, but not React specific, I wanted to decouple the Chart.js code from the React code. Since Chart.js expects a canvas to render the content; I just added the <canvas><\/code> tag to my React component, such as:<\/p>\n\n\n\n

<div className=\"chart-container\"\n     style={{ position: \"relative\", height: \"60vh\", width: \"100%\" }}>\n   <canvas id=\"myChart\"><\/canvas>\n<\/div>\n<\/pre>\n\n\n\n
And imported the JavaScript file containing the Chart.js code so it would initialize the chart (tucked away neatly in a chart folder in my project):<\/p>\n\n\n\n
import drawWeatherVisualization from \"..\/..\/chart\/WeatherVisualization.js\";\n<\/pre>\n\n\n\n
The chart itself is a simple object to which you pass various options. For a line chart like this one, you\u2019ll need to feed it a dataset for each line (using the currentWeatherModule variable from the functional React component pulling this). The dataset will be shown on the Y axis, in that case the minimum and maximum temperature reached for each day in the last 30 days.<\/p>\n\n\n\n
const drawWeatherVisualization = async currentWeatherModule => {\n    var ctx = document.getElementById(\"myChart\").getContext(\"2d\");\n    try {\n        response = await axios.get(\"\/api\/temperatureHistory?moduleId=\" + currentWeatherModule.moduleId);\n    } catch (error) {\n        console.error(error);\n    }\n    var myChart = new Chart(ctx, {\n        type: \"line\",\n        data: {\n        labels: response.data.labels,\n        datasets: [\n            {\n            label: \"Maximum\",\n            data: response.data.maximumTemperatureData,\n            fill: false,\n            borderColor: \"rgb(245, 99, 66)\",\n            lineTension: 0.1\n            },\n            {\n            label: \"Minimum\",\n            data: response.data.minimumTemperatureData,\n            fill: false,\n            borderColor: \"rgb(75, 66, 245)\",\n            lineTension: 0.1\n            }\n        ]\n        }\n    });\n};\n\nexport default drawWeatherVisualization;\n<\/pre>\n\n\n\n
You also need to set the axis for the data. In my case, I\u2019m generating a list of dates as the X axis, using the moment.js data format.<\/p>\n\n\n\n
The minimum and maximum are not necessary; the library can figure it out from the data. For my use case, I want to make sure the display still make sense even if I don\u2019t have data for all 30 days yet and to have always the same axis in all charts.<\/p>\n\n\n\n
On the other hand, I forgot to sort the data by date before sending it to Chart.js and I had really strange results. Don\u2019t forget your sorts!<\/p>\n\n\n\n
I\u2019m also setting the minimum and maximum weather expected so it looks better and it\u2019s not just an arbitrary number, but it\u2019s not necessary either.<\/p>\n\n\n\n
scales: {\n    xAxes: [\n    {\n        type: \"time\",\n        time: {\n        unit: \"day\",\n        round: \"day\",\n        displayFormats: {\n            day: \"D\/M\"\n        },\n        ticks: {\n            suggestedMin: new Date(new Date() - 30 * 24 * 60 * 60 * 1000),\n            suggestedMax: new Date(),\n            source: \"auto\"\n        }\n        }\n    }\n    ],\n    yAxes: [\n    {\n        ticks: {\n        suggestedMin: -40,\n        suggestedMax: 40\n        }\n    }\n    ]\n}\n<\/pre>\n\n\n\n
Here is the complete code for the line chart with a few more formatting options added in. It\u2019s not perfect, but I\u2019m pretty satisfied at the speed at which I was able to add this in my project. If you want to see the complete project, you can check it out on GitHub (https:\/\/github.com\/CindyPotvin\/temperature-logger<\/a>).<\/p>\n\n\n\n
import Chart from \"chart.js\";\nimport axios from \"axios\";\n\nconst drawWeatherVisualization = async currentWeatherModule => {\nvar ctx = document.getElementById(\"myChart\").getContext(\"2d\");\nlet response;\ntry {\n    response = await axios.get(\"\/api\/temperatureHistory?moduleId=\" + currentWeatherModule.moduleId);\n} catch (error) {\n    console.error(error);\n}\nvar myChart = new Chart(ctx, {\n    type: \"line\",\n    data: {\n    labels: response.data.labels,\n    datasets: [\n        {\n        label: \"Maximum\",\n        data: response.data.maximumTemperatureData,\n        fill: false,\n        borderColor: \"rgb(245, 99, 66)\",\n        lineTension: 0.1\n        },\n        {\n        label: \"Minimum\",\n        data: response.data.minimumTemperatureData,\n        fill: false,\n        borderColor: \"rgb(75, 66, 245)\",\n        lineTension: 0.1\n        }\n    ]\n    },\n    options: {\n    maintainAspectRatio: false,\n    responsive: true,\n    layout: {\n        padding: {\n        right: 40\n        }\n    },\n    scales: {\n        xAxes: [\n        {\n            type: \"time\",\n            time: {\n            unit: \"day\",\n            round: \"day\",\n            displayFormats: {\n                day: \"D\/M\"\n            },\n            ticks: {\n                suggestedMin: new Date(new Date() - 30 * 24 * 60 * 60 * 1000),\n                suggestedMax: new Date(),\n                source: \"auto\"\n            }\n            }\n        }\n        ],\n        yAxes: [\n        {\n            ticks: {\n            suggestedMin: -40,\n            suggestedMax: 40\n            }\n        }\n        ]\n    }\n    }\n});\n};\n\nexport default drawWeatherVisualization;\n<\/pre>\n\n\n\n
\n\n\n\n
\n
Published on Web Code Geeks with permission by Cindy Potvin, partner at our WCG program<\/a>. See the original article here: Charting data quickly with Chart.js in React<\/a><\/p>\n
Opinions expressed by Web Code Geeks contributors are their own.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I’m working on a small weather station project, and I was looking for a way to plot the weather data quickly on a chart. My first idea was to use the big visualization libraries such as D3.js and Fabrics, but they were way too heavy to get started with for my needs. They can do …<\/p>\n","protected":false},"author":36,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-25324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nCharting data quickly with Chart.js in React - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Charting data quickly with Chart.js in React - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-16T09:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-07T07:30:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cindy Potvin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CindyPtn\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cindy Potvin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\"},\"author\":{\"name\":\"Cindy Potvin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5c5df30ebfba793235473ab81edbd742\"},\"headline\":\"Charting data quickly with Chart.js in React\",\"datePublished\":\"2020-06-16T09:15:57+00:00\",\"dateModified\":\"2020-07-07T07:30:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\"},\"wordCount\":543,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\",\"name\":\"Charting data quickly with Chart.js in React - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2020-06-16T09:15:57+00:00\",\"dateModified\":\"2020-07-07T07:30:43+00:00\",\"description\":\"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Charting data quickly with Chart.js in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5c5df30ebfba793235473ab81edbd742\",\"name\":\"Cindy Potvin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/957776d6732b26df4f63c29c8a3cb127ef09eb38b9f5befec1840ee3a1abed32?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/957776d6732b26df4f63c29c8a3cb127ef09eb38b9f5befec1840ee3a1abed32?s=96&d=mm&r=g\",\"caption\":\"Cindy Potvin\"},\"description\":\"Cindy is a programmer with over 5 years of experience developing web applications. She also works on Android applications and share her knowledge via her blog and on Twitter.\",\"sameAs\":[\"http:\/\/blog.cindypotvin.com\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CindyPtn\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/cindy-potvin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Charting data quickly with Chart.js in React - Web Code Geeks - 2026","description":"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.","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:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Charting data quickly with Chart.js in React - Web Code Geeks - 2026","og_description":"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2020-06-16T09:15:57+00:00","article_modified_time":"2020-07-07T07:30:43+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Cindy Potvin","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CindyPtn","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Cindy Potvin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/"},"author":{"name":"Cindy Potvin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5c5df30ebfba793235473ab81edbd742"},"headline":"Charting data quickly with Chart.js in React","datePublished":"2020-06-16T09:15:57+00:00","dateModified":"2020-07-07T07:30:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/"},"wordCount":543,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/","name":"Charting data quickly with Chart.js in React - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2020-06-16T09:15:57+00:00","dateModified":"2020-07-07T07:30:43+00:00","description":"Interested to learn about Chart.js? Check our article explaining how to Chart data quickly with Chart.js in React with examples.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/charting-data-quickly-with-chart-js-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Charting data quickly with Chart.js in React"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/5c5df30ebfba793235473ab81edbd742","name":"Cindy Potvin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/957776d6732b26df4f63c29c8a3cb127ef09eb38b9f5befec1840ee3a1abed32?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/957776d6732b26df4f63c29c8a3cb127ef09eb38b9f5befec1840ee3a1abed32?s=96&d=mm&r=g","caption":"Cindy Potvin"},"description":"Cindy is a programmer with over 5 years of experience developing web applications. She also works on Android applications and share her knowledge via her blog and on Twitter.","sameAs":["http:\/\/blog.cindypotvin.com\/","https:\/\/x.com\/https:\/\/twitter.com\/CindyPtn"],"url":"https:\/\/www.webcodegeeks.com\/author\/cindy-potvin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/25324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=25324"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/25324\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=25324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=25324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=25324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}