Found this and would love to replace .animate() with .transition() (http://ricostacruz.com/jquery.transit):
Replace jQuery slide with animate() CSS3
This does not seem to animate, but is instead finished when clicked:
el.transition({ "display": "block", "height": "show"}, 250);
Your sintax is not correct, you can use transit with values like:
opacity, rotate, padding, width, height, x etc.
And what is that 'height: show' there?
Here is an example of usage:
JQ(thePanel).transition({
opacity: 0,
duration: 200,
rotate: '+=3deg',
height: theHeight,
});
You see, also the duration is declarated inside the {}. There's a bunch of examples on http://ricostacruz.com/jquery.transit/#top
Related
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and it's not what I need.
When someone asked the same question on Github, it looks as though there isn't currently an easy way to do this. plouc, the creator of nivo said the following:
short answer, you cannot :/ However you can use an extra layer to achieve the same result, using the layers property and adding an extra component.
The photo attached is from the Nivo documentation on adding a marker (clicking on the Story tab will show basic code).
Here is the source code for the markers item. If you search for width throughout the document, you can see that it's set in the x2 of the line. Scrolling down further, you can see there is a strokeWidth property, but from what I can tell it only controls the thickness of the line, not how wide it is.
Can someone please let me know what I missed?
Here is my code. I am displaying two markers on my bar chart so there are two marker objects passed in. I've removed unrelated Bar props for simplification.
<NivoBar
data={data}
keys={['floor', 'pattern', 'ceiling']}
markers={[
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: ceiling,
lineStyle: {stroke: 'red', strokeWidth: 2},
legend: `${ceiling}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange', fontWeight: 'bold'}
},
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: floor,
lineStyle: {stroke: 'red, strokeWidth: 2},
legend: `${floor}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange, fontWeight: 'bold'}
}
]}
/>
How to change the default color, which is pink & blue to some other colors.
I know ways to set each bar a different color, but I need a user defined same color for all the charts.
How can I achieve this. ?
html code
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartClick)="chartClicked($event)"></canvas>
Typescript code
this.barChartData.push({
label: 'Request',
data: requests,
backgroundColor: "#bcf5ec"
},
{
label: 'Feedback',
data: feedbacks,
backgroundColor:'rgb(255, 255, 255)'
}
);
Here in image its pink & blueI need to change it to yellow & red
Just change the backgroundColor.
Use an extra variable for data and options so you can access them easily.
I made you an example where you can change the colors dynamically.
If you want to change them once at the start it's much easier.
Added [colors]="barChartColors" in html & define colors in barChartColors.
Typescript
public barChartColors: any [] =[
{
backgroundColor:'#91ebda',
//borderColor: "rgba(10,150,132,1)",
// borderWidth: 5
},
{
backgroundColor:'rgb(97 174 55, 1 )',
// borderColor: "rgba(10,150,132,1)",
// borderWidth: 5,
}
]
html
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
[colors]="barChartColors"
(chartClick)="chartClicked($event)"></canvas>
Chart.js Ionic 2 Angular2: Background color of bar graph not changing
visualization.PieChartwithpieHole, I just want to give some custom text insidepieHole` is this possible? Any idea how to do his?
My code is
var chart6 = new google.visualization.PieChart(document.getElementById('chart6'));
chart6.draw(data, {width: 650, height: 259, title: 'Browser bounce rate',
colors:['#058DC7','#50B432','#ED561B','#EDEF00','#24CBE5','#64E572'],
areaOpacity: 0.1,
pieHole: 0.4,
hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#FFFFFF', fontSize: 10 } },
pointSize: 5,
chartArea:{left:0,top:30,width:"100%",height:"100%"}
});
There are no chart options that will let you put text in the hole; you have to layer other elements on top of your chart.
If you don't have to worry about older versions of IE, you can actually layer the HTML under the chart instead of on top, and set the chart's backgroundColor option to "transparent". This will let the text show through the hole, but won't block any mouse interactions with the chart. If you have to code for IE < 9 as well, you have to layer on top (at least in IE < 9), as the Visualization API does not support transparency in IE < 9.
Merry Xmas,
I have an issue in applying div height using jquery.
I need to have the (.leftstatbar) div to be of the height of the entire document. But thats not happening with this. There is a white space at the bottom, as the other document exceeds the height of this div.
Here is what I have tried
<script type="text/javascript">
$(document).ready (function (){
var winWidth = $ (window).innerWidth();
var winHeight = $ (document).innerHeight();
// set initial div height / width
$('.leftstatbar').css({
'width': '250px',
'height': winHeight
});
$(window).resize(function(){
var winWidth1 = $ (window).innerWidth();
var winHeight1 = $ (document).innerHeight();
$('.leftstatbar').css({
'width': '250px',
'height':winHeight1
});
});
});
My issue is , With the above code I am unable to get the initial height. My document is lengthier than the div (.leftstatbar). Another problem is with the resizer. It resizes initially but then it wont.
Kindly support
Many Thanks
The methods innerHeight() and innerWidth() do not apply to the window or document objects. You should use height() and width() instead. See here: http://api.jquery.com/innerHeight/
The issue with your resizer is that you are doing a closure on the initial values from the calls to innerHeight() and innerWidth() and then setting the size of DIV to the same value over and over as the resizer is called. You should set the value of the height to the height of the document at the time the function is called (dynamically).
$(window).resize(function(){
$('.leftstatbar').css({
'width': '250px',
'height':$(document).css("height");
});
});
Use .css("height") instead of height() in this case to automatically include the units (px).
I am generating this Google Line Chart using the Google JS API. As you can see, the labels are very narrow. How do I make it so that the whole label text is visible?
Here are some samples based on the google code playground line charts. Adjusting the chartArea width option gives more space for labels:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
chartArea: {width: '50%'}}
);
If it's an option, you could also position the labels beneath the chart, which gives considerably more space:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
legend: 'bottom'}
);
Expanding the chartArea option to a width of 100% solved the problem for me. Contrary to the documentation, the chartArea does include the legend. I used a PieChart but the same option is available for the LineChart.
var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);
Reference.
None of the previous answers worked well for me. Setting width to less than 100% centers the plot area and leaves too much unused space on the left. Setting it to 100% is not a solution either.
What worked well - see live working fiddle - is setting the right value to accommodate the legend, then adjusting the left value eventually, for the Y axis title and labels. The plot area width will adjust automatically between these two fixed margins:
var options = {
...
legend: { position: 'right' },
chartArea: {
right: 130, // set this to adjust the legend width
left: 60, // set this eventually, to adjust the left margin
},
...
};
There is an option in legend.textStyle we can customize legend text styles inside google charts
var options = {
legend: { textStyle: { fontSize: 78 //size of the legend
} }
}
You need to make the chart wider or your labels shorter.