{"id":25,"date":"2022-05-19T10:47:25","date_gmt":"2022-05-19T10:47:25","guid":{"rendered":"https:\/\/quadbase.com\/blog\/?p=25"},"modified":"2025-03-12T21:00:16","modified_gmt":"2025-03-12T21:00:16","slug":"creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api","status":"publish","type":"post","link":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/","title":{"rendered":"Creating a chart with JSON data obtained from a REST API via Quadbase API"},"content":{"rendered":"\n<p class=\"\">Quadbase products allow users to create charts, reports or maps and publish them either separately or group them in dashboards.<\/p>\n\n\n\n<p class=\"\">All these templates can be created either manually via our GUI applications or programmatically in Java code via our API.<\/p>\n\n\n\n<p class=\"\">We have internal support for a wide variety of data sources, but since our products can use Java objects as data sources, virtually anything can become a data source for our products.<\/p>\n\n\n\n<p class=\"\">In this article, we will create a Bitcoin\/USD price chart, we will aggregate the data using our \u201ctime zooming\u201d feature, we will add a moving average to the chart and we will export that chart to a file. All using the Quadbase ERES API, without using any templates.<\/p>\n\n\n\n<p class=\"\"><br>For this example the chart data will be obtained from a free public REST API in the JSON format.<\/p>\n\n\n\n<p class=\"\">Note: for simplicity, the code in this article doesn\u2019t handle exceptions. The code is working but if you want to use this code for your projects, we recommend adding exception handling.<\/p>\n\n\n\n<p class=\"\">The classpath:<\/p>\n\n\n\n<p class=\"\"><strong><em>Java JDK 8+<\/em><\/strong> &#8211; We used the Oracle Java, but you can use your preferred Java as well<\/p>\n\n\n\n<p class=\"\"><strong>ERES 7.0<\/strong> You can download the evaluation version for free on <a href=\"https:\/\/www.quadbase.com\" data-type=\"link\" data-id=\"https:\/\/www.quadbase.com\">www.quadbase.com<\/a><\/p>\n\n\n\n<p class=\"\"><em><strong>NOTE:<\/strong> All Quadbase products (EspressChart, EspressReport, EDAB and ERES) contain the same charting engine. We chose ERES for this example because it has the json.jar library included by default.<\/em><\/p>\n\n\n\n<p class=\"\">From ERES 7.0, we will need these jars:<\/p>\n\n\n\n<p class=\"\"><strong>ERESOrganizer.jar<\/strong> &#8211; contains the Quadbase charts engine (among other things)<\/p>\n\n\n\n<p class=\"\"><strong><em>json.jar<\/em><\/strong> &#8211; Java tools for parsing JSON<\/p>\n\n\n\n<p class=\"\"><strong><em>qblicense.jar<\/em><\/strong> &#8211; Your Quadbase license. You can use the evaluation license too.<\/p>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<p class=\"\">First we need to obtain the data from the API URL. We just create a buffered reader and read the output obtained from the URL into a StringBuffer.<\/p>\n\n\n\n<p class=\"\">Please note that we are obtaining hourly Bitcoin price in USD for the past 1825 days, so we will receive a lot of data.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">URL apiurl = new URL(&quot;https:\/\/api.coingecko.com\/api\/v3\/coins\/bitcoin\/market_chart?vs_currency=USD&amp;days=1825&amp;interval=hourly&quot;);\n\nBufferedReader in = new BufferedReader(new InputStreamReader(apiurl.openStream()));\n\nStringBuffer sb = new StringBuffer();\n\nString inputLine;\nwhile ((inputLine = in.readLine()) != null) {\n    sb.append(inputLine);\n}\nin.close();\n<\/pre><\/div>\n\n\n\n<p class=\"\">The data obtained from the server come in the JSON format. Now we need to parse the JSON data and add them to a Java array. We will be using some tools from the json.jar file plus some very basic Java tools.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">\/\/ convert the String response to JSON objects\nJSONObject myjson = new JSONObject(sb.toString());\nJSONArray data_array = myjson.getJSONArray(&quot;prices&quot;);\n\n\/\/We want time\/date data in a format that is understood by new Date(time\/date); constructor that is used in our products internally. This is why we need to add the following line:\n\nSimpleDateFormat formatter = new SimpleDateFormat(&quot;yyyy-MM-dd hh:mm:ss&quot;);\n<\/pre><\/div>\n\n\n\n<p class=\"\">Then we just iterate the JSON objects. It is a two dimensional array. Although the data types for this particular data source are not String but a Unix timestamp (for time and date) and a number (for the price), we will store the values in a two dimensional String array. Our products will parse the data into the correct formats automatically.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">String[][] listdataarray = new String[data_array.length()][2];\nfor (int i = 0; i &lt; data_array.length(); i++) {\n    JSONArray rowItem = data_array.getJSONArray(i);\n    if (rowItem != null) {\n        for (int j = 0; j &lt; rowItem.length(); j++) {\n            switch (j) {\n            case 0:\n                \/\/ convert the Unix timestamp to a Java Date format\n                Date tempdate = new Date(rowItem.getLong(j));\n                listdataarray[i][j] = formatter.format(tempdate);\n                break;\n            case 1:\n                listdataarray[i][j] = rowItem.getString(j);\n                break;\n            }\n        }\n    }\n}<\/pre><\/div>\n\n\n\n<p class=\"\">We have our data source almost ready. The only things remaining are to set up the data types and the column names.<\/p>\n\n\n\n<p class=\"\">This is done using one-dimensional Java String arrays.<\/p>\n\n\n\n<p class=\"\">We can begin with the data types. For our data source, the first column contains a timestamp and the second column contains a number. So we will choose the \u201ctimestamp\u201d and \u201cdouble\u201d Java data types.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">\/\/ set data types\n\/\/ timestamp for the date\/time\n\/\/ double for the price\nString[] dataTypes = {\n        &quot;timestamp&quot;, &quot;double&quot;\n};\n\n\nWe can also set the column names. These can be shown in the resulting charts (or they can be hidden).\n\n\/\/set column names\nString[] fieldNames = {\n        &quot;Datetime&quot;, &quot;Price&quot;\n};\n<\/pre><\/div>\n\n\n\n<p class=\"\">Now we have the data source prepared so we can start creating the chart using the Quadbase tools from the ERESOrganizer.jar library.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">\/\/ no EspressManager server needed, we'll just render the chart\nQbChart.setEspressManagerUsed(false);\nQbChart chart = null;\n\n\/\/ we'll just export the chart, skip the initialization of the GUI\nQbChart.setForExportOnly(true);\n\n\/\/ create the data source from the arrays we've prepared\nDbData dbData = new DbData(dataTypes, fieldNames, listdataarray);\n\n\/\/ set the chart column mapping\n\/\/ 0 = first column (timestamp) will be used for the chart series (aka &quot;X axis&quot;)\n\/\/ 1 = second column (price) will be used as the chart category (aka &quot;Y axis&quot;)\n\/\/ -1 = do not set any other categories, not needed for a simple Line chart\nColInfo colInfo = new ColInfo(0, 1, -1, -1);\n\n\/\/ initialize 2D line chart using our data source\nchart = new QbChart((Applet) null, QbChart.VIEW2D, QbChart.LINE, dbData, colInfo, null);\n\n\/\/ set the chart size in pixels\nDimension canvasSize = new Dimension(1000, 600);\nchart.gethCanvas().setSize(canvasSize);\n\n\/\/ Set the chart title\nchart.gethMainTitle().setValue(&quot;Bitcoin price&quot;);\n\n\/\/ set set Y axis options - Bitcoin price in USD\n\/\/ automatic scale and origin of the Y axis\nchart.gethYAxis().setScaleAutomatic(true);\nchart.gethYAxis().setOriginAutomatic(true);\n\n\/\/ Y axis will display the price, so we'll format it as a &quot;currency&quot; and add the dollar sign\nNumericFormat nf = new NumericFormat();\nnf.setFormat('$', false, 0, 0, 0, 0, '.', ',', false);\nchart.gethYAxis().setLabelFormat(nf);\n\n\/\/ Log(10) scale is better for displaying price (important details don't get lost)\n\/\/ Enable log scale for the Y axis and set the log base to 10\nchart.gethYAxis().setLogScale(true);\nchart.gethYAxis().setBaseForLog(10);\n\n\/\/ X axis options - Time and Date of the price\nDateTimeFormat dtf = new DateTimeFormat();\ndtf.hideTimestampTime = true;\nchart.gethXAxis().setLabelFormat(dtf);\n\n\/\/ display every 2nd label (every other month)\nchart.gethXAxis().setLabelStep(2);<\/pre><\/div>\n\n\n\n<p class=\"\">Since we obtained hourly data for the past five years, we will need to aggregate the data since it is impossible to display all the data in a chart in a meaningful way.<\/p>\n\n\n\n<p class=\"\">Luckily ERES can do that for us, we just need to enable and set up this feature.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">\/\/ Time zooming options = we can't display five years of hourly data in a chart\nIZoomInfo zi = chart.gethZoomInfo();\n\n\/\/ aggregator = average\nzi.setAggregateOperator(IZoomInfo.AVG);\n\n\/\/ scale = 1 month\nzi.setScale(1, IZoomInfo.MONTH);\nzi.setZoomEnabled(true);<\/pre><\/div>\n\n\n\n<p class=\"\">We have just set up the \u201ctime zooming\u201d feature to aggregate the X axis data monthly and calculate the average value for each month. We could also have chosen other aggregation methods like \u201clast\u201d which would display the monthly \u201cclosing price\u201d or other aggregation methods.<\/p>\n\n\n\n<p class=\"\">Now we will add some trendlines. ERES will calculate the trendline from our data so we do not need to specify any new data source. We will add two lines: one year simple moving average and one year exponential moving average.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;no&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-java&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;Java&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;java&quot;}\">\/\/ add a trendline - simple moving average\nIDataLineSet dlines = chart.gethDataLines();\nDataLine smaline = new TrendLine2D(chart.getChart());\nsmaline.setTitle(&quot;1Y SMA&quot;);\nsmaline.setLineType(TrendLine.SIMPLE_AVERAGE);\n\/\/ coefficient = 12 months (units defined in the zooming options = month)\nsmaline.setCoeff(12);\nsmaline.setColor(new Color(100,200,150));\ndlines.add(smaline);\n\n\/\/ add a trendline - exponential moving average\nDataLine emaline = new TrendLine2D(chart.getChart());\nemaline.setTitle(&quot;1Y EMA&quot;);\nemaline.setLineType(TrendLine.EXPONENTIAL_AVERAGE);\n\/\/ coefficient = 12 months (units defined in the zooming options = month)\nemaline.setCoeff(12);\nemaline.setColor(new Color(255,200,100));\ndlines.add(emaline);\n\nchart.refresh();\n\n\/\/ export the chart to a PNG file\nchart.export(QbChart.PNG,&quot;BTCUSD.png&quot;);<\/pre><\/div>\n\n\n\n<p class=\"\">The chart we just made:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"322\" src=\"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\" alt=\"\" class=\"wp-image-26\" srcset=\"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png 512w, https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc-300x189.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"\">Code example:<\/p>\n\n\n\n<p class=\"\"><a href=\"https:\/\/www.quadbase.com\/upload\/Example.java\">https:\/\/www.quadbase.com\/upload\/Example.java<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quadbase products allow users to create charts, reports or maps and publish them either separately or group them in dashboards. All these templates can be created either manually via our &#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[7],"tags":[3,4],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-software","tag-linux","tag-windows"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.<\/title>\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.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.\" \/>\n<meta property=\"og:description\" content=\"Quadbase products allow users to create charts, reports or maps and publish them either separately or group them in dashboards. All these templates can be created either manually via our ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Quadbase Systems Inc.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/QuadbaseSystemsInc\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-19T10:47:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-12T21:00:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"322\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"quadbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Quadbase\" \/>\n<meta name=\"twitter:site\" content=\"@Quadbase\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"quadbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\"},\"author\":{\"name\":\"quadbase\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/#\/schema\/person\/547fc659bc4b72e45049ed279a4fadc8\"},\"headline\":\"Creating a chart with JSON data obtained from a REST API via Quadbase API\",\"datePublished\":\"2022-05-19T10:47:25+00:00\",\"dateModified\":\"2025-03-12T21:00:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\"},\"wordCount\":680,\"publisher\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\",\"keywords\":[\"Linux\",\"Windows\"],\"articleSection\":[\"Software\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\",\"url\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\",\"name\":\"Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.\",\"isPartOf\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\",\"datePublished\":\"2022-05-19T10:47:25+00:00\",\"dateModified\":\"2025-03-12T21:00:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage\",\"url\":\"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\",\"contentUrl\":\"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"HOME\",\"item\":\"https:\/\/www.quadbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a chart with JSON data obtained from a REST API via Quadbase API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/#website\",\"url\":\"https:\/\/www.quadbase.com\/blog\/\",\"name\":\"Quadbase Systems Inc.\",\"description\":\"Company blog about enterprise reporting, java charts, business intelligence.\",\"publisher\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.quadbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/#organization\",\"name\":\"Quadbase Systems Inc.\",\"url\":\"https:\/\/www.quadbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2023\/09\/Method-Draw-Image27.png\",\"contentUrl\":\"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2023\/09\/Method-Draw-Image27.png\",\"width\":199,\"height\":90,\"caption\":\"Quadbase Systems Inc.\"},\"image\":{\"@id\":\"https:\/\/www.quadbase.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/QuadbaseSystemsInc\/\",\"https:\/\/x.com\/Quadbase\",\"https:\/\/www.youtube.com\/user\/QuadbaseSystems\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.quadbase.com\/blog\/#\/schema\/person\/547fc659bc4b72e45049ed279a4fadc8\",\"name\":\"quadbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g\",\"caption\":\"quadbase\"},\"url\":\"https:\/\/www.quadbase.com\/blog\/author\/quadbase\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.","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.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/","og_locale":"en_US","og_type":"article","og_title":"Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.","og_description":"Quadbase products allow users to create charts, reports or maps and publish them either separately or group them in dashboards. All these templates can be created either manually via our ...","og_url":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/","og_site_name":"Quadbase Systems Inc.","article_publisher":"https:\/\/www.facebook.com\/QuadbaseSystemsInc\/","article_published_time":"2022-05-19T10:47:25+00:00","article_modified_time":"2025-03-12T21:00:16+00:00","og_image":[{"width":512,"height":322,"url":"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png","type":"image\/png"}],"author":"quadbase","twitter_card":"summary_large_image","twitter_creator":"@Quadbase","twitter_site":"@Quadbase","twitter_misc":{"Written by":"quadbase","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#article","isPartOf":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/"},"author":{"name":"quadbase","@id":"https:\/\/www.quadbase.com\/blog\/#\/schema\/person\/547fc659bc4b72e45049ed279a4fadc8"},"headline":"Creating a chart with JSON data obtained from a REST API via Quadbase API","datePublished":"2022-05-19T10:47:25+00:00","dateModified":"2025-03-12T21:00:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/"},"wordCount":680,"publisher":{"@id":"https:\/\/www.quadbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage"},"thumbnailUrl":"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png","keywords":["Linux","Windows"],"articleSection":["Software"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/","url":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/","name":"Creating a chart with JSON data obtained from a REST API via Quadbase API - Quadbase Systems Inc.","isPartOf":{"@id":"https:\/\/www.quadbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage"},"image":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage"},"thumbnailUrl":"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png","datePublished":"2022-05-19T10:47:25+00:00","dateModified":"2025-03-12T21:00:16+00:00","breadcrumb":{"@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#primaryimage","url":"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png","contentUrl":"https:\/\/quadbase.com\/blog\/wp-content\/uploads\/2022\/05\/btc.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.quadbase.com\/blog\/creating-a-chart-with-json-data-obtained-from-a-rest-api-via-quadbase-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"HOME","item":"https:\/\/www.quadbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a chart with JSON data obtained from a REST API via Quadbase API"}]},{"@type":"WebSite","@id":"https:\/\/www.quadbase.com\/blog\/#website","url":"https:\/\/www.quadbase.com\/blog\/","name":"Quadbase Systems Inc.","description":"Company blog about enterprise reporting, java charts, business intelligence.","publisher":{"@id":"https:\/\/www.quadbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.quadbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.quadbase.com\/blog\/#organization","name":"Quadbase Systems Inc.","url":"https:\/\/www.quadbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.quadbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2023\/09\/Method-Draw-Image27.png","contentUrl":"https:\/\/www.quadbase.com\/blog\/wp-content\/uploads\/2023\/09\/Method-Draw-Image27.png","width":199,"height":90,"caption":"Quadbase Systems Inc."},"image":{"@id":"https:\/\/www.quadbase.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/QuadbaseSystemsInc\/","https:\/\/x.com\/Quadbase","https:\/\/www.youtube.com\/user\/QuadbaseSystems"]},{"@type":"Person","@id":"https:\/\/www.quadbase.com\/blog\/#\/schema\/person\/547fc659bc4b72e45049ed279a4fadc8","name":"quadbase","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/14148ecbe810a872c3aa322d49f590829742ea41bc80e6bbd234b131fcfa0746?s=96&d=mm&r=g","caption":"quadbase"},"url":"https:\/\/www.quadbase.com\/blog\/author\/quadbase\/"}]}},"_links":{"self":[{"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":2,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":577,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions\/577"}],"wp:attachment":[{"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quadbase.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}