I'm using the Vis.js timeline library with the option verticalScroll: true. I'm following this example: https://visjs.github.io/vis-timeline/examples/timeline/other/verticalScroll.html
...
var options = {
stack: true,
verticalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: 200,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
};
// create a Timeline
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options);
I need to put the scroll bar at the right side. Is it possible?
Is there any configuration option to do this?
Remove the maxHeight property in the options, you will then see the scroll bar on the right side.
Related
I have a graph which has live data feeding in, but the chart only tracks or follows the data line if the navigator is enabled.
I am unsure if this is a feature or is it a bug.
On the JSFiddle, notice how it doesn't track, but as soon as you change enabled: false to enabled: true, on line 43, it instantly starts tracking.
http://jsfiddle.net/6eso1hgy/1/
Is it possible to make it have the tracking behavior without a navigator?
I don't know if you really need Highstock. If not then you can change the code to just Highcharts and then remove all unnecessary code and add the following:
series: [{
marker: {
radius: 0
},
...
Fiddle
You can achieve it using xAxis.setExtremes() method:
Code:
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var chart = this;
setInterval(function() {
NewTime = (new Date()).getTime(); // current time
var x = NewTime,
y = Math.round(Math.random() * 10);
series.addPoint([x, y], false, false, false); //redraw shift animation
chart.xAxis[0].setExtremes(
chart.xAxis[0].min + 1000,
chart.xAxis[0].max + 1000,
true,
false
);
}, 1000);
}
}
Demo:
http://jsfiddle.net/BlackLabel/z1mu0Lgh/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Does anyone know how to implement a vertical scrollbar for a vis.js timeline? I have read the visjs.org documentation, other threads here on stack overflow and on GitHub, but I still can't implement the scrollbar.
Should it be enough to write verticalScroll: true in the configuration for a vis.js timeline? This is what I have as configuration at the moment. Do I need to write it in some other way? Or do I need to implement the vertical scroll in a totally different way?
// Configuration for the Timeline
var options = {
width: '100%',
height: '100%',
minHeight: '300px',
padding: '0px',
orientation: 'top',
max: futureDate,
min: pastDate,
groupOrder: 'start',
zoomMin: '86400000',
margin: {item: {horizontal: 0, vertical: 5}, axis: 5},
verticalScroll: true,
zoomKey: 'ctrlKey'
};
A priori the options taken are good, It would be enough to reduce the height of the timeline directly in the options rather than to use "minHeight" in this case. Normally, this should bring up the scroll bar.
To check this, reduce the timeline height to 150 px in the options (e.g)
You can also generate a large number of groups so that they exceed the vertical left pannel capacity of timeline so that the vertical scrollbar displays.
UPDATED with minimal example adapted from "vis.js examples"
See also the timeline documentation on website for configuring options...
<html>
<head>
<title>Timeline | Vertical Scroll Option</title>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>
<body>
<h1>Timeline vertical scroll option</h1>
<h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>
<div id="mytimeline1"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck ' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
var orderIndex = order + itemsPerGroup * truck
items.add({
id: orderIndex,
group: truck,
start: start,
end: end,
content: 'Order ' + orderIndex
});
}
}
// specify options
var options = {
stack: true,
verticalScroll: true,
zoomKey: 'ctrlKey',
height: 200, // you can use also "300px"
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
};
// create a Timeline
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options);
</script>
</body>
</html>
It sounds like you can get a scrollbar using overflow-y: scroll. Also, height: 100% will most likely never cause this to kick in (unless this element is contained within another element that has a set height) as the element that you are editing will keep growing in height rather than staying a certain height and have a scrollbar. So I would recommend removing height: 100% and using max-height instead (if your element isn't contained within another element), so if the element content grows to something larger than your max-height, it will begin to scroll. If you're looking to style that scrollbar, that's a whole different story.
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
12.4 to generate a pdf,charts are drawn by chartist,because chartist is svg based. I can see the chart in browser by html(test-chartist.html right chart).But When I user the command wkhtmltopdf --dpi 300 --page-size A4 test-chartist.html test3.pdf, chart is blank in the test3.pdf. And then I add the flowing js , the result is weirdsize is not right and direction is not right too
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
can anybody help me? thank you very much
OK，I suddenly found out the answer.
If I add width and height to the chart's options, everything is fine, as below:
var options = {
width: 800,
height: 150,
donut: true,
donutWidth: 30,
startAngle: 240,
total: 30,
showLabel: true,
animation:false
};
new Chartist.Pie('#mainImg', {
series: [10,10]
},options);
I hope it can help others.
I am working on a personal project creating graphs to show data about my music listening habits from Last FM's API.
I am grabbing the JSON data via an AJAX request and then using the returned JSON objects to populate a graph created using the Chartist.js JS library.
I'm having what I consider a quite straightforward issue in that I can't work out how to increase the overall size of the chart? To be more specific I'd like to increase the spacing between each scale point on the Y axis so that you can see more accurately what each figure is.
I have created the following JS Fiddle to show my problem:
http://jsfiddle.net/jt96usn9/
According to the documentation, I believe I need to change an option attribute known as scaleMinSpace but upon changing this figure no changes seem to occur.
Any help would be great?!
var lastfm = {};
lastfm.tracker = (function(){
//Set up an object for DOM elements and data source
var config = {
getRecentTracksURL: "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
user: "jimmersjukebox",
recentTracksElement: $(".recent-tracks"),
currentlyPlayingActiveClass: $(".current")
};
var setupLastFM = function(){
createPopularArtistsChart();
};
var createPopularArtistsChart = function(){
$.getJSON(config.getMostPopularArtistsURL,function(data){
var artistData = data.topartists.artist,
artists = $.map(artistData, function(artist) {
return [[artist.name]];
}),
playcounts = $.map(artistData, function(playcount) {
return [[playcount.playcount]];
});
// These are the default options of the line chart
var options = {
// Options for X-Axis
axisX: {
// The offset of the labels to the chart area
offset: 10,
// If labels should be shown or not
showLabel: true,
// If the axis grid should be drawn or not
showGrid: true,
// Interpolation function that allows you to intercept the value from the axis label
labelInterpolationFnc: function(value){return value;}
},
// Options for Y-Axis
axisY: {
scaleMinSpace: 100
},
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
width: undefined,
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: undefined,
// If the line should be drawn or not
showLine: true,
// If dots should be drawn or not
showPoint: true,
// Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
lineSmooth: true,
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
low: undefined,
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
high: undefined,
// Padding of the chart drawing area to the container element and labels
chartPadding: 15,
// Specify the distance in pixel of bars in a group
seriesBarDistance: 15,
// Override the class names that get used to generate the SVG structure of the chart
};
data = {
// A labels array that can contain any sort of values
labels: artists.slice(0,10),
// Our series array that contains series objects or in this case series data arrays
series: [
playcounts.slice(0,10)
]
};
// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
Chartist.Bar('.ct-chart', data, options);
});
};
return{
config: config,
init: function(){
setupLastFM();
}
};
})();
$(window).load(lastfm.tracker.init);
/* Chartist.js 0.2.4
* Copyright © 2014 Gion Kunz
* Free to use under the WTFPL license.
* http://www.wtfpl.net/
*/
.ct-chart .ct-label{fill:rgba(0,0,0,.4);font-size:.75rem}.ct-chart .ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-chart .ct-point{stroke-width:10px;stroke-linecap:round}.ct-chart .ct-line{fill:none;stroke-width:4px}.ct-chart .ct-area{stroke:none;fill-opacity:.1}.ct-chart .ct-bar{fill:none;stroke-width:10px}.ct-chart .ct-slice.ct-donut{fill:none;stroke-width:60px}.ct-chart .ct-series.ct-series-a .ct-bar,.ct-chart .ct-series.ct-series-a .ct-line,.ct-chart .ct-series.ct-series-a .ct-point,.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut{stroke:#d70206}.ct-chart .ct-series.ct-series-a .ct-area,.ct-chart .ct-series.ct-series-a .ct-slice:not(.ct-donut){fill:#d70206}.ct-chart .ct-series.ct-series-b .ct-bar,.ct-chart .ct-series.ct-series-b .ct-line,.ct-chart .ct-series.ct-series-b .ct-point,.ct-chart .ct-series.ct-series-b .ct-slice.ct-donut{stroke:#F05B4F}.ct-chart .ct-series.ct-series-b .ct-area,.ct-chart .ct-series.ct-series-b .ct-slice:not(.ct-donut){fill:#F05B4F}.ct-chart .ct-series.ct-series-c .ct-bar,.ct-chart .ct-series.ct-series-c .ct-line,.ct-chart .ct-series.ct-series-c .ct-point,.ct-chart .ct-series.ct-series-c .ct-slice.ct-donut{stroke:#F4C63D}.ct-chart .ct-series.ct-series-c .ct-area,.ct-chart .ct-series.ct-series-c .ct-slice:not(.ct-donut){fill:#F4C63D}.ct-chart .ct-series.ct-series-d .ct-bar,.ct-chart .ct-series.ct-series-d .ct-line,.ct-chart .ct-series.ct-series-d .ct-point,.ct-chart .ct-series.ct-series-d .ct-slice.ct-donut{stroke:#453D3F}.ct-chart .ct-series.ct-series-d .ct-area,.ct-chart .ct-series.ct-series-d .ct-slice:not(.ct-donut){fill:#453D3F}.ct-chart.ct-square{display:block;position:relative;width:100%}.ct-chart.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-chart.ct-square:after{content:"";display:table;clear:both}.ct-chart.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-second{display:block;position:relative;width:100%}.ct-chart.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-chart.ct-minor-second:after{content:"";display:table;clear:both}.ct-chart.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-second{display:block;position:relative;width:100%}.ct-chart.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-chart.ct-major-second:after{content:"";display:table;clear:both}.ct-chart.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-third{display:block;position:relative;width:100%}.ct-chart.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-chart.ct-minor-third:after{content:"";display:table;clear:both}.ct-chart.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-third{display:block;position:relative;width:100%}.ct-chart.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-chart.ct-major-third:after{content:"";display:table;clear:both}.ct-chart.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-chart.ct-perfect-fourth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-chart.ct-perfect-fifth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-sixth{display:block;position:relative;width:100%}.ct-chart.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-chart.ct-minor-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-golden-section{display:block;position:relative;width:100%}.ct-chart.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-chart.ct-golden-section:after{content:"";display:table;clear:both}.ct-chart.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-sixth{display:block;position:relative;width:100%}.ct-chart.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-chart.ct-major-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-seventh{display:block;position:relative;width:100%}.ct-chart.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-chart.ct-minor-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-seventh{display:block;position:relative;width:100%}.ct-chart.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-chart.ct-major-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-octave{display:block;position:relative;width:100%}.ct-chart.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-chart.ct-octave:after{content:"";display:table;clear:both}.ct-chart.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-tenth{display:block;position:relative;width:100%}.ct-chart.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-chart.ct-major-tenth:after{content:"";display:table;clear:both}.ct-chart.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-eleventh{display:block;position:relative;width:100%}.ct-chart.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-chart.ct-major-eleventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-twelfth{display:block;position:relative;width:100%}.ct-chart.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-chart.ct-major-twelfth:after{content:"";display:table;clear:both}.ct-chart.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-double-octave{display:block;position:relative;width:100%}.ct-chart.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-chart.ct-double-octave:after{content:"";display:table;clear:both}.ct-chart.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}
<script src="//cdnjs.cloudflare.com/ajax/libs/chartist/0.2.4/chartist.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="chart-container">
<div class="ct-chart"></div>
</div>
if you give height in the options like
var options = {
seriesBarDistance: 10,
fullWidth: true,
showArea:true,
height:'500px'
};
new Chartist.Bar('.ct-chart', dataArray, options, responsiveOptions );
It will increase the overall height and spacing too.
Thanks
Kiran.
I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?
If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.