" + this.config.title+ "
" 24 | + "" + textContent + "
" 25 | + "0
" 26 | + "0%
"; 27 | 28 | document.getElementById(div).innerHTML = divContent; 29 | this.view = contentId; 30 | }; 31 | 32 | number.prototype.insert = function(data) { 33 | var current = data[data.length-1][this.metadata.names[this.config.x]]; 34 | var previous = document.getElementById("val" + this.view).innerHTML; 35 | var difference = current - previous; 36 | var diffPercentage; 37 | var sign = ""; 38 | 39 | if (previous != "" && previous != 0) { 40 | diffPercentage = (difference / previous).toFixed(2) * 100 + "%"; 41 | } else { 42 | diffPercentage = ""; 43 | } 44 | 45 | if (difference > 0) { 46 | sign = "+"; 47 | } 48 | 49 | document.getElementById("diffPercentage" + this.view).innerHTML = sign + diffPercentage; 50 | document.getElementById("diff" + this.view).innerHTML = sign + difference; 51 | document.getElementById("val" + this.view).innerHTML = current; 52 | 53 | }; 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /charts/custom.stack.js: -------------------------------------------------------------------------------- 1 | 2 | var stack = function(dataTable, config) { 3 | this.barChart = new bar(dataTable, config); 4 | this.metadata = this.barChart.metadata; 5 | 6 | var spec = this.barChart.getSpec(); 7 | 8 | spec.axes = [spec.axes[0]]; 9 | spec.axes[0].grid = false; 10 | 11 | spec.data.push( 12 | { 13 | "name": "selectedPoints", 14 | "modify": [ 15 | {"type": "clear", "test": "!multi"}, 16 | {"type": "toggle", "signal": "clickedPoint", "field": "id"} 17 | ] 18 | }); 19 | 20 | spec.signals.push( { 21 | "name": "clickedPoint", 22 | "init": 0, 23 | "verbose": true, 24 | "streams": [{"type": "click", "expr": "datum._id"}] 25 | }, 26 | { 27 | "name": "multi", 28 | "init": false, 29 | "verbose": true, 30 | "streams": [{"type": "click", "expr": "datum._id"}] 31 | }); 32 | 33 | var textMark = JSON.parse(JSON.stringify(spec.marks[0])); 34 | textMark.type = "text"; 35 | textMark.properties.update.text = {"field" :spec.marks[0].properties.update.fill.field}; 36 | textMark.properties.update.x.offset = 10; 37 | textMark.properties.update.y.offset = -5; 38 | textMark.properties.update.fill = {"value": config.legendTitleColor}; 39 | delete textMark.properties.update.y2; 40 | delete textMark.properties.hover; 41 | spec.marks.push(textMark); 42 | 43 | delete spec.marks[0].properties.hover; 44 | spec.marks[0].properties.update.fill = [ 45 | { 46 | "test": "indata('selectedPoints', datum._id, 'id')", 47 | "value": config.selectionColor 48 | },spec.marks[0].properties.update.fill 49 | ]; 50 | 51 | this.barChart.setSpec(spec); 52 | 53 | }; 54 | 55 | stack.prototype.draw = function(div, callbacks) { 56 | this.barChart.draw(div, callbacks); 57 | }; 58 | 59 | stack.prototype.insert = function(data) { 60 | this.barChart.insert(data); 61 | }; 62 | 63 | stack.prototype.getSpec = function() { 64 | return this.barChart.getSpec(); 65 | }; 66 | 67 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Purpose 2 | > Describe the problems, issues, or needs driving this feature/fix and include links to related issues in the following format: Resolves issue1, issue2, etc. 3 | 4 | ## Goals 5 | > Describe the solutions that this feature/fix will introduce to resolve the problems described above 6 | 7 | ## Approach 8 | > Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here. 9 | 10 | ## User stories 11 | > Summary of user stories addressed by this change> 12 | 13 | ## Release note 14 | > Brief description of the new feature or bug fix as it will appear in the release notes 15 | 16 | ## Documentation 17 | > Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter “N/A” plus brief explanation of why there’s no doc impact 18 | 19 | ## Training 20 | > Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable 21 | 22 | ## Certification 23 | > Type “Sent” when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type “N/A” and explain why. 24 | 25 | ## Marketing 26 | > Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable 27 | 28 | ## Automation tests 29 | - Unit tests 30 | > Code coverage information 31 | - Integration tests 32 | > Details about the test cases and coverage 33 | 34 | ## Security checks 35 | - Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no 36 | - Ran FindSecurityBugs plugin and verified report? yes/no 37 | - Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no 38 | 39 | ## Samples 40 | > Provide high-level details about the samples related to this feature 41 | 42 | ## Related PRs 43 | > List any other related PRs 44 | 45 | ## Migrations (if applicable) 46 | > Describe migration steps and platforms on which migration has been tested 47 | 48 | ## Test environment 49 | > List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested 50 | 51 | ## Learning 52 | > Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##Overview 2 | VizGrammar is a wrapper around powerful d3.js and vega.js library. It makes charting easy by adding required boilerplate code so that developers/designers can get started in few minutes. 3 | 4 | A chart can be drawn in a given location by simply calling 5 | ```javascript 6 | var chart = new vizg(data, configSingle); 7 | chart.draw("#chartDiv"); 8 | ``` 9 | where 10 | 11 | - canvas is the div element which contains the gadget, 12 | - config is the additional gadget configurations specified as a JSON object 13 | - dataTable is the JSON object that holds the dataset in a tabular format 14 | 15 | ## Build Process 16 | 17 | To manually build VizGrammar, you need to have [npm](https://www.npmjs.com/) and [grunt](http://gruntjs.com/) installed. 18 | 19 | 1. Run `npm install` in the VizGrammar directory to install dependencies. 20 | 2. Run `grunt`, this will combine JS files and do the minification. 21 | 22 | ##Getting Started 23 | Download [d3.js](http://d3js.org/ "d3js.org") and [vega.js](http://vega.github.io/ "vega.github.io"). 24 | Download the latest vizg.js. 25 | 26 | ##Documentation 27 | [VizGrammar Documentation](https://github.com/wso2/VizGrammar/wiki) 28 | 29 | ##Data table 30 | VizGrammar required you to arrange your source dataset in a tabular way similar to follwing JSON format. 31 | ```javascript 32 | { 33 | "metadata":{ 34 | "names":["Column1","Column2",...], 35 | "types":['ordinal', 'linear',] 36 | }, 37 | "data": [ 38 | ["value1",numericValue1,...], 39 | ["value2",numericValue2,...], 40 | ] 41 | } 42 | ``` 43 | 44 | Sample data table would be like following: 45 | ```javascript 46 | var data = [ 47 | { 48 | "metadata" : { 49 | "names" : ["rpm","torque","horsepower", "EngineType"], 50 | "types" : ["linear","linear", "ordinal","ordinal"] 51 | }, 52 | "data": [ 53 | [8000, 75, 120, "Piston"], [9000, 81, 130, "Rotary"]] 54 | } 55 | ]; 56 | ``` 57 | 58 | 59 | metadata.names is an array consists of column names/fields of the table where metadata.types records their types (ordinal (C) or linear). 60 | names and types are aligned together in a way that "Coulmn1" => 'ordinal' and "Coulmn2" => 'linear' and so on. 61 | 62 | data section is a collection of arrays of data rows. Single row is stored as an array and their element order follows the order of metadata.names. 63 | 64 | 65 | ##Chart Config 66 | 67 | Once the data structure is ready, igviz will try to draw a table out of it. 68 | 69 | Users can add additional parameters to the gadget using config object. It is a JSON object that has well known configuration properties. For example, default table implementation can be changed to a bar chart by setting chartType property in the config object. 70 | 71 | E.g Following is the bare minimum set of configurations require to draw a bar chart from above tabular data format. 72 | ```javascript 73 | var config = { 74 | x : "rpm", 75 | charts : [{type: "line", y : "torque", color: "EngineType"}], 76 | maxLength: 10, 77 | width: 400, 78 | height: 200 79 | } 80 | ``` 81 | 82 | ##Chart Canvas 83 | 84 | This is the div element where chart will be renedered on. VizGrammar accepts the id attribute of a div element formatted as "#chartDiv" 85 | ```javascript 86 | var chart = new vizg(data, configSingle); 87 | chart.draw("#chartDiv"); 88 | ``` 89 | 90 | ##Plot Chart 91 | 92 | Drawring a chart means simply calling 93 | ```javascript 94 | chart.insert([[8000, 74, 120, "Rotary"]]); 95 | ``` 96 | with parameters. VizGrammar currently supports six chart types including table, bar,line, scatter and map. Single number chart and an area chart is still in development. Drill down capabilities will be added to bar chart later. 97 | 98 | Visit [VizGrammar Samples Web Site](http://dunithd.github.io/igviz-site/samples/index.html) to see sample chart types and their documentation. Please note that the documentation is still in progress :) 99 | 100 | You can also follow the samples folder so that you'll get a better idea. 101 | 102 | 103 | -------------------------------------------------------------------------------- /samples/css/custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #1E2531; 3 | color: #fff; 4 | padding-top: 80px; 5 | } 6 | 7 | body.widget { 8 | background: transparent; 9 | } 10 | 11 | .jumbotron{ 12 | background-color: #131820 !important; 13 | color: #636C7C !important; 14 | } 15 | 16 | 17 | .col-1, 18 | .col-2, 19 | .col-3, 20 | .col-4, 21 | .col-5, 22 | .panel, 23 | .panel-heading, 24 | .col-8, 25 | .col-9, 26 | .col-10, 27 | .col-11, 28 | .col-12 { 29 | background-color: #1E2531 !important; 30 | color: #636C7C !important; 31 | 32 | } 33 | 34 | .col-1 { 35 | width: 8.33333333%; 36 | } 37 | 38 | .col-2 { 39 | width: 16.66666667%; 40 | } 41 | 42 | .col-3 { 43 | width: 25%; 44 | } 45 | 46 | .col-4 { 47 | width: 33.33333333%; 48 | } 49 | 50 | .col-5 { 51 | width: 41.66666667%; 52 | } 53 | 54 | .col-6 { 55 | width: 50%; 56 | } 57 | 58 | .col-7 { 59 | width: 58.33333333%; 60 | } 61 | 62 | .col-8 { 63 | width: 66.66666667%; 64 | } 65 | 66 | .col-9 { 67 | width: 75%; 68 | } 69 | 70 | .col-10 { 71 | width: 83.33333333%; 72 | } 73 | 74 | .col-11 { 75 | width: 91.66666667%; 76 | } 77 | 78 | .col-12 { 79 | width: 100%; 80 | } 81 | 82 | .status-message { 83 | display: block; 84 | height: 100%; 85 | width: 100%; 86 | } 87 | 88 | .status-message > .message-info, 89 | .status-message > .message-warning, 90 | .status-message > .message-danger, 91 | .status-message > .message-success { 92 | position: fixed; 93 | z-index: 2; 94 | width: 100%; 95 | height: 100%; 96 | top: 50%; 97 | left: 50%; 98 | margin: 0; 99 | -webkit-transform: translate(-50%, -50%); 100 | -moz-transform: translate(-50%, -50%); 101 | -ms-transform: translate(-50%, -50%); 102 | -o-transform: translate(-50%, -50%); 103 | transform: translate(-50%, -50%); 104 | } 105 | 106 | /* Dark Theme Styles */ 107 | body.dark .tt-hint { 108 | background: transparent !important; 109 | } 110 | 111 | body.dark .tt-input { 112 | border: 1px solid #6B7992 !important; 113 | color: #E3E5E6; 114 | } 115 | 116 | body.dark .form-control-btn { 117 | color: #E3E5E6; 118 | } 119 | 120 | body.dark #date-select .btn-default { 121 | background: #636C7C; 122 | color: #fff; 123 | border-color: #353C48; 124 | } 125 | 126 | body.dark #date-select .btn-default:hover, body.dark #date-select .btn-default[aria-expanded=true] { 127 | background: #1E2531; 128 | } 129 | 130 | #date-select .btn-default[aria-expanded=true] { 131 | background: #e6e6e6; 132 | } 133 | 134 | body.dark #date-select .btn-default.active, body.dark #date-select .btn-default.active:hover { 135 | background: #438CAD; 136 | border-color: #353C48; 137 | } 138 | 139 | body.dark .stats { 140 | color: #E3E5E6 !important; 141 | } 142 | 143 | body.dark .message { 144 | background: #1E2531; 145 | color: #E3E5E6 !important; 146 | } 147 | 148 | .breadcrumb { 149 | background: #1E2531; 150 | } 151 | 152 | .breadcrumb a:visited { 153 | color: #E3E5E6; 154 | } 155 | 156 | #canvas-tooltip { 157 | background: #c4c4c4 !important; 158 | color: #000; 159 | opacity: 0.9; 160 | font-size: 12px; 161 | } 162 | 163 | body.dark #canvas-tooltip { 164 | background: #000 !important; 165 | color: #fff; 166 | } 167 | 168 | /* DataTables issue fixing */ 169 | .table { 170 | font-size: 14px; 171 | } 172 | 173 | div.dataTables_length select { 174 | background: transparent; 175 | } 176 | 177 | body.dark div.dataTables_length select { 178 | color: #fff; 179 | border-color: #353C48; 180 | } 181 | 182 | .dataTables_filter input { 183 | margin: 0 0 0 14px !important; 184 | background: transparent; 185 | padding: 0 5px; 186 | border: 1px solid #747F8F; 187 | } 188 | 189 | div.dataTables_length select option { 190 | color: #31383e; 191 | } 192 | 193 | div.dataTables_processing { 194 | background: transparent !important; 195 | padding-top: 30px !important; 196 | } 197 | 198 | .dataTablesBottom { 199 | margin: 20px 0 0 0; 200 | } 201 | 202 | .pagination > .active > a, 203 | .pagination > .active > a:focus, 204 | .pagination > .active > a:hover, 205 | .pagination > .active > span, .pagination > 206 | .active > span:focus, 207 | .pagination > .active > span:hover { 208 | background: #438CAD; 209 | border-color: #438CAD; 210 | } 211 | 212 | .pagination > li > a, 213 | .pagination > li > span { 214 | background: transparent; 215 | color: #353C48; 216 | } 217 | 218 | body.dark .pagination > li > a, 219 | body.dark .pagination > li > a:focus, 220 | body.dark .pagination > li > span, 221 | body.dark .pagination > li.active > span:hover, 222 | body.dark .pagination > li.active > a:hover { 223 | color: #E3E5E6; 224 | border-color: #353C48; 225 | } 226 | 227 | .pagination > li > span:hover, 228 | .pagination > li > a:hover { 229 | color: #353C48; 230 | } 231 | 232 | body[media-screen=xs] .hidden-xs, 233 | body[media-screen=sm] .hidden-sm, 234 | body[media-screen=md] .hidden-md, 235 | body[media-screen=lg] .hidden-lg { 236 | display: none !important; 237 | } 238 | 239 | body[media-screen=xs] .visible-xs, 240 | body[media-screen=sm] .visible-sm, 241 | body[media-screen=md] .visible-md, 242 | body[media-screen=lg] .visible-lg { 243 | display: block !important; 244 | } 245 | 246 | body[media-screen=xs] .visible-inline-xs, 247 | body[media-screen=sm] .visible-inline-sm, 248 | body[media-screen=md] .visible-inline-md, 249 | body[media-screen=lg] .visible-inline-lg { 250 | display: inline !important; 251 | } 252 | 253 | body[media-screen=xs] .visible-inline-block-xs, 254 | body[media-screen=sm] .visible-inline-block-sm, 255 | body[media-screen=md] .visible-inline-block-md, 256 | body[media-screen=lg] .visible-inline-block-lg { 257 | display: inline-block !important; 258 | } -------------------------------------------------------------------------------- /charts/chart.table.js: -------------------------------------------------------------------------------- 1 | 2 | var table = function(dataTable, config) { 3 | this.metadata = dataTable[0].metadata; 4 | this.data = dataTable[0].values 5 | var marks =[]; 6 | this.spec = {}; 7 | config = checkConfig(config, this.metadata); 8 | this.config = config; 9 | dataTable[0].name= config.title; 10 | 11 | if (this.config.columnTitles == null) { 12 | this.config.columnTitles = this.config.columns; 13 | } 14 | 15 | }; 16 | 17 | table.prototype.draw = function(div) { 18 | var table = d3.select(div).append("table") 19 | .attr( "class", "table table-bordered") 20 | .attr("id", this.config.title); 21 | 22 | // set up the table header 23 | table.append('thead').attr("align", "center") 24 | .append('tr') 25 | .selectAll('th') 26 | .data(this.config.columnTitles) 27 | .enter() 28 | .append('th') 29 | .html(function (d) { return d }); 30 | 31 | table.append('tbody').attr("id", "tableChart-"+this.config.title); 32 | this.setupData(this.data, this.config); 33 | 34 | table.selectAll("thead th") 35 | .html(function(column) { 36 | return column.charAt(0).toUpperCase() + column.substr(1); 37 | }); 38 | 39 | 40 | }; 41 | 42 | table.prototype.insert = function(data) { 43 | this.setupData(data, this.config); 44 | }; 45 | 46 | 47 | table.prototype.setupData = function (dataset, config) { 48 | var data = []; 49 | var allColumns = this.metadata.names; 50 | 51 | //Select specified columns from dataset 52 | for (var i = 0; i < dataset.length; i++) { 53 | var row = {}; 54 | 55 | for (var x = 0; x < config.columns.length; x++) { 56 | row[config.columns[x]] = dataset[i][config.columns[x]]; 57 | } 58 | data.push(row); 59 | } 60 | 61 | //Select Rows by x Axis 62 | var rows = d3.select('#tableChart-'+config.title) 63 | .selectAll('tr') 64 | .data(data, function(d) { return d[config.key]}) 65 | 66 | var entertd = rows.enter() 67 | .append('tr') 68 | .selectAll('td') 69 | .data(function(row) { 70 | return config.columns.map(function(column) { 71 | return {column: column, value: row[column]}; 72 | }); 73 | }) 74 | .enter() 75 | .append('td') 76 | 77 | //Color cell background 78 | if (config.color != -1) { 79 | d3.select('#tableChart-'+config.title) 80 | .selectAll('td') 81 | .attr('bgcolor', 82 | function(d) { 83 | var column = d.key || d.column; 84 | 85 | var color; 86 | if (typeof config.colorScale == "string") { 87 | color = window["d3"]["scale"][config.colorScale]().range(); 88 | } else { 89 | color = config.colorScale; 90 | } 91 | 92 | var colorIndex; 93 | for(var i = 0; i < allColumns.length; i += 1) { 94 | if(allColumns[i] === column) { 95 | colorIndex = i; 96 | } 97 | } 98 | 99 | if (typeof d.value == "string" && (config.color == "*" || column == allColumns[config.color])) { 100 | 101 | var colorDomain; 102 | 103 | if (config.colorDomain == -1) { 104 | colorDomain = [d3.min(d3.select('#tableChart-'+config.title) .selectAll('tr') .data(), function(d) { return d[column]; }), 105 | d3.max(d3.select('#tableChart-'+config.title) .selectAll('tr') .data(), function(d) { return d[column]; })] 106 | 107 | } else { 108 | colorDomain = config.colorDomain 109 | } 110 | 111 | var color; 112 | if (typeof config.colorScale == "string") { 113 | color = window["d3"]["scale"][config.colorScale]().range(); 114 | } else { 115 | color = config.colorScale; 116 | } 117 | 118 | var colorScale = d3.scale.ordinal() 119 | .range(color) 120 | .domain(colorDomain); 121 | return colorScale(d.value); 122 | 123 | } else if (config.color == "*" || column == allColumns[config.color]){ 124 | 125 | var colorScale = d3.scale.linear() 126 | .range(['#f2f2f2', color[colorIndex]]) 127 | .domain([d3.min(d3.select('#tableChart-'+config.title) .selectAll('tr') .data(), function(d) { return d[column]; }), 128 | d3.max(d3.select('#tableChart-'+config.title) .selectAll('tr') .data(), function(d) { return d[column]; })] 129 | ); 130 | 131 | return colorScale(d.value); 132 | } 133 | 134 | }); 135 | } 136 | 137 | 138 | 139 | entertd.append('span') 140 | var td = rows.selectAll('td') 141 | .style({"padding": "0px 10px 0px 10px"}) 142 | 143 | .data(function(d) { return d3.map(d).entries() }) 144 | .attr('class', function (d) { return d.key }) 145 | 146 | 147 | 148 | 149 | td.select('span') 150 | .html(function(d) { 151 | return d.value 152 | }) 153 | //Remove data items when it hits maxLength 154 | if (config.maxLength != -1 && d3.select('tbody').selectAll('tr').data().length > config.maxLength) { 155 | var allowedDataset = d3.select('tbody').selectAll('tr').data().slice(d3.select('tbody').selectAll('tr').data().length- config.maxLength, config.maxLength); 156 | d3.select('tbody').selectAll('tr').data(allowedDataset, 157 | function(d) { 158 | return(d); 159 | }) 160 | .remove(); 161 | } 162 | } -------------------------------------------------------------------------------- /charts/chart.line.js: -------------------------------------------------------------------------------- 1 | 2 | var line = function(dataTable, config) { 3 | this.metadata = dataTable[0].metadata; 4 | var marks =[]; 5 | var signals = []; 6 | this.spec = {}; 7 | 8 | config = checkConfig(config, this.metadata); 9 | this.config = config; 10 | dataTable[0].name= config.title; 11 | 12 | var scales = getXYScales(config, this.metadata); 13 | 14 | if (config.mode == "stack") { 15 | var aggregateData = { 16 | "name": "stack", 17 | "source": config.title, 18 | "transform": [ 19 | { 20 | "type": "aggregate", 21 | "groupby": [this.metadata.names[config.x]], 22 | "summarize": [{"field": this.metadata.names[config.y], "ops": ["sum"]}] 23 | } 24 | ] 25 | }; 26 | 27 | dataTable.push(aggregateData); 28 | yColumn = "sum_"+ this.metadata.names[config.y]; 29 | yDomain = "stack"; 30 | 31 | scales[1].domain = {"data": yDomain, "field": yColumn}; 32 | 33 | } 34 | 35 | 36 | 37 | if (config.color != -1) { 38 | 39 | if (config.colorDomain == -1) { 40 | config.colorDomain = {"data": config.title, "field": this.metadata.names[config.color]}; 41 | } 42 | 43 | var colorScale = { 44 | "name": "color", 45 | "type": "ordinal", 46 | "domain": config.colorDomain, 47 | "range": config.colorScale 48 | }; 49 | scales.push(colorScale); 50 | 51 | var legendTitle = "Legend"; 52 | 53 | if (config.title != "table") { 54 | legendTitle = config.title; 55 | } 56 | 57 | if (this.config.legend) { 58 | this.spec.legends = getLegend(this.config); 59 | } 60 | } 61 | 62 | 63 | var axes = getXYAxes(config, "x", "x", "y", "y"); 64 | 65 | 66 | marks.push(getLineMark(config, this.metadata)); 67 | config.fillOpacity = 0; 68 | config.markSize = 1000; 69 | marks.push(getSymbolMark(config, this.metadata)); 70 | config.fillOpacity = 1; 71 | config.markSize = 15; 72 | marks.push(getSymbolMark(config, this.metadata)); 73 | 74 | if (config.range) { 75 | signals = getRangeSignals(config, signals); 76 | marks = getRangeMark(config, marks); 77 | } 78 | 79 | this.spec.width = config.width; 80 | this.spec.height = config.height; 81 | this.spec.axes = axes; 82 | this.spec.data = dataTable; 83 | this.spec.scales = scales; 84 | this.spec.padding = config.padding; 85 | this.spec.marks = marks; 86 | this.spec.signals = signals; 87 | }; 88 | 89 | line.prototype.draw = function(div, callbacks) { 90 | 91 | if(this.config.maxLength != -1){ 92 | var dataset = this.spec.data[0].values; 93 | var maxValue = this.config.maxLength; 94 | if(dataset.length >= this.config.maxLength){ 95 | var allowedDataSet = []; 96 | var startingPoint = dataset.length - maxValue; 97 | for(var i = startingPoint; i < dataset.length;i++){ 98 | allowedDataSet.push(dataset[i]); 99 | } 100 | this.spec.data[0].values = allowedDataSet; 101 | } 102 | } 103 | 104 | drawChart(div, this, callbacks); 105 | 106 | }; 107 | 108 | line.prototype.insert = function(data) { 109 | //Removing events when max value is enabled 110 | if (this.config.maxLength != -1 && this.config.maxLength < (this.view.data(this.config.title).values().length + data.length)) { 111 | var removeFunction = (function(d) { 112 | return d[this.metadata.names[this.config.x]] == oldData; 113 | }).bind(this); 114 | 115 | for (i = 0; i < data.length; i++) { 116 | var oldData = this.view.data(this.config.title).values()[i][this.metadata.names[this.config.x]]; 117 | this.view.data(this.config.title).remove(removeFunction); 118 | } 119 | } 120 | 121 | this.view.data(this.config.title).insert(data); 122 | this.view.update(); 123 | }; 124 | 125 | line.prototype.getSpec = function() { 126 | return this.spec; 127 | }; 128 | 129 | 130 | function getLineMark(config, metadata){ 131 | interpolation = "linear"; 132 | if (config.interpolation){ 133 | interpolation = config.interpolation; 134 | } 135 | 136 | var mark; 137 | if (config.color != -1 && config.mode == "stack") { 138 | mark = { 139 | "type": "group", 140 | "from": { 141 | "data": config.title, 142 | "transform": [ 143 | {"type": "stack", "groupby": [metadata.names[config.x]], "sortby": [metadata.names[config.color]], "field": metadata.names[config.y]}, 144 | {"type": "facet", "groupby": [metadata.names[config.color]]} 145 | ] 146 | }, 147 | "marks": [ 148 | { 149 | "type": "line", 150 | "properties": { 151 | "update": { 152 | "x": {"scale": "x", "field": metadata.names[config.x]}, 153 | "y": {"scale": "y", "field": "layout_start"}, 154 | "y2": {"scale": "y", "field": "layout_end"}, 155 | "stroke": {"scale": "color", "field": metadata.names[config.color]}, 156 | "strokeWidth": {"value": 2}, 157 | "interpolate": {"value": interpolation} 158 | }, 159 | "hover": { 160 | "strokeOpacity": {"value": 0.5} 161 | } 162 | } 163 | } 164 | ] 165 | }; 166 | } else if (config.color != -1) { 167 | mark = { 168 | "type": "group", 169 | "from": { 170 | "data": config.title, 171 | "transform": [{"type": "facet", "groupby": [metadata.names[config.color]]}] 172 | }, 173 | "marks": [ 174 | { 175 | "type": "line", 176 | "properties": { 177 | "update": { 178 | "x": {"scale": "x", "field": metadata.names[config.x]}, 179 | "y": {"scale": "y", "field": metadata.names[config.y]}, 180 | "stroke": {"scale": "color", "field": metadata.names[config.color]}, 181 | "strokeWidth": {"value": 2}, 182 | "interpolate": {"value": interpolation} 183 | }, 184 | "hover": { 185 | "strokeOpacity": {"value": 0.5} 186 | } 187 | } 188 | } 189 | ] 190 | }; 191 | 192 | } else{ 193 | mark = { 194 | "type": "line", 195 | "from": {"data": config.title}, 196 | "properties": { 197 | "update": { 198 | 199 | "x": {"scale": "x", "field": metadata.names[config.x]}, 200 | "y": {"scale": "y", "field": metadata.names[config.y]}, 201 | "stroke": { "value": config.markColor}, 202 | "strokeWidth": {"value": 2}, 203 | "interpolate": {"value": interpolation} 204 | }, 205 | "hover": { 206 | "fillOpacity": {"value": 0.5} 207 | } 208 | } 209 | }; 210 | } 211 | 212 | 213 | return mark; 214 | } 215 | 216 | -------------------------------------------------------------------------------- /charts/chart.area.js: -------------------------------------------------------------------------------- 1 | 2 | var area = function(dataTable, config) { 3 | this.metadata = dataTable[0].metadata; 4 | var marks =[]; 5 | var signals = []; 6 | this.spec = {}; 7 | 8 | config = checkConfig(config, this.metadata); 9 | this.config = config; 10 | dataTable[0].name= config.title; 11 | 12 | var scales = getXYScales(config, this.metadata); 13 | 14 | if (config.mode == "stack") { 15 | var aggregateData = { 16 | "name": "stack", 17 | "source": config.title, 18 | "transform": [ 19 | { 20 | "type": "aggregate", 21 | "groupby": [this.metadata.names[config.x]], 22 | "summarize": [{"field": this.metadata.names[config.y], "ops": ["sum"]}] 23 | } 24 | ] 25 | }; 26 | 27 | dataTable.push(aggregateData); 28 | yColumn = "sum_"+ this.metadata.names[config.y]; 29 | yDomain = "stack"; 30 | 31 | scales[1].domain = {"data": yDomain, "field": yColumn}; 32 | 33 | } 34 | 35 | 36 | //Make Y scale zero false as area should filled to minimum value 37 | delete scales[1].zero; 38 | 39 | if (config.color != -1) { 40 | 41 | if (config.colorDomain == -1) { 42 | config.colorDomain = {"data": config.title, "field": this.metadata.names[config.color]}; 43 | } 44 | 45 | var colorScale = { 46 | "name": "color", 47 | "type": "ordinal", 48 | "domain": config.colorDomain, 49 | "range": config.colorScale 50 | }; 51 | scales.push(colorScale); 52 | 53 | var legendTitle = "Legend"; 54 | 55 | if (config.title != "table") { 56 | legendTitle = config.title; 57 | } 58 | 59 | if (this.config.legend) { 60 | this.spec.legends = getLegend(this.config); 61 | } 62 | } 63 | 64 | 65 | var axes = getXYAxes(config, "x", "x", "y", "y"); 66 | 67 | 68 | marks.push(getLineMark(config, this.metadata)); 69 | 70 | config.fillOpacity = 0.7; 71 | marks.push(getAreaMark(config, this.metadata)); 72 | config.fillOpacity = 0; 73 | config.markSize = 1000; 74 | marks.push(getSymbolMark(config, this.metadata)); 75 | config.fillOpacity = 1; 76 | config.markSize = 15; 77 | marks.push(getSymbolMark(config, this.metadata)); 78 | 79 | if (config.range) { 80 | signals = getRangeSignals(config, signals); 81 | marks = getRangeMark(config, marks); 82 | } 83 | 84 | this.spec.width = config.width; 85 | this.spec.height = config.height; 86 | this.spec.axes = axes; 87 | this.spec.data = dataTable; 88 | this.spec.scales = scales; 89 | this.spec.padding = config.padding; 90 | this.spec.marks = marks; 91 | this.spec.signals = signals; 92 | }; 93 | 94 | area.prototype.draw = function(div, callbacks) { 95 | 96 | if(this.config.maxLength != -1){ 97 | var dataset = this.spec.data[0].values; 98 | var maxValue = this.config.maxLength; 99 | if(dataset.length >= this.config.maxLength){ 100 | var allowedDataSet = []; 101 | var startingPoint = dataset.length - maxValue; 102 | for(var i = startingPoint; i < dataset.length;i++){ 103 | allowedDataSet.push(dataset[i]); 104 | } 105 | this.spec.data[0].values = allowedDataSet; 106 | } 107 | } 108 | 109 | drawChart(div, this, callbacks); 110 | 111 | }; 112 | 113 | area.prototype.insert = function(data) { 114 | //Removing events when max value is enabled 115 | if (this.config.maxLength != -1 && this.config.maxLength < (this.view.data(this.config.title).values().length + data.length)) { 116 | var removeFunction = (function(d) { 117 | return d[this.metadata.names[this.config.x]] == oldData; 118 | }).bind(this); 119 | 120 | for (i = 0; i < data.length; i++) { 121 | var oldData = this.view.data(this.config.title).values()[i][this.metadata.names[this.config.x]]; 122 | this.view.data(this.config.title).remove(removeFunction); 123 | } 124 | } 125 | 126 | this.view.data(this.config.title).insert(data); 127 | this.view.update(); 128 | }; 129 | 130 | area.prototype.getSpec = function() { 131 | return this.spec; 132 | }; 133 | 134 | 135 | function getAreaMark(config, metadata){ 136 | interpolation = "linear"; 137 | if (config.interpolation){ 138 | interpolation = config.interpolation; 139 | } 140 | 141 | var mark; 142 | if (config.color != -1 && config.mode == "stack") { 143 | mark = { 144 | "type": "group", 145 | "from": { 146 | "data": config.title, 147 | "transform": [ 148 | {"type": "stack", "groupby": [metadata.names[config.x]], "sortby": [metadata.names[config.color]], "field": metadata.names[config.y]}, 149 | {"type": "facet", "groupby": [metadata.names[config.color]]} 150 | ] 151 | }, 152 | "marks": [ 153 | { 154 | "type": "area", 155 | "properties": { 156 | "update": { 157 | "x": {"scale": "x", "field": metadata.names[config.x]}, 158 | "y": {"scale": "y", "field": "layout_start"}, 159 | "y2": {"scale": "y", "field": "layout_end"}, 160 | "fill": {"scale": "color", "field": metadata.names[config.color]}, 161 | "strokeWidth": {"value": 2}, 162 | "fillOpacity": {"value": config.fillOpacity}, 163 | "interpolate": {"value": interpolation} 164 | }, 165 | "hover": { 166 | "strokeOpacity": {"value": 0.5} 167 | } 168 | } 169 | } 170 | ] 171 | }; 172 | } else if (config.color != -1) { 173 | mark = { 174 | "type": "group", 175 | "from": { 176 | "data": config.title, 177 | "transform": [{"type": "facet", "groupby": [metadata.names[config.color]]}] 178 | }, 179 | "marks": [ 180 | { 181 | "type": "area", 182 | "properties": { 183 | "update": { 184 | "x": {"scale": "x", "field": metadata.names[config.x]}, 185 | "y": {"scale": "y", "field": metadata.names[config.y]}, 186 | "y2": {"scale": "y", "value": 0}, 187 | "fill": {"scale": "color", "field": metadata.names[config.color]}, 188 | "strokeWidth": {"value": 2}, 189 | "fillOpacity": {"value": config.fillOpacity}, 190 | "interpolate": {"value": interpolation} 191 | }, 192 | "hover": { 193 | "strokeOpacity": {"value": 0.5} 194 | } 195 | } 196 | } 197 | ] 198 | }; 199 | 200 | } else{ 201 | mark = { 202 | "type": "area", 203 | "from": {"data": config.title}, 204 | "properties": { 205 | "update": { 206 | 207 | "x": {"scale": "x", "field": metadata.names[config.x]}, 208 | "y": {"scale": "y", "field": metadata.names[config.y]}, 209 | "y2": {"scale": "y", "value": 0}, 210 | "fill": { "value": config.markColor}, 211 | "strokeWidth": {"value": 2}, 212 | "fillOpacity": {"value": config.fillOpacity}, 213 | "interpolate": {"value": interpolation} 214 | }, 215 | "hover": { 216 | "fillOpacity": {"value": 0.5} 217 | } 218 | } 219 | }; 220 | } 221 | 222 | 223 | return mark; 224 | } 225 | 226 | -------------------------------------------------------------------------------- /samples/charts/number/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
93 | {
94 | "metadata" : {
95 | "names" : ["rpm","torque","horsepower", "EngineType"],
96 | "types" : ["linear","linear", "ordinal","ordinal"]
97 | },
98 | "data": [
99 | [0, 10, 1, "Piston"]]
100 | };
101 |
102 |
103 |
104 |
121 | {
122 | x : "rpm",
123 | title :"Torque of Engine",
124 | charts : [{type: "number"}],
125 | width: 400,
126 | height: 200
127 | }
128 |
129 |
130 | | Property | 134 |Value | 135 |Description | 136 |
|---|---|---|
| title | 141 |String | 142 |Title of the table | 143 |
| x | 146 |String | 147 |cAttribute name for X-axis | 148 |
| height | 151 |px | 152 |height of the chart | 153 | 154 |
| charts | 158 |object | 159 |Collection of charts | 160 | 161 |
| Property | 169 |Value | 170 |Description | 171 |
|---|---|---|
| type | 176 |String | 177 |Title of the table | 178 |
92 | {
93 | "metadata" : {
94 | "names" : ["rpm","torque","horsepower", "weight", "EngineType"],
95 | "types" : ["linear","linear", "linear","linear", "ordinal"]
96 | },
97 | "data": [
98 | [1,41600,3.5,79.91,0.8,0.03,"Piston"],
99 | [2,37800,3.5,79.65,1.3,0.06,"Piston"]
100 | };
101 |
102 |
103 |
104 |
121 | {
122 | type: "scatter",
123 | charts : [
124 | {type: "scatter",
125 | x : "rpm",
126 | y : "torque",
127 | color: "horsepower",
128 | size : "weight",
129 | maxLength: 30}],
130 |
131 | width: 400,
132 | height: 200
133 | }
134 |
135 |
136 | | Property | 140 |Value | 141 |Description | 142 |
|---|---|---|
| title | 147 |String | 148 |Title of the table | 149 |
| x | 152 |String | 153 |cAttribute name for X-axis | 154 |
| maxLength | 157 |int | 158 |Maximum length of chart datatable | 159 | 160 |
| height | 164 |px | 165 |height of the chart | 166 | 167 |
| charts | 171 |object | 172 |Collection of charts | 173 | 174 |
| Property | 182 |Value | 183 |Description | 184 |
|---|---|---|
| type | 189 |String | 190 |Title of the table | 191 |
| y | 194 |String | 195 |Attribute name for Y-axis | 196 | 197 |
91 | {
92 | "metadata" : {
93 | "names" : ["rpm","torque","horsepower", "EngineType"],
94 | "types" : ["linear","linear", "ordinal","ordinal"]
95 | },
96 | "data": [
97 | [1, 10, 1, "Piston"]]
98 | };
99 |
100 |
101 |
102 |
119 | {
120 | key : "rpm",
121 | charts : [{type: "table", y : "torque"}],
122 | maxLength: 7,
123 | columns:["EngineType", "torque", "rpm"],
124 | width: 400,
125 | height: 200
126 | }
127 |
128 |
129 | | Property | 133 |Value | 134 |Description | 135 |
|---|---|---|
| title | 140 |String | 141 |Title of the table | 142 |
| x | 145 |String | 146 |cAttribute name for X-axis | 147 |
| maxLength | 150 |int | 151 |Maximum length of chart datatable | 152 | 153 |
| height | 157 |px | 158 |height of the chart | 159 | 160 |
| charts | 164 |object | 165 |Collection of charts | 166 | 167 |
| Property | 175 |Value | 176 |Description | 177 |
|---|---|---|
| type | 182 |String | 183 |Title of the table | 184 |
| y | 187 |String | 188 |Attribute name for Y-axis | 189 | 190 |
169 | {
170 | "metadata" : {
171 | "names" : ["rpm","torque","horsepower", "EngineType"],
172 | "types" : ["linear","linear", "ordinal","ordinal"]
173 | },
174 | "data": [
175 | [1, 10, 1, "Piston"]]
176 | };
177 |
178 |
179 |
180 |
198 | {
199 | x : "rpm",
200 | charts : [{type: "line", y : "torque", color: "EngineType"}],
201 | maxLength: 10,
202 | width: 400,
203 | height: 200
204 | }
205 |
206 |
207 | | Property | 211 |Value | 212 |Description | 213 |
|---|---|---|
| title | 218 |String | 219 |Title of the table | 220 |
| x | 223 |String | 224 |cAttribute name for X-axis | 225 |
| maxLength | 228 |int | 229 |Maximum length of chart datatable | 230 | 231 |
| height | 235 |px | 236 |height of the chart | 237 | 238 |
| charts | 242 |object | 243 |Collection of charts | 244 | 245 |
| Property | 253 |Value | 254 |Description | 255 |
|---|---|---|
| type | 260 |String | 261 |Title of the table | 262 |
| y | 265 |String | 266 |Attribute name for Y-axis | 267 | 268 |
| color | 271 |String | 272 |Attribute name for color dimension | 273 |
119 | {
120 | "metadata" : {
121 | "names" : ["Country","Inflation"],
122 | "types" : ["ordinal","linear"]
123 | },
124 | "data": [
125 | ["Afghanistan",4.23],
126 | ["EGY",1.23],
127 | ["Afghanistan",2.23],
128 | ["United States",8.23],
129 | };
130 |
131 |
132 |
133 |
150 | {
151 | x : "Country",
152 | charts : [{type: "map", y : "Inflation"}],
153 | width: 400,
154 | height: 200
155 | }
156 |
157 |
158 | | Property | 162 |Value | 163 |Description | 164 |
|---|---|---|
| title | 169 |String | 170 |Title of the table | 171 |
| x | 174 |String | 175 |cAttribute name for X-axis | 176 |
| maxLength | 179 |int | 180 |Maximum length of chart datatable | 181 | 182 |
| height | 186 |px | 187 |height of the chart | 188 | 189 |
| charts | 193 |object | 194 |Collection of charts | 195 | 196 |
| Property | 204 |Value | 205 |Description | 206 |
|---|---|---|
| type | 211 |String | 212 |Title of the table | 213 |
| y | 216 |String | 217 |Attribute name for Y-axis | 218 | 219 |
121 | {
122 | "metadata" : {
123 | "names" : ["rpm","torque","horsepower", "EngineType"],
124 | "types" : ["linear","linear", "ordinal","ordinal"]
125 | },
126 | "data": [
127 | [1, 10, 1, "Piston"]]
128 | };
129 |
130 |
131 |
132 |
149 | {
150 |
151 | charts : [{type: "area", x : "rpm", y : "torque"}],
152 | maxLength: 10,
153 | width: 400,
154 | height: 200
155 | }
156 |
157 |
158 | | Property | 162 |Value | 163 |Description | 164 |
|---|---|---|
| title | 169 |String | 170 |Title of the table | 171 |
| x | 174 |String | 175 |cAttribute name for X-axis | 176 |
| maxLength | 179 |int | 180 |Maximum length of chart datatable | 181 | 182 |
| height | 186 |px | 187 |height of the chart | 188 | 189 |
| charts | 193 |object | 194 |Collection of charts | 195 | 196 |
| Property | 204 |Value | 205 |Description | 206 |
|---|---|---|
| type | 211 |String | 212 |Title of the table | 213 |
| y | 216 |String | 217 |Attribute name for Y-axis | 218 | 219 |
125 | {
126 | "metadata" : {
127 | "names" : ["rpm","torque","horsepower", "EngineType"],
128 | "types" : ["linear","linear", "ordinal","ordinal"]
129 | },
130 | "data": [
131 | [1, 10, 1, "Piston"]]
132 | };
133 |
134 |
135 |
136 |
151 | {
152 | charts : [{type:"arc", x:"torque", color:"EngineType", mode:"donut"}],
153 | width: 300,
154 | height: 250
155 | }
156 |
157 |
158 | | Property | 162 |Value | 163 |Description | 164 |
|---|---|---|
| title | 169 |String | 170 |Title of the table | 171 |
| x | 174 |String | 175 |cAttribute name for X-axis | 176 |
| maxLength | 179 |int | 180 |Maximum length of chart datatable | 181 | 182 |
| height | 186 |px | 187 |height of the chart | 188 | 189 |
| charts | 193 |object | 194 |Collection of charts | 195 | 196 |
| Property | 204 |Value | 205 |Description | 206 |
|---|---|---|
| type | 211 |String | 212 |Title of the table | 213 |
| y | 216 |String | 217 |Attribute name for Y-axis | 218 | 219 |