{"id":6704,"date":"2014-02-17T16:59:56","date_gmt":"2014-02-17T16:59:56","guid":{"rendered":"http:\/\/www.mkeficaz.com\/?p=6704"},"modified":"2017-06-21T17:33:02","modified_gmt":"2017-06-21T15:33:02","slug":"google-charts-la-api-de-graficos-para-el-dasarrollo-web","status":"publish","type":"post","link":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/","title":{"rendered":"Google Charts la API de gr\u00e1ficos para el dasarrollo web"},"content":{"rendered":"<p>Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. \u00a0La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.<\/p>\n<p>Existe la funcionalidad b\u00e1sica de presentar tablas personalizadas as\u00ed como los diferentes dise\u00f1os aglutinados en gr\u00e1ficos de barras, gr\u00e1ficos de cajas, candlestick, gr\u00e1ficos compuestos, iconos din\u00e1micos, gr\u00e1ficos de l\u00ednea, mapas, diagramas circulares&#8230;<\/p>\n<p>En la <a title=\"Google Chart\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery?hl=es\" target=\"_blank\">galer\u00eda de Google Charts<\/a> podr\u00e1s encontrar todos estos ejemplos que adem\u00e1s son interactivos.<\/p>\n<p><a href=\"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2014\/02\/googleChart.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-6705\" alt=\"googleChart\" src=\"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2014\/02\/googleChart-1024x506.png\" width=\"625\" height=\"308\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Para comenzar a modo de prueba con esta aplicaci\u00f3n puedes copiar este fragmento de c\u00f3digo en un archivo de tu \u00a0ordenador, abrirlo en tu navegador y visualizar un ejemplo de gr\u00e1fico, concretamente un \u00abpie chart\u00bb . Compru\u00e9balo ; ) \u00a1Feliz d\u00eda!<\/p>\n<p>&nbsp;<\/p>\n<pre>&lt;html&gt;\r\n\u00a0 &lt;head&gt;\r\n\u00a0 \u00a0 &lt;!--Load the AJAX API--&gt;\r\n\u00a0 \u00a0 &lt;script type=\"text\/javascript\" src=\"https:\/\/www.google.com\/jsapi\"&gt;&lt;\/script&gt;\r\n\u00a0 \u00a0 &lt;script type=\"text\/javascript\"&gt;\r\n\r\n\u00a0 \u00a0 \u00a0 \/\/ Load the Visualization API and the piechart package.\r\n\u00a0 \u00a0 \u00a0 google.load('visualization', '1.0', {'packages':['corechart']});\r\n\r\n\u00a0 \u00a0 \u00a0 \/\/ Set a callback to run when the Google Visualization API is loaded.\r\n\u00a0 \u00a0 \u00a0 google.setOnLoadCallback(drawChart);\r\n\r\n\u00a0 \u00a0 \u00a0 \/\/ Callback that creates and populates a data table,\r\n\u00a0 \u00a0 \u00a0 \/\/ instantiates the pie chart, passes in the data and\r\n\u00a0 \u00a0 \u00a0 \/\/ draws it.\r\n\u00a0 \u00a0 \u00a0 function drawChart() {\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Create the data table.\r\n\u00a0 \u00a0 \u00a0 \u00a0 var data = new google.visualization.DataTable();\r\n\u00a0 \u00a0 \u00a0 \u00a0 data.addColumn('string', 'Topping');\r\n\u00a0 \u00a0 \u00a0 \u00a0 data.addColumn('number', 'Slices');\r\n\u00a0 \u00a0 \u00a0 \u00a0 data.addRows([\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Mushrooms', 3],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Onions', 1],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Olives', 1],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Zucchini', 1],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Pepperoni', 2]\r\n\u00a0 \u00a0 \u00a0 \u00a0 ]);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Set chart options\r\n\u00a0 \u00a0 \u00a0 \u00a0 var options = {'title':'How Much Pizza I Ate Last Night',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0'width':400,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0'height':300};\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Instantiate and draw our chart, passing in some options.\r\n\u00a0 \u00a0 \u00a0 \u00a0 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\r\n\u00a0 \u00a0 \u00a0 \u00a0 chart.draw(data, options);\r\n\u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 &lt;\/script&gt;\r\n\u00a0 &lt;\/head&gt;\r\n\r\n\u00a0 &lt;body&gt;\r\n\u00a0 \u00a0 &lt;!--Div that will hold the pie chart--&gt;\r\n\u00a0 \u00a0 &lt;div id=\"chart_div\"&gt;&lt;\/div&gt;\r\n\u00a0 &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h2><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. \u00a0La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger. Existe la funcionalidad b\u00e1sica de presentar tablas personalizadas as\u00ed como [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"class_list":["post-6704","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google Charts la API de gr\u00e1ficos para el dasarrollo web<\/title>\n<meta name=\"description\" content=\"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.\" \/>\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.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Charts la API de gr\u00e1ficos para el dasarrollo web\" \/>\n<meta property=\"og:description\" content=\"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Tresce\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-17T16:59:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-21T15:33:02+00:00\" \/>\n<meta name=\"author\" content=\"Agencia Marketing\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tresce\" \/>\n<meta name=\"twitter:site\" content=\"@tresce\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agencia Marketing\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/\",\"url\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/\",\"name\":\"Google Charts la API de gr\u00e1ficos para el dasarrollo web\",\"isPartOf\":{\"@id\":\"https:\/\/www.tresce.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2014\/02\/googleChart-1024x506.png\",\"datePublished\":\"2014-02-17T16:59:56+00:00\",\"dateModified\":\"2017-06-21T15:33:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/054c78237f769656b1db286519c84714\"},\"description\":\"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.tresce.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Charts la API de gr\u00e1ficos para el dasarrollo web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tresce.com\/blog\/#website\",\"url\":\"https:\/\/www.tresce.com\/blog\/\",\"name\":\"Blog Tresce\",\"description\":\"Agencia Marketing y Publicidad Online\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tresce.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/054c78237f769656b1db286519c84714\",\"name\":\"Agencia Marketing\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1226e5a0162c7fa391e478dc0c7b0b57?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1226e5a0162c7fa391e478dc0c7b0b57?s=96&d=mm&r=g\",\"caption\":\"Agencia Marketing\"},\"description\":\"Tresce es una agencia de marketing online que te ayuda a mejorar la reputaci\u00f3n online de tu empresa.\",\"sameAs\":[\"https:\/\/x.com\/tresce\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Charts la API de gr\u00e1ficos para el dasarrollo web","description":"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.","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.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/","og_locale":"es_ES","og_type":"article","og_title":"Google Charts la API de gr\u00e1ficos para el dasarrollo web","og_description":"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.","og_url":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/","og_site_name":"Blog Tresce","article_published_time":"2014-02-17T16:59:56+00:00","article_modified_time":"2017-06-21T15:33:02+00:00","author":"Agencia Marketing","twitter_card":"summary_large_image","twitter_creator":"@tresce","twitter_site":"@tresce","twitter_misc":{"Escrito por":"Agencia Marketing","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/","url":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/","name":"Google Charts la API de gr\u00e1ficos para el dasarrollo web","isPartOf":{"@id":"https:\/\/www.tresce.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage"},"image":{"@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2014\/02\/googleChart-1024x506.png","datePublished":"2014-02-17T16:59:56+00:00","dateModified":"2017-06-21T15:33:02+00:00","author":{"@id":"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/054c78237f769656b1db286519c84714"},"description":"Google Charts es la API de gr\u00e1ficos de Google. Una herramienta que permite a desarrolladores de aplicaciones web crear gr\u00e1ficos a partir de los datos escogidos e incrustarlos en las p\u00e1ginas web. La API adem\u00e1s ofrece una gran variedad de dise\u00f1os de gr\u00e1ficos a escoger.","breadcrumb":{"@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.tresce.com\/blog\/google-charts-la-api-de-graficos-para-el-dasarrollo-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.tresce.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Google Charts la API de gr\u00e1ficos para el dasarrollo web"}]},{"@type":"WebSite","@id":"https:\/\/www.tresce.com\/blog\/#website","url":"https:\/\/www.tresce.com\/blog\/","name":"Blog Tresce","description":"Agencia Marketing y Publicidad Online","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tresce.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/054c78237f769656b1db286519c84714","name":"Agencia Marketing","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.tresce.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1226e5a0162c7fa391e478dc0c7b0b57?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1226e5a0162c7fa391e478dc0c7b0b57?s=96&d=mm&r=g","caption":"Agencia Marketing"},"description":"Tresce es una agencia de marketing online que te ayuda a mejorar la reputaci\u00f3n online de tu empresa.","sameAs":["https:\/\/x.com\/tresce"]}]}},"_links":{"self":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts\/6704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/comments?post=6704"}],"version-history":[{"count":2,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts\/6704\/revisions"}],"predecessor-version":[{"id":9146,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts\/6704\/revisions\/9146"}],"wp:attachment":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/media?parent=6704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/categories?post=6704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/tags?post=6704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}