Call function drawTable when I zoom on main chart, but don't call when I zoom on bottom navigation bar.
Example:
http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-selection/
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x',
events: {
selection: function(event) {
if (event.xAxis) {
drawTable(event.xAxis[0].min, event.xAxis[0].max);
} else {
$('#table').html('Selection reset');
}
}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'Total Traf'
},
xAxis : {
maxZoom : 14 * 24 * 3600000 // fourteen days
},
series : [{
name : 'TT',
data : data,
tooltip: {
yDecimals: 2
}
}]
});
});
I think this is some what in the direction of what you are looking for:
http://jsfiddle.net/7VgJM/3/
I was not quite sure what you were asking, but made an educated guess.
Related
I have a scatter plot Vizframe chart in which I need to include a linear regression/trend line. Any idea how this can be done? It appears this is not something offered by vizframe 'out of box'? I can't find a solution for this!
Question:
Any suggestions on a feasible way to implement a regression line on a Scatter Plot Vizframe chart?
Here is the code I have for the setup. The scatter plot opens in a dialog/modal when a button is pressed.
sap.ui.define([
'jquery.sap.global',
'vizConcept/controller/BaseController',
'sap/ui/model/json/JSONModel',
'vizConcept/model/viewControls',
'sap/m/Button',
'sap/m/Dialog',
],
function (jQuery, BaseController, JSONModel, viewControls, Button, Dialog) {
"use strict";
var controls;
var mainController = BaseController.extend("vizConcept.controller.Main", {
onInit: function(oEvent) {
// Access/expose the defined model(s) configured in the Component.js or Manifest.json within the controller.
this.getView().setModel(this.getOwnerComponent().getModel("products"), "products");
var oModel = this.getView().getModel("products");
this.getView().setModel(oModel);
var sUrl = "#" + this.getOwnerComponent().getRouter().getURL("page2");
$(function() {
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Award Date',
value : "{AwdDate}"
}
],
measures : [
{
group: 1,
name : 'Award Date',
value : '{Hist}'
},
{
group: 2,
name : 'Current PPI',
value : '{Current}'
}
],
data : {
path : "/ProductCollection"
}
});
var scatterViz = new sap.viz.ui5.Scatter({
id : "idscatter",
width : "1000px",
height : "400px",
title : {
text : 'Pricing Tool Scatter Plot Example'
},
xAxis : {
title : {
visible : true
}
},
yAxis : {
title : {
visible : true
}
},
dataset : dataset
});
scatterViz.setModel(sap.ui.getCore().getModel());
scatterViz.setModel(oModel);
var dlg = new sap.m.Dialog({
id: 'vizModal',
title: 'Scatter Plot Example Viz',
width : "1800px",
height : "600px",
content : [scatterViz],
beginButton: new Button({
text: 'Close',
press: function () {
dlg.close();
}
})
});
(new sap.m.Button({
text: 'open',
type: 'Accept',
press: function() {
dlg.open();
scatterViz.invalidate();
}
})).placeAt('content');
});
},
onToPage2 : function () {
this.getOwnerComponent().getRouter().navTo("page2");
},
});
return mainController;
});
Edit
Here is the 'products' model that is outputted on the vizframe chart. I have the products model defined in the manifest.json but the connection there is fine:
products model
{
"ProductCollection": [
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 171.9,
"Current": 183
},
{
"Item": "2",
"AwdDate": "20160701",
"Hist" : 144.3,
"Current": 158.6
},
{
"Item": "3",
"AwdDate": "20150701",
"Hist": 160,
"Current": 165
},
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 201,
"Current": 167
},
{
"Item": "2",
"AwdDate": "20160801",
"Hist" : 175.3,
"Current": 178.2
},
{
"Item": "3",
"AwdDate": "20150721",
"Hist": 160,
"Current": 147
},
{
"Item": "1",
"AwdDate": "20160715",
"Hist": 175.9,
"Current": 185.2
},
{
"Item": "2",
"AwdDate": "20161101",
"Hist" : 165.3,
"Current": 158.2
},
{
"Item": "3",
"AwdDate": "201700101",
"Hist": 160,
"Current": 165
},
{
"Item": "4",
"AwdDate": "201600401",
"Hist": 173,
"Current": 177
}
]
};
Edit 2
Here is my attempt at the solution offered here. But nothing appears after this is included in the onInit() function of the controller.
var regressionData = [];
for (var i = 0; i < 10; i++) {
regressionData[i] = [oData.ProductCollection[i].Current, oData.ProductCollection[i].Hist];
};
regression('linear', regressionData);
Unfortunately, you have some limitations inherent to the viz charts. Namely:
You cannot add "oblique" reference lines (= the trend line) to the chart. You can only add vertical / horizontal ones via the Reference Line feature. Check out the (non-intuitive) documentation on this: Viz Charts Documentation (look at the plotArea.referenceLine.line; it is just a number = will be a horizontal / vertical line depending on your chart type or orientation).
You cannot combine a scatter plot with a line chart. If you look in the same Viz Charts Documentation, you will see that in the Combination "chapter" on the left hand side, there is no "Line - Scatter" combination.
Also, your X values (AwDate) are ABAP-style dates as string. It is more appropriate to use a date / time chart to correctly display them. Anyway, regression makes a lot more sense when you use dates. Otherwise your data is "categorical" and the only way you can make regression is by sorting them and considering them equidistant on the X axis - not what you would normally want if you have non-equidistant data (like the one in your example).
My proposal would be to:
Use a line chart instead of a scatter chart (such that you can also display the trend line).
Convert the ABAP-style strings into dates, such that you can use a timeseries chart. You have some "wrong" dates in your example data btw: "201600401".
Do the regression for whatever you want and add it as a separate "trend" series. You will need to compute a point on the "trend" series for each point on your other series (basically, you will have to add a "trend" attribute to each line in your ProductCollection). If you are using an OData model, then you will need to either switch to an JSON client model or do some ugly workarounds with formatters.
As requested, I made an example implementation here: https://jsfiddle.net/93mx0yvt/23/. The regression algorithm I borrowed from here: https://dracoblue.net/dev/linear-least-squares-in-javascript/. The main points of the code are:
// format for parsing the ABAP-style dates
var oFormat = DateFormat.getDateInstance({
pattern: "yyyyMMdd"
});
// maps an ProductCollection entry to a new object
// which has the parsed date (and only the needed attributes)
var fnMapData = function(oEntry) {
return {
date: oFormat.parse(oEntry.AwdDate),
current: oEntry.Current,
historical: oEntry.Hist
};
};
var fnProcessData = function(oD) {
var aEntries = oD.ProductCollection.map(fnMapData),
aXs = aEntries.map(function(oE) { // get the Xs
// we take the millis to be able to do arithmetics
return oE.date.getTime();
}),
aYs = aEntries.map(function(oE) { // get the Ys (hist)
return oE.historical;
}),
//changed the function to only return only result Ys
aRs = findLineByLeastSquares(aXs, aYs);
//save the Ys into the result
for (var i = 0; i < aEntries.length; ++i) {
aEntries[i].trend = aRs[i];
}
return {
data: aEntries
};
};
You can use then the data returned by the fnProcessData function inside a JSONModel and then build a simple multi-series date/time line chart based on it.
sap.ui.core.Element.extend("custom.barNlineChartControl", { metadata : {
properties : {
"Job" : {type : "string", group : "Misc", defaultValue : null},
"Threshold" : {type : "int", group : "Misc", defaultValue : null},
}
}});
sap.ui.core.Control.extend("control.barNlinechart", {
/* the control API */
metadata : {
aggregations : {
"items" : { type: "custom.barNlineChartControl", multiple : true, singularName : "item"}
},
events: {
"select" : {},
"selectEnd": {}
}
},
//D3 Code below:
onAfterRendering: function() {
var that = this;
/* get the Items aggregation of the control and put the data into an array */
var aItems = this.getItems();
var data = [];
for (var i=0;i<aItems.length;i++){
var oEntry = {};
for (var j in aItems[i].mProperties) {
oEntry[j]=aItems[i].mProperties[j];
}
data.push(oEntry);
}
alert(JSON.stringify(data));
Code of view & control
multiBarLineGraph = new control.barNlinechart({
layoutData: new sap.ui.layout.GridData({span: "L12 M12 S12"}),
items: {
path : "/genericData",
template : new custom.barNlineChartControl({Job:"{Job}",Threshold:"{Threshold}"}),
}
}),
var multiBarData = {
"genericData":[
{
"Job": "Doctor",
"Threshold": 45,
"Hospital1": 30,
"Hospital2": 100,
"Hospital3": 90,
},
{
"Job": "Teacher",
"Threshold": 65,
"School1": 60,
"School2": 75,
},
]};
When the alert in d3 code executes I get Job & Threshold but other data from JSON array are missing which is obvious as the properties set here only accept job and threshold. As the JSON is dynamic how to write custom control so that I can pass the complete data to control everytime no matter how dynamic the data be.
You could use type: "any" for your items and dont use the element custom.barNlineChartControl at all:
Edit: as an aggregation controls the lifetime of the aggregated objects you have to use a property in this case.
sap.ui.core.Control.extend("control.barNlinechart", {
/* the control API */
metadata : {
properties : {
"items" : { type: "any" }
},
events: {
"select" : {},
"selectEnd": {}
}
},
and then in your view:
multiBarLineGraph = new control.barNlinechart({
layoutData: new sap.ui.layout.GridData({span: "L12 M12 S12"}),
items: { path : "/genericData" }
}),
this.getItems() would return an array of whatever has been been set / bound.
I added video component to page then after I wrote this code as follows. But not working. How can I run this?
Pages.Page1.Video1.playVideo(true, true, function() {
alert("playybackStarrted.")
}, function() {
alert("video Initialized.")
}, function() {
alert("playyback Completed.")
}, function() {
alert("Error")
});
I tried this. I defined contentUrl as video.mp4. But I can't run this.
var video1 = new SMF.UI.Video({
top : "10%",
left : "10%",
width : "80%",
height : "40%",
controlStyle : SMF.UI.VideoControlStyle.embedded,
contentUrl : "video.mp4"
});
I added video dynamically and it runs fine as follows:
var video1 = new SMF.UI.Video({
top : "10%",
left : "10%",
width : "80%",
height : "40%",
controlStyle : SMF.UI.VideoControlStyle.embedded,
contentUrl : "..."
});
Pages.Page1.add(video1);
var btnPlay = new SMF.UI.TextButton({
top : '52%',
left : '10%',
width : "80%",
height : "10%",
text : "Play Video",
onPressed : function (e) {
video1.playVideo(true, true, function () {
alert("playybackStarrted.")
}, function () {
alert("video Initialized.")
}, function () {
alert("playyback Completed.")
}, function () {
alert("Error")
});
}
});
Pages.Page1.add(btnPlay);
I am trying to create a stockchart using kendoUI. Things are working fine but with some issues. Plotting of marker is not as expected. It is not placed on the desired point on chart area.
Here is the code I have been done for it:
$($context).kendoStockChart({
dataSource : {
data : data.ChartData,
sort : {
field : "Date",
dir : "asc"
}
},
seriesDefaults : {
markers : {
background : function (a) {
return a.dataItem.color;
},
visible : true,
type : "triangle",
size : 18
},
line : {
width : 0
}
},
series : [{
type : "line",
field : "Index",
categoryField : "Date",
labels : {
background : "transparent",
color : function (a) {
return a.dataItem.color === "#000000" ? "#ffffff" : "ffffff";
},
visible : true,
position : "insideEnd",
margin : {
top : 8,
left : -18
},
font : "10px sans-serif",
center : '5%',
template : "#= dataItem.TotalCount > 1 ? dataItem.TotalCount : '' #"
}
}
],
title : {
text : "Time View Chart"
},
dateField : "Date",
navigator : {
series : {
type : "line",
field : "Index",
categoryField : "Date",
markers : {
visible : true,
type : "triangle",
size : 8
}
}
},
valueAxis : {
labels : {
//format: "{0}",
visible : true,
template : function (obj) {
return data.indexCategories[obj.value] || "";
}
},
minorUnit : 1,
majorUnit : 1,
title : {
text : ""
},
line : {
visible : true
}
}
});
Try setting the categoryAxis justified property to false, then for the valueAxis set min and max values to include all your points with some room to spare.
categoryAxis: {
justified: false,
},
valueAxis: {
min: <lowest val in your data>,
max: <highest value plus some margin for the trianb=gle marker>
},
DEMO
i have 100000 data in my grid at first request it showing only 10 after clicking on the page selecter it showing next data............plz answer why enhanced grid displaying only 10 rows at first time
require([ "dojo/_base/lang","dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination","dojo/data/ItemFileReadStore",
"dijit/form/Button","dojo/request/xhr", "dojo/dom",
"dojo/dom-construct", "dojo/json", "dojo/on", "dojox/grid/cells/dijit",
"dojo/domReady!" ],
function(lang,EnhancedGrid,Pagination,ItemFileReadStore,Button,xhr, dom, domConst, JSON, on) {
xhr("myservernameaddress/GridExample/string", {
handleAs : "json"
}).then(
function(dataa) {
/* domConst.place("<p>response: <code>"
+ JSON.stringify(dataa) + "</code></p>",
"output"); */
/* domConst.place("<p>response: <code>"
+ JSON.stringify(dataa) + "</code></p>",
"output"); */
var mydata=dataa;
var yourStore = new dojo.data.ItemFileReadStore({
data: {
identifier: "sno",
/* items: mydata.aa */
items:mydata
}
});
grid = new EnhancedGrid({
store : yourStore,
selectable:true,
query : {
sno : "*"
},
structure : [ {
name : "SNO",
field : "sno",
width : "100px"
},{
name : "SNAME",
field : "sname",
width : "100px",
editable:true
},{
name : "SALARY",
field : "salary",
width : "200px",
editable:true
} ],
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["25","50","100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom",
search:true
}
}
});
grid.placeAt("myGrid");
grid.startup();
}, function(err) {
alert("error");
}, function(evt) {
});
});
can avoid enhanced grid default 10 rows size by this please check it
defaultPageSize: 50,.
use this in pagination plugin...
I think this might help you out:
When you define your grid you can set autoHeight
I've copied this from dojo:
autoHeight
If true, automatically expand grid’s height to fit data. If numeric,
defines the maximum rows of data displayed (if the grid contains
less than autoHeight rows, it will be shrunk).
For more informations have a look : http://dojotoolkit.org/reference-guide/1.7/dojox/grid/DataGrid.html#datagrid-options
Update1
Maybe this former Post makes it clearer: DataGrid's rowsPerPage attribute not working
Regards, Miriam