ILinePlot.js revision f4261b4fbb05ab7e27d89fa2f607773cdf4355b2
1aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino/* 24ec4aee55dbd4045cfb6a2fe099615a569ce7ff7Javi Merino * Copyright 2015-2016 ARM Limited 3aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * 4aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * Licensed under the Apache License, Version 2.0 (the "License"); 5aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * you may not use this file except in compliance with the License. 6aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * You may obtain a copy of the License at 7aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * 8aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * http://www.apache.org/licenses/LICENSE-2.0 9aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * 10aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * Unless required by applicable law or agreed to in writing, software 11aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * distributed under the License is distributed on an "AS IS" BASIS, 12aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * See the License for the specific language governing permissions and 14aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino * limitations under the License. 158741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh */ 16aace7c0732cac769f1ffe95a89591b6217fa9447Javi Merino 17211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singhvar ILinePlot = ( function() { 1867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 1967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var graphs = new Array(); 2067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var syncObjs = new Array(); 2167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 22211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh var convertToDataTable = function (d, index_col) { 238741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 248741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var columns = _.keys(d); 258741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var out = []; 268741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var index_col_default = false; 278741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var index; 288741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 298741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh if (index_col == undefined) { 308741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 318741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var index = []; 328741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 338741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh columns.forEach(function(col) { 348741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh index = index.concat(Object.keys(d[col])); 358741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh }); 368741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 378741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh index = $.unique(index); 388741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh index_col_default = true; 398741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh index = index.sort(function(a, b) { 408741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh return (parseFloat(a) - parseFloat(b)); 418741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh }); 428741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh } else { 438741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh index = d[index_col]; 448741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh columns.splice(columns.indexOf(index_col), 1); 458741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh } 468741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 478741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh for (var ix in index) { 488741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 498741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var ix_val = ix; 508741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 518741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh if (index_col_default) 528741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh ix_val = index[ix]; 538741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 548741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var row = [parseFloat(ix_val)]; 558741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh columns.forEach(function(col) { 568741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 578741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var val = d[col][ix_val]; 588741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh if (val == undefined) 598741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh val = null; 608741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 618741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh row.push(val); 628741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh }); 638741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh out.push(row); 648741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh } 658741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 668741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var labels = ["index"].concat(columns); 678741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh return { 688741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh data: out, 698741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh labels: labels 708741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh } 71211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh }; 72211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh 7367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var purge = function() { 7467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh for (var div_name in graphs) { 7567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (document.getElementById(div_name) == null) { 7667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh delete graphs[div_name]; 7767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 7867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 7967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }; 8067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 8167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var sync = function(group) { 8267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 8367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var syncGraphs = Array(); 8467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var xRange; 8567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var yRange; 8667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var syncZoom = true; 8767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 8867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh for (var div_name in graphs) { 8967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 9067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (graphs[div_name].group == group) { 9167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh syncGraphs.push(graphs[div_name].graph); 9267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh syncZoom = syncZoom & graphs[div_name].syncZoom; 9367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 9467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var xR = graphs[div_name].graph.xAxisRange(); 9567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var yR = graphs[div_name].graph.yAxisRange(); 9667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 9767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (xRange != undefined) { 9867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (xR[0] < xRange[0]) 9967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh xRange[0] = xR[0]; 10067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (xR[1] > xRange[1]) 10167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh xRange[1] = xR[1]; 10267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } else 10367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh xRange = xR; 10467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 10567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (yRange != undefined) { 10667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (yR[0] < yRange[0]) 10767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh yRange[0] = yR[0]; 10867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (yR[1] > yRange[1]) 10967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh yRange[1] = yR[1]; 11067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } else 11167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh yRange = yR; 11267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 11367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 11467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 11567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (syncGraphs.length >= 2) { 11667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (syncZoom) { 11767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (syncObjs[group] != undefined) 11867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh syncObjs[group].detach(); 11967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 12067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh syncObjs[group] = Dygraph.synchronize(syncGraphs, { 12167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh zoom: true, 12267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh selection: false, 12367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh range: true 12467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }); 12567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 12667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 12767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh $.each(syncGraphs, function(g) { 12867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var graph = syncGraphs[g]; 12967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 13067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.updateOptions({ 13167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh valueRange: yRange, 13267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh dateWindow: xRange 13367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }); 13467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 13567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (graph.padFront_ == undefined) { 13667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.padFront_ = true; 13767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var _decoy_elem = new Array(graph.rawData_[0].length); 13867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.rawData_.unshift(_decoy_elem); 13967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 14067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.rawData_[0][0] = xRange[0]; 14167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 14267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh if (graph.padBack_ == undefined) { 14367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.padBack_ = true; 14467527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh var _decoy_elem = new Array(graph.rawData_[0].length); 14567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.rawData_.push(_decoy_elem); 14667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 14767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph.rawData_[graph.rawData_.length - 1][0] = xRange[1]; 14867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }); 14967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh } 15067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }; 15167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 152f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino var generate = function(data, colors) { 153f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino create_graph(data, colors); 154535b3bd3ff699415798dbf1e9cf9e3bc3f56c3b2Javi Merino purge(); 155535b3bd3ff699415798dbf1e9cf9e3bc3f56c3b2Javi Merino if (data.syncGroup != undefined) 156535b3bd3ff699415798dbf1e9cf9e3bc3f56c3b2Javi Merino sync(data.syncGroup); 157211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh }; 158211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh 159f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino var create_graph = function(t_info, colors) { 1608741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh var tabular = convertToDataTable(t_info.data, t_info.index_col); 161f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino var options = { 1628741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh legend: 'always', 1638741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh title: t_info.title, 1648741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh labels: tabular.labels, 1658741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh labelsDivStyles: { 1668741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 'textAlign': 'right' 1678741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh }, 1688741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh rollPeriod: 1, 1698741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh animatedZooms: true, 1708741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh connectSeparatedPoints: true, 1718741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh showRangeSelector: t_info.rangesel, 1728741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh rangeSelectorHeight: 50, 1738741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh stepPlot: t_info.step_plot, 1748741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh logscale: t_info.logscale, 175bd75d5c3abd977e41ce8c9f7e4740a552a239932Kapileshwar Singh fillGraph: t_info.fill_graph, 1768741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh labelsDiv: t_info.name + "_legend", 1774462468766dabe30a7c58c655807c4c2ede0fdccKapileshwar Singh errorBars: false, 1789b4898aa3ea40f2af85157af65ab491e8aaa9b4cMichele Di Giorgio labelsSeparateLines: true, 1797ab82627f892036d7eeb04af3d282a329f8d04cdKapileshwar Singh valueRange: t_info.valueRange, 1807ab82627f892036d7eeb04af3d282a329f8d04cdKapileshwar Singh drawPoints: t_info.drawPoints, 1817ab82627f892036d7eeb04af3d282a329f8d04cdKapileshwar Singh strokeWidth: t_info.strokeWidth, 1827ab82627f892036d7eeb04af3d282a329f8d04cdKapileshwar Singh pointSize: t_info.pointSize, 183c972b86eac3c41c14b4063f0a4c79b371ebe739cKapileshwar Singh dateWindow: t_info.dateWindow 184f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino }; 185f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino 186f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino if (typeof colors !== 'undefined') 187f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino options["colors"] = colors; 188f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino 189f4261b4fbb05ab7e27d89fa2f607773cdf4355b2Javi Merino var graph = new Dygraph(document.getElementById(t_info.name), tabular.data, options); 190b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh 191b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh var width = $("#" + t_info.name) 192b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh .closest(".output_subarea").width() / t_info.per_line 193b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh 194094df31b5d420dfbd705cdfaa51f580522b0ad80Michele Di Giorgio /* 195094df31b5d420dfbd705cdfaa51f580522b0ad80Michele Di Giorgio * Remove 3 pixels from width to avoid unnecessary horizontal scrollbar 196094df31b5d420dfbd705cdfaa51f580522b0ad80Michele Di Giorgio */ 197094df31b5d420dfbd705cdfaa51f580522b0ad80Michele Di Giorgio graph.resize(width - 3, t_info.height); 198b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh 199b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh $(window).on("resize." + t_info.name, function() { 200b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh 201b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh var width = $("#" + t_info.name) 202b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh .closest(".output_subarea").width() / t_info.per_line 2038741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 204b9e8f11cfd24c71e4634a3b23ba3704841e636d9Kapileshwar Singh graph.resize(width, t_info.height); 20567527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }); 20667527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 20767527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graphs[t_info.name] = 20867527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh { 20967527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh graph: graph, 21067527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh group: t_info.syncGroup, 21167527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh syncZoom: t_info.syncZoom 21267527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh }; 21367527ddea39e858c957997356a16bd8e3819f359Kapileshwar Singh 214211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh }; 2158741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 216211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh return { 217211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh generate: generate 218211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh }; 2198741ef170bc7fcc772837fd2db3df2f8d74b6c10Kapileshwar Singh 220211860fe53efaa299db6ff6c9b28816bcb5902d4Kapileshwar Singh}()); 221