I am using Google charts to show some graphs in my website. The thing is I have too many periods (by weeks), imagine two years, I would have over 100 weeks, the chart really becomes incomprehensible, so I thought about adding some kind of pagination by month, is this possible?
$j('#Summary').Chart({
chartClass: google.visualization.AreaChart,
chartOptions: {
backgroundColor: '#FFF',
width: '100%',
height: 400,
hAxis: { title: 'time' },
vAxis: { title: 'contents' },
isStacked: true
},
chartData: data,
setCertainty: true
});
Maybe you this is what you are looking for
https://developers.google.com/chart/interactive/docs/examples#tablequerywrapper
Is a table, but is paginated
If not, try to implement some system to move ranges between your data. Some example, will help
Related
I am trying to use the Full Calendar component to show 3 days in agenda Day view or eventually using the vertical resource view.
I tried using the example custom view but no luck.
Is it possible to show 3 days, one below another in the day view ?
I am using this constructor, but I don't want the days to be next to each other, but underneath each other.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-12-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 3 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
//groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
groupByDate: true
}
}
You can't show the days below each other in an agenda style view, no. Its whole layout scheme is oriented horizontally. You can easily show them side-by-side, in the normal agenda style.
The vertical resource view provided by the Scheduler plug-in is essentially the same as the agenda view, but with each day split out into sub-columns for each specified Resource.
If you want days to appear one below the other, your only option is the "list"-style view. This will show things vertically, but you lose the time grid.
This code will achieve both of those types of view with a 3-day span, so you can see the difference:
views: {
agendaThreeDay: {
type: 'agenda',
duration: {
days: 3
},
buttonText: '3 day agenda'
},
listThreeDay: {
type: 'list',
duration: {
days: 3
},
buttonText: '3 day list'
}
},
Here is a working demo: http://jsfiddle.net/sbxpv25p/104/
If neither of those satisfy what you want, then your only other option is to make a completely custom view type (see the second half of this documentation page: https://fullcalendar.io/docs/views/Custom_Views/). This is a complex and time-consuming task, so before embarking on such a thing you should consider whether one of the built-in types of view will really be satisfactory - they do convey the necessary information to the user, which is the main purpose of a calendar, even if it wasn't quite in exactly the layout you had imagined.
In order to show multiple days in Agenda View ( Day ) just add - and + how many hours you want ... For example -24 H for a day ahead and +24 H for a day after your selected day. Something like this:
views: {
firstView: {
type: 'agendaDay',
minTime: '-12:00:00',
maxTime: '36:00:00',
slotDuration: '00:30:00',
},
}
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
and add it to header:
header: {
left: 'prev,next',
center: 'title',
right: '.....,timeGridFourDay'
},
https://fullcalendar.io/docs/custom-views
I have a bootstrap carousel with 2 slides. Both the slides uses bootstrap grids of 2x2 to display charts on them. They are working fine , however I am trying to implement responsive media queries and can't seem to make it work. I used baseOptions and media options to define but the charts do not load up and the console doesn't show any error.
I have tried to define the <div> container with inline style width and height i.e. style="width: 100%;height:400px;" and I have also tried to define the width and height in CSS like so-
.mychart {
width: 100%;
height: 400px;
}
The javascript looks like below.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Processed','Unprocessed','In RIB','Errors']
},
color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'],
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false},
magicType : { show: false},
dataZoom : { show : false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Processed',
type:'pie',
radius : ['50%', '70%'],
startAngle : 230,
center: ['35%', '50%'],
itemStyle : labelFormatter, //custom formatter
data: lpnArr //load chart with data array lpnArr
}
]
}
var mediaQuery = [
{
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
}
];
myChart1.setOption({baseOption : option,
media : mediaQuery});
if I use it without the media query it works just fine. like this
myChart1.setOption(option);
Using the media query, as per the documentation along with baseOptions and media, the charts simply don't load and it doesn't show me any error in the console as well, so I am not sure if I am using it correctly or not.
By the way, I also have this in the end of the script to be able to resize the charts when the window is resized but then I realized that this is not truly responsive -
$(window).on('resize', function(){
myChart1.resize();
});
The bootstrap chart elements are <div> elements within other div with a class of BS container-fluid. The carousel code can be found in this JSFiddle.
Media query was introduced in echarts version 3, whereas I have been using version 2 and thus it wasn't working. It's extremely odd that using media with version 2 doesn't show any kind of error, neither does baseOption show any error so I was left scratching my head. Documentation isn't clear enough to say that media queries is only supported in version 3. So after scouring through the code and GitHub threads for hours and trying out all their js versions I came to this conclusion.
The downside of using version 3 echarts is that it is missing the "Tree" chart type and it's a lot more pickier than any prior version. Also, it's twice as much slower than version 2.
I have included a new frame in my HTML-page, in this frame I have a Jtable .
I need to set the default pagesize to 4 to have the included view without scoller.
I made this changes:
options: {
paging: false,
pageList: 'normal', //possible values: 'minimal', 'normal'
pageSize: 4,
pageSizes: [4, 25, 50, 100, 250, 500],
pageSizeChangeArea: true,
gotoPageArea: 'combobox', //possible values: 'textbox', 'combobox', 'none'
messages: {
pagingInfo: 'Showing {0}-{1} of {2}',
pageSizeChangeLabel: 'Row count',
gotoPageLabel: 'Go to page'
}
},
In jquery.jtable.js and jquery.jtable.min.js. But I get always the page size = 10.
So , I need to know
Why the modification that I made wasn't sufficient?
How can I fix page size to 4 ?
I know this question was asked a while ago but I came across this problem myself recently and figured out what was going on..
Basically, jtable stores your preference for row count in a cookie. So if you previously viewed the page with pageSize 10, that's stored and when you change the JavaScript to a different it still picks up the value of 10 and it looks like nothing has changed.
Clear your cookies and it should work for you with the new pageSize.
I've created a simple pet-project website that uses Google Chart line graphs, and while everything appears fine on Chrome, the graphs aren't appearing on other browsers.
You can see the site in question here:
http://www.gta-bawsaq-billionaire.com/stock/xbox360/GOT
I cannot figure out what I've done wrong.
From looking around the web, I thought it might be something to do with Google's google.setOnLoadCallback not firing properly, so I tried surrounding that with:
document.addEventListener("DOMContentLoaded", function(event) { }
To see if it made sure the site was ready before attempting to load the chart, but it just timed out the entire page.
I don't believe I've made any mistakes in my options, they seem pretty straightforward:
var options = {
backgroundColor: '#2b2b2b',
legend: {
position: 'none'
},
animation: {
startup: true,
duration: 800,
easing: 'out'
},
chartArea:{
left:40,
top:10,
width: '100%',
height: '90%'
},
vAxis: {
gridlines: {
color: '#353535',
count: -1
},
baselineColor: '#555555',
textStyle: {color: '#555555' }
},
hAxis: {
gridlines: {
color: '#2b2b2b',
count: 5
},
textStyle: {color: '#555555' },
baselineColor: '#2b2b2b',
format:'MMM d'
},
width: 650,
height: 300
};
What am I doing wrong?
I forgot I needed to change the date format from Y-m-d to Y/m/d!
Phew, working well now.
I am using the following to successfully place the legend outside my JQPlot line chart:
legend: {
show: true,
location: 'sw',
placement: 'outside'
},
However, this places the legend too close to the chart, in line with my yaxis labeling. I need to move it further to the left. Is there a way to do this?
A bit late, sure, but I got it!
You should use
placement: 'outsideGrid' instead of placement: 'outside' as 'outsideGrid' will shrink the graph area for the legend not to be mixed with it.
Checkout the marginTop, marginRight, marginBottom, marginLeft properties for Legend.
You should be able to do:
legend: {
show: true,
location: 'sw',
placement: 'outside',
marginLeft: 300
}
You have to use it like this. marginLeft : "300px"
legend: {
show: true,
location: 'sw',
placement: 'outside',
marginLeft: "300px"
}