{"id":17616,"date":"2024-09-23T14:46:23","date_gmt":"2024-09-23T14:46:23","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17616"},"modified":"2024-09-23T15:16:38","modified_gmt":"2024-09-23T15:16:38","slug":"figures-without-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/09\/23\/figures-without-charts\/","title":{"rendered":"Figures Without Any Charts \u2014 JS Chart Tips"},"content":{"rendered":"

\"Figures<\/a>Exploring minimalistic data presentation, this entry of JS Chart Tips<\/a> shifts focus from complex visualizations to effectively\u00a0showing raw numerical data. While our\u00a0JavaScript charting library<\/a> is designed to enable\u00a0compelling graphical data displays, sometimes simplicity provides clearer insights. Reflecting on a recent customer request handled by our Support Team<\/a>,\u00a0now we’ll delve into\u00a0how to display figures in a straightforward and direct way without creating any charts<\/a>, offering a streamlined alternative that may be suitable in specific contexts.<\/p>\n

<\/p>\n

Question:\u00a0How to\u00a0Visualize Figures Without Charts?<\/h2>\n

There are situations when you need to explicitly\u00a0show just a raw figure, such as a key performance indicator. Recently, one of our customers requested help in creating a custom display that reveals only numerical values without\u00a0any traditional data visualization<\/a> elements like\u00a0lines<\/a>\u00a0or\u00a0bars<\/a>. They needed a simple text-based presentation and\u00a0provided an illustration of their basic concept, which looked somewhat like this:<\/p>\n

\"A<\/p>\n

Keep reading to discover how to achieve this streamlined approach\u00a0when a circular gauge<\/a> or a linear gauge<\/a> isn’t\u00a0the preferred solution for\u00a0that place in your dashboard<\/a> and you need\u00a0a purely text-based display.<\/p>\n

Solution:\u00a0Showing\u00a0Figures in Text with No Chart<\/h2>\n

Overview<\/h3>\n

Whenever you need any custom visual not covered by our\u00a0JS charting library’s out-of-the-box capabilities \u2014 especially when it’s not a chart at all \u2014 consider\u00a0using AnyChart’s underlying graphics engine directly. We\u00a0released<\/a>\u00a0it earlier as the open-source GraphicsJS<\/a> library, and it can draw whatever you need.<\/p>\n

To display figures as-is without lines, bars, and so on, utilize appropriate methods\u00a0from the\u00a0text API<\/a>.<\/p>\n

In Detail<\/h3>\n

First, load the GraphicsJS library. If you are working with an HTML page, for instance, you can add it to the <head><\/code> section the following way:<\/p>\n

<script src=\"https:\/\/cdn.anychart.com\/releases\/8.12.1\/js\/graphics.min.js\"><\/script><\/code><\/pre>\n
Second, set a stage using the acgraph.create()<\/code> method:<\/p>\n
var stage = acgraph.create(\"container\");<\/code><\/pre>\n
Third, create style objects for the elements you need. For instance, that customer wanted to display figures (numbers) with a text label. In a similar situation, create two objects:<\/p>\n
const pointTextStyle = {fontSize: \"25px\", fontWeight: 600, color: \"darkred\"};\r\nconst labelsTextStyle = {fontSize: \"10px\", fontWeight: 400, color: \"gray\"};<\/code><\/pre>\n
Fourth, create a function to define each type of element:<\/p>\n
\/\/ create text for the point elements (figures)\r\nfunction createPoints(point1, point2){\r\n  \/\/ set the points' text\r\n  stage.text(stage.width()\/10*4, stage.height()\/2-10, point1, pointTextStyle);\r\n  stage.text(stage.width()\/10*5+10, stage.height()\/2-10, \"\u2013\", pointTextStyle);\r\n  stage.text(stage.width()\/10*6-20, stage.height()\/2-10, point2, pointTextStyle)\r\n};\r\n\r\n\/\/ create text for the label elements\r\nfunction createLabels(label1, label2){\r\n  \/\/ set the labels' text\r\n  stage.text(stage.width()\/10*4-6, stage.height()\/2+20, label1, labelsTextStyle);\r\n  stage.text(stage.width()\/10*6-25 ,stage.height()\/2+20, label2, labelsTextStyle)\r\n};<\/code><\/pre>\n
Fifth, create the elements:<\/p>\n
createPoints(\"8.24\", \"45%\");\r\ncreateLabels(\"1ST QUARTILE\", \"3RD QUARTILE\");<\/code><\/pre>\n
Check out how the JavaScript part of the code can look altogether:<\/p>\n
\/\/ create a stage\r\nvar stage = acgraph.create(\"container\");\r\n\r\n\/\/ create style objects for the elements\r\nconst pointTextStyle = {fontSize: \"25px\", fontWeight: 600, color: \"darkred\"};\r\nconst labelsTextStyle = {fontSize: \"10px\", fontWeight: 400, color: \"gray\"};\r\n\r\n\/\/ create text for the point elements (figures)\r\nfunction createPoints(point1, point2){\r\n  \/\/ set the points' text\r\n  stage.text(stage.width()\/10*4, stage.height()\/2-10, point1, pointTextStyle);\r\n  stage.text(stage.width()\/10*5+10, stage.height()\/2-10, \"\u2013\", pointTextStyle);\r\n  stage.text(stage.width()\/10*6-20, stage.height()\/2-10, point2, pointTextStyle)\r\n};\r\n\r\n\/\/ create text for the label elements\r\nfunction createLabels(label1, label2){\r\n  \/\/ set the labels' text\r\n  stage.text(stage.width()\/10*4-6, stage.height()\/2+20, label1, labelsTextStyle);\r\n  stage.text(stage.width()\/10*6-25 ,stage.height()\/2+20, label2, labelsTextStyle)\r\n}\r\n\r\n\/\/ create the elements\r\ncreatePoints(\"8.24\", \"45%\");\r\ncreateLabels(\"1ST QUARTILE\", \"3RD QUARTILE\");<\/code><\/pre>\n
Example<\/h3>\n
Check out an example of a no-chart data visualization, displaying figures with labels, and feel free to experiment further with the code and visualization:<\/p>\n