{"id":25039523,"url":"https://github.com/fernandorpardo/ja2chart","last_synced_at":"2025-03-30T21:45:32.296Z","repository":{"id":191339988,"uuid":"399393581","full_name":"fernandorpardo/JA2Chart","owner":"fernandorpardo","description":"A javascript library for linear charts made of large amount of data","archived":false,"fork":false,"pushed_at":"2021-08-25T10:22:15.000Z","size":51,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-06T02:52:05.269Z","etag":null,"topics":["canvas","chart","chart-library","charting-library","javascript","javascript-library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fernandorpardo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-08-24T08:39:36.000Z","updated_at":"2022-01-10T18:12:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"9d1043fe-4884-47d3-be6e-2335a0108a80","html_url":"https://github.com/fernandorpardo/JA2Chart","commit_stats":null,"previous_names":["fernandorpardo/ja2chart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandorpardo%2FJA2Chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandorpardo%2FJA2Chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandorpardo%2FJA2Chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fernandorpardo%2FJA2Chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fernandorpardo","download_url":"https://codeload.github.com/fernandorpardo/JA2Chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246385390,"owners_count":20768668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","chart","chart-library","charting-library","javascript","javascript-library"],"created_at":"2025-02-06T02:52:19.883Z","updated_at":"2025-03-30T21:45:32.273Z","avatar_url":"https://github.com/fernandorpardo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JA2Chart\nA javascript library for drawing linear charts of a large amount of data\n\n![JA2Chart_capture](https://user-images.githubusercontent.com/38065602/130755419-31f5b6e7-23eb-471e-a4ef-f85d06ca0c84.jpg)\n\n## Description\nJA2Chart may be Just Another JAvascript chart library or maybe not if you are looking for a simple tool to:\n- draw linear chart made of a large amount of data (tens of thousands)\n- zoom in and out and perform horizontal scrolling\n- manage more than one curve using two Y-axis\n- apply transformations and dynamically update data\n\nYou can find a detailed explanation about the project and an example at [iambobot.com](https://www.iambobot.com/en/articles/article_ja2chart_010_intro.php).\n\n## Usage\nYou need the two files published here:\n- JA2Chart.js\n- JA2Chart.css\n\n#### HTML code\nAdd the links to the files in the \u0026lt;head\u003e section:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"styles/JA2Chart.css\"\u003e \n\u003cscript type=\"text/javascript\" src=\"scripts/JA2Chart.js\"\u003e\u003c/script\u003e\n```\nAnd in the BODY create a \u0026lt;div\u003e of class JA2CHART\n```html\n\u003cdiv id=\"myChart\" class=\"JA2CHART\" style=\"width:1280px;\"\u003e\u003c/div\u003e\n```\n\n#### Creating the chart\nLet’s assume you have already the data in an array such this:\n```javascript\nvar plot_data_1 = [{\"2021-07-10 06:16:53\", \"1.3422213737499544\"}, \n                   {\"2021-07-10 06:17:54\", \"1.3422874444694144\"}, \n                    ... \n                  ]\n```\nTo create a chart, we need first to instantiate the JA2Chart class passing as parameter the ID of \u0026lt;div\u003e element of class JA2CHART that we inserted in our HTML code.\n```javascript\nvar miChart= new JA2Chart('myChart', 540);\n```\nSecond, we create the plot from the data array and set a name and color to the plot:\n```javascript\nvar plot_ID1= miChart.Plot(plot_data_1);\nmiChart.Set(plot_ID1, \"ADA\", \"#0011ee\");\n```\nThird, we create the grid. Make sure you do that after having the plot created for the grid will use the data of the plot to calculate the X and Y axis:\n```javascript\nmiChart.GridDraw();\n```\nAnd finally, draw the chart:\n```javascript\nmiChart.Draw(plot_ID1);\n```\nDone. You should see the chart at this point.\n\n# Going into the details\nThe JA2Chart’s constructor adds some additional elements. If you inspect the HTML code after instancing the JA2Chart object you will see the following structure:\n```html\n\u003cdiv id=\"myChart\" class=\"JA2CHART\" style=\"width:1280px;\"\u003e\n  \u003c!-- header --\u003e\n  \u003cdiv class=\"HEADER\"\u003e\n    \u003cdiv class=\"BOX_INFO_RANGE\"\u003e\u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n      \u003cdiv class=\"INFO_BOXES_CONTAINER\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"PLOT_INFO\"\u003e\n            \u003cdiv\u003e\u003cdiv\u003e\u003c/div\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n            \u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"PLOT_INFO\"\u003e\n            \u003cdiv\u003e\u003cdiv\u003e\u003c/div\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n            \u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"PLOT_INFO\"\u003e\n            \u003cdiv\u003e\u003cdiv\u003e\u003c/div\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n            \u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"PLOT_INFO\"\u003e\n            \u003cdiv\u003e\u003cdiv\u003e\u003c/div\u003e\u003cp\u003e\u003c/p\u003e\u003c/div\u003e\n            \u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- zoom bar --\u003e\n  \u003cdiv class=\"ZOOM_BAR\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003c/div\u003e\n  \u003c!-- canvas --\u003e\n  \u003cdiv class=\"CANVAS_CONTAINER\"\u003e\n    \u003cdiv class=\"GRID\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"CURSOR\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"PLOT\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"PLOT\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"PLOT\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"PLOT\"\u003e\n      \u003ccanvas width=\"1280\" height=\"540\"\u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e  \n\u003c/div\u003e\n```\nThe JA2CHART element contains three sections: the HEADER, the ZOOM-BAR and several CANVAS overlaying each other. The HEADER and the ZOOM-BAR are optional.\nYou don’t need to care about this structure but knowing how it is done may help you to understand how it works.\n\n# Height and width\nThe JA2CHART's width applies to all the three sections: HEADER, ZOOM-BAR and the CANVAS. Height of each section is set through the JA2Chart.css file. You can set the height of the canvas modifying the CANVAS_CONTAINER class in the CSS file or, optionally, passing the value as parameter in class creation.\n\nModify other proprieties in the JA2Chart.css file to customize your chart at convenience. For instance, you can change the background color as follows:\n```javascript\n.JA2CHART\n{\n  background-color: ivory;\n}\n```\n\n# The grid\nOne of the HTML canvas element in the CANVAS section is used to display a tabular arrangement of lines and the X and Y axis.\n\nThere are a few things you can customize right after instantiating the JA2Chart object and before calling the GridDraw() method to generate and display the grid.\n\nFor instance, you may want to change the left and bottom margin to give room to the labels on the X and Y axis (value is in pixels):\n```javascript\nmiChart.grid_X_OFFSET= 0;  // set to zero to remove the bottom margin\nmiChart.grid_Y_OFFSET= 12; // set the left side margin to 12 pixels\n```\nAlso you can set the amount of vertical and horizontal lines:\n```javascript\nmiChart.Y_STEPS= 8;  // create 8 horizontal separations (rows)\nmiChart.X_STEPS= 48; // create 48 vertical separations (columns)\n```\n\n#### Grid labels\nThe grid is calculated out of the data of one of the plots. For that reason, you first need to add at least one plot before creating the grid. The X-axis ranges from the minimum to the maximum X value of the plot and is divided into X_STEPS and a label is calculated. The same is done for the Y-axis.\n\nYou can call GridCompute() method before GridDraw() to generate and modify the labels before drawing them, e.g.:\n```javascript\nmiChart.GridCompute();\nmiChart.ylabels_LEFT[0]= 'Alpha';\nmiChart.ylabels_LEFT[miChart.ylabels_LEFT.length - 1]= 'Omega';\nmiChart.GridDraw();\n```\nGridCompute() is implicit in the GridDraw() method and for that reason GridCompute() is optional and you just need to call GridDraw() to generate and show the grid if you don’t need to do any changes.\n\nThe labels are stored in the following arrays:\n- xlabels[] - labels of the X-axis\n- ylabels_LEFT[] – Y-axis on the left for the first\n- ylabels_RIGHT[] - Y-axis on the right side when two axis are created (see later the Double Y axis explanation)\n\n# The header\nThe HEADER section is enabled for each plot by calling the HeaderEnable() method.\n```javascript\nmiChart.HeaderEnable(plot_ID1);\n```\nThe header shows the value of the plot at the cursor position.\n\n# Zooming and scrolling\nThe ZoomBar class is part of JA2Chart library and is included in the JA2Chart.js file. When the ZoomBar class is instantiated a control bar for zooming and scrolling is shown between the HEADER and the CANVAS. Customization of this control bar is possible through the ZOOM_BAR element in the JA2Chart.css style sheet.\n\nZooming is performed with the mouse wheel and managed by the CANVAS. When a zoom event is triggered (this happens when rolling the mouse wheel over the plot), two things happen:\n1. The visible area is calculated and the Zoom(a, b) method is called to draw the new grid.\n2. A callback is done to the function set by means of the ZoomSetCallback() method. This function is normally the Zoom(a, b) method of the ZoomBar class that is used to redraw the control bar with the size an position according to the (a, b) parameters.\n    \nThe (a, b) parameters are the right and left position of the visible area expressed as a percentage. For instance Zoom(25, 75) shows the plot from the 25% to the 75%, i.e., shows 50% of the plot centered.\n\nScrolling is performed moving the bar of the ZOOM_BAR element. The call-back notifies the new visible area to the JA2Chart object.\n\nAlternatively you can ignore the ZoomBar class and build your own control for zooming and scrolling, and then call the Zoom(a, b) method of the JA2Chart class to set the visible area.\n\nThe following code is enough to create the Zoom bar and set the callback:\n```javascript\nvar ZBar= new ZoomBar(miChart);\nmiChart.ZoomSetCallback(function(a, b) {if(ZBar) ZBar.Zoom(a, b);});\n```\nZoomLastNDays() method is useful to initialize the view with the las N days. The following call set the visible area to the last 2 days:\n```javascript\nmiChart.ZoomLastNDays(2);\n```\nWhich is equivalent to the following:\n```javascript\nmiChart.Zoom(100 x (plot_size_in_days – 2) / plot_size_in_days, 100);\n```\nNote that JA2Chart Zoom(a, b) method recalculates the grid labels and that any change you may have done to the array labels is lost.\n\n# Double Y axis\nJA2Chart manages two Y axis which is useful when you are drawing two curves which value ranges are too different.\n\nLet’s assume we have two arrays of data for two different plots. When we call the Plot(data_array) method we are assigning by default the plot to the left axis (it is the same as Plot(data_array, 0)). To create an Y axis on the right side we explicitly pass a second parameter with value=1, that is, left=0 (default) and right=1.\n```javascript\nmiChart= new JA2Chart('myChart', 540);\nvar plot_ID1= miChart.Plot(plot_data_1);    // Left Y-axis\nmiChart.Set(plot_ID1, \"ADA\", \"#0011ee\");\nvar plot_ID2= miChart.Plot(plot_data_2, 1); // Right Y-axis \nmiChart.Set(plot_ID2, \"Market\", \"#00bb11\");\nmiChart.GridDraw();\nmiChart.HeaderEnable(plot_ID1);\nmiChart.HeaderEnable(plot_ID2);\nmiChart.Draw(plot_ID1);\nmiChart.Draw(plot_ID2);\n```\nIf we add a third plot we have to tell which of the two Y axis that plot has to take as reference. We do this by passing the parameter in the Plot() method (no parameter means the left axis is used).\n\n# Transformations\nThere is a way to perform changes in the data and see the effects. We have three methods in the JA2Chart library to do that:\n- PlotClone(plot_ID_to_clone) is used instead of Plot() to create a new plot from an existing one.\n- DataGet(plot_ID, data_array) retrieves the data into an array of {X_value:\u0026lt;date in seconds\u003e, Y_value:\u0026lt;float number\u003e} tuples representing a (x, y) coordinate of the chart, where 'x' is a date in seconds and 'y' is the value of the function being represented.\n- DataUpdate(plot_ID, data_array) is used to update the plot with the transformed data. Only the 'y' value is updated while 'x' remains unchanged.\n  \nIn the example, we are drawing the evolution of the Cardano (ADA) cryptocurrency and a second curve that results of applying a low pass filter (average) to mitigate sampling distortion:\n```javascript\n// Instantiate the JA2Chart class\nmiChart= new JA2Chart('myChart', 540);\n// Draw the ADA plot\nvar plot_ID1= miChart.Plot(plot_data_1);\nmiChart.Set(plot_ID1, \"ADA\", \"#0011ee\");\n// Create a copy of the ADA plot\nvar plot_ID2= miChart.PlotClone(plot_ID1);\nmiChart.Set(plot_ID2, \"Average\", \"#bb1100\");\n// Get the data\nvar JA2_data = [];\nmiChart.DataGet(plot_ID2, JA2_data);\t\nvar plot_data_2 = [];\n// Do whatever transformation\nAverageMidPonderate(JA2_data, plot_data_2, 80);\n// Load back the transformed data into the curve\nmiChart.DataUpdate(plot_ID2, plot_data_2);\n// Enable the header and draw\nmiChart.GridDraw();\nmiChart.HeaderEnable(plot_ID1);\nmiChart.HeaderEnable(plot_ID2);\nmiChart.Draw(plot_ID1);\nmiChart.Draw(plot_ID2);\n```\nJust for completeness, here is AverageMidPonderate() function:\n```javascript\nfunction AverageMidPonderate(data_in, data_out, r)\n{\t\n  var n= data_in.length;\n  for(var i=0; i\u003cn; i++)\n  {\n    var a= (i \u003e r) ? (i - r) : i; \n    var b= ((i + r) \u003c n) ? (i + r) : n;\n    var avg= 0;\n    var run_sum= 0;\n    for(var j=a; j\u003cb; j++) \n    {\n      if((j+1) \u003c b)\n      {\n        var run= (data_in[j+1].X_value - data_in[j].X_value);\n        avg += data_in[j].Y_value * run;\t\n        run_sum += run;\n      }\n    }\n    avg= (run_sum!=0) ? (avg / run_sum) : 0;\n    data_out.push( {X_value: data_in[i].X_value, Y_value: avg} );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandorpardo%2Fja2chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandorpardo%2Fja2chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandorpardo%2Fja2chart/lists"}