├── component.json ├── LICENSE ├── README.md ├── issue4_sample.html ├── improvements_change_history └── sample.html /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ChartNew.js", 3 | "version": "0.3.0", 4 | "description": "Simple HTML5 Charts using the canvas element", 5 | "keywords": ["charts"], 6 | "homepage": "https://github.com/FVANCOP/ChartNew.js", 7 | "author": "FVANCOP", 8 | "main": ["ChartNew.js"], 9 | "dependencies": { 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 FVANCOP 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ChartNew.js 2 | =========== 3 | 4 | 5 | Simple HTML5 Charts using the canvas element 6 | 7 | 8 | 9 | 10 | For my personnal use, I had to integrate lot of changes into Chart.js (https://github.com/nnnick/Chart.js. 11 | 12 | So, I have re-worked Chart.js. Most of the changes, are associated to requests in "GitHub" issues of Chart.js. 13 | 14 | 15 | 16 | New Charts integrated in this version compared to Graph.js 17 | 18 | HorizontalBar 19 | HorizontalStackedBar 20 | Line,Bar with logarithmic y-Axis 21 | 22 | New Items in graph compared to Graph.js : 23 | 24 | Title 25 | Subtitle 26 | X Axis Label 27 | Y Axis Label 28 | Unit Label 29 | Y Axis on the right and/or the left 30 | Annotates (content can be configured through "templates") 31 | canvas Border 32 | Legend 33 | Footnote 34 | crossText (you can put a text over the graph at the place of your choice) 35 | graphMin / graphMax 36 | 37 | 38 | A quick sample can be found on http://www.favomo.be/graphjs 39 | 40 | Another sample : http://www.favomo.be/graphjs/demo.html 41 | 42 | 43 | I did not document how to use the new items but most of them will be easy to understand. If someone can write it, it would be great (my english is not suffisant to do that correctly) - If you want to contact me, you will find my email address in ChartNew.js 44 | 45 | This version is down-compatible (on PC) with the version of Chart.js available on 13 January 2014. 46 | 47 | Hope it will be usefull for some of you ! Perhaps a start for a new community developpement... Why not ? 48 | -------------------------------------------------------------------------------- /issue4_sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

11 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /improvements_change_history: -------------------------------------------------------------------------------- 1 | Change history 2 | -------------- 3 | 4 | 09/06/2014 - Vancoppenolle François - Colors can be specified through a function (see issue #48) 5 | - minor bug fixed 6 | 31/05/2014 - Vancoppenolle Francois - New options implemented : animationStartValue : 0,animationStopValue : 1, 7 | animationCount : 1, animationPauseTime : 5, 8 | animationBackward : false, 9 | New options implemented : defaultStrokeColor, defaultFillColor 10 | Bug fix for Y-Labels (only a few labels were displayed) 11 | Bug fix for colors (see issue #46 - reported by Dave Collins) 12 | + Other minor bug fix 13 | 21/05/2014 - Romain Sauvaire - problem detected with Google Closure Compiler fixed (see issue #36) 14 | 20/05/2014 - Blaine Kasten - Francois Vancoppenolle - fix bug when Canvas has no ID (see issue #34) 15 | 18/05/2014 - Blaine Kasten - bug in doughNut fixed (see issue #32) 16 | 15/05/2014 - Francois Vancoppenolle & Justin Sternberg - option barBorderRadius added for Bar and horizontalBar 17 | 13/05/2014 - Francois Vancoppenolle - parameters (ctx,config,data) passed to function onAnimationComplete 18 | 13/05/2014 - Francois Vancoppenolle - fix bug for option fmtYLabel 19 | - for all bar graphs (stacked/Horizontal), possibility to specify the color of each bar; 20 | (request introduced by abraxas1484 - Issue 28) 21 | - fix bug when only one value on line - signaled by Umarmukthar 22 | 10/05/2014 - John Rayes - Improvement in savePng functions - issue #26 23 | - Changes in annotate templates - issue #24 24 | - annotate can be defined through CSS (option annotateClassName added) - Issue #25 25 | - Francois Vancoppenolle - fix of several bugs detected while writing the documentation. 26 | 04/05/2014 - Francois Vancoppenolle - fix of several bugs; code simplification 27 | 01/05/2014 - Francois Vancoppenolle/sjt88 - fix a problem when lot of data in the graph (more than number of available pixels) 28 | 29/04/2014 - Francois Vancoppenolle - option thousandSeparator added - Default value : "" 29 | (request introduced by Sebastian Pertsch) 30 | 27/04/2014 - Francois Vancoppenolle - Issue 21 fixed -> No chart when entry is NULL - Bug reported by "theBear" 31 | 32 | 18/04/2014 - Francois Vancoppenolle - support for a missing data value in all chart types 33 | - Labels in Radar and PolarArea 34 | 35 | 15/04/2014 - Francois Vancoppenolle - support for a missing data value in line chart 36 | 13/04/2014 - Francois Vancoppenolle - Bug in annotate corrected (bug reported by Varsha Vekariya) 37 | - Bug in Pie/Doughnut inGraphData corrected 38 | - For Pie/Doughnut, option inGraphDataRotate can now be initialized to "inRadiusAxisRotateLabels" 39 | (request introduced by Strainy) 40 | 03/04/2014 - Francois Vancoppenolle - Labels in Pie/Doughnut (options inGraphData in the name) 41 | 42 | 27/03/2014 - Francois Vancoppenolle - Labels in StackedBar/HorizontalStackedBar (options with inGraphData in the name); 43 | 18/03/2014 - Francois Vancoppenolle - works now on Android 44 | - default options can be changed in a smart way (charJSPersonnalDefaultOptions) 45 | 17/03/2014 - Francois Vancoppenolle - Option decimalSeparator added (default value : "."); 46 | Correction of a bug (issue #15 problem for animationSteps); 47 | New options (name starting with "fmt") - need to be documented; 48 | 09/03/2014 - Francois Vancoppenolle - Labels in Bar/HorizontalBar (options with inGraphData in the name); 49 | - possibility to remove X Axis Display (options xAxisBottom) 50 | 08/03/2014 - gkres - Fix bug when all values are identical (issue #13) 51 | 04/03/2014 - Francois Vancoppenolle - Option dynamicDisplay added; If set to true, the animation of the graph starts 52 | when the graph is visible on screen. 53 | 03/03/2014 - Francois Vancoppenolle - Correction of a bug when scale steps are defined 54 | - Options scaleXGridLinesStep and scaleYGridLinesStep added (improvement proposed by 55 | Ruben Rutten) 56 | - When the X Labels is not horizontal, the position of the labels has been 57 | readjusted. 58 | (Bug reported by Ruben Rutten) 59 | 02/03/2014 - Francois Vancoppenolle - new option startAngle for radar chart; 60 | - new option graphMaximized for radar chart ; By default, value is false; if set 61 | to true, the radar will not be displayed in the middle of the canvas, but at 62 | a place where the size of the graph is maximized; 63 | - bug correction for startAngle in Pied, Doughtnut and PolarArea graphs; 64 | - options savePng added; 65 | 26/02/2014 - Francois Vancoppenolle - option canvasBackgroundColor added (improvement proposed by joetime) 66 | 24/02/2014 - Francois Vancoppenolle - Review how axis are drawn (correct several bugs) 67 | New options added (options with SpaceBefore, SpaceAfter, SpaceLeft, Space Right 68 | in the name) 69 | Labels inside line graph (options with inGraphData in the name) 70 | 04/02/2014 - Francois vancoppenolle - Bug for X Axis Label corrected (reported by James Barnsley) 71 | 03/02/2014 - Francois Vancoppenolle - Minor Bug correction - Code reduction (commonOptions/xyAxisCommonOptions) 72 | 02/02/2014 - Francois Vancoppenolle - Minor Bugs correction 73 | 31/01/2014 - joetime - improvements for annotations 74 | 29/01/2014 - Francois Vancoppenolle - startAngle parameter for Pie and Doughtnut 75 | 22/01/2014 - Francois Vancoppenolle - bugs fix when negative values 76 | 21/01/2014 - Francois Vancoppenolle - minor corrections for parameter "rotateLabels" + showYAxisMin parameter 77 | 18/01/2014 - Francois Vancoppenolle - rotateLabels can be choosen by the user - parameter "rotateLabels" 78 | 13/01/2014 - Ole Kroeger - Logaritmic Y-Axis for lines and bars - parameter "logarithmic" 79 | 10/01/2014 - Francois Vancoppenolle - creation of the Github entry 80 | 81 | 82 | Future Improvements 83 | ------------------- 84 | - topXAxis 85 | - small animation (https://github.com/nnnick/Chart.js/issues/357) 86 | - display the legend on other places (center, bottom or top on the left/right of the graph; 87 | center, right, left over/under the graph). 88 | - display standard deviation (see issue #31) 89 | - non evolutive animation in Pie/Doughnut (https://github.com/nnnick/Chart.js/issues/357) 90 | - line in Bar chart (and StackeBar) (https://github.com/FVANCOP/ChartNew.js/issues/23) 91 | - code reduction 92 | - "carriage Return" for X labels (labels displayed on multiple lines) 93 | - animate Canvas when mouse is over a piece of graph (like in http://zurb.com/playground/pizza-pie-charts) 94 | - documentation 95 | - dynamicDisplay defines a canvas.id when not defined; Avoid defining a canvas.id (issue 35) 96 | - Different units for Y-axes on left and right (issue #41) 97 | - live update of the data (see : http://www.jqchart.com/jquery/chart/RealTime/LiveData) 98 | - responsive chart (see issue #43) 99 | 100 | Known Bugs 101 | ---------- 102 | - dynamicDisplay not working on IOS 5 103 | - Pie not working on some devices 104 | - If the first label is long, it can be truncated 105 | 106 | In "sample.html", if you put : 107 | 108 | var mydata1 = { 109 | labels : ["January this is a very long label","February","March","April","May","June","July"], 110 | 111 | => "January this is a very long label" will be truncated (outside of the graph area) 112 | 113 | - not enough labels on the Y-Axis (with logarithmic options) 114 | var negdata1 = { 115 | labels : ["January","February","March","April","May","June","July"], 116 | datasets : [ 117 | { 118 | fillColor : "rgba(220,220,220,0.5)", 119 | strokeColor : "rgba(220,220,220,1)", 120 | pointColor : "rgba(220,220,220,1)", 121 | pointStrokeColor : "#fff", 122 | data : [-100,-50,-90,-81,-56,-25,-100], 123 | title : "First data" 124 | }, 125 | { 126 | fillColor : "rgba(151,187,205,0.5)", 127 | strokeColor : "rgba(151,187,205,1)", 128 | pointColor : "rgba(151,187,205,1)", 129 | pointStrokeColor : "#fff", 130 | data : [-28,-48,-40,-19,-96,-27,-100], 131 | title : "Second data" 132 | } 133 | ] 134 | } 135 | -------------------------------------------------------------------------------- /sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 637 | 638 | 639 | 640 | 641 | 642 | Demo ChartNew.js 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | Demo of ChartNew.js !
651 | 652 | 701 | 702 | 703 | --------------------------------------------------------------------------------