I'm trying to replicate the rotated labels example at http://www.jqplot.com/tests/rotated-tick-labels.php using:
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '11pt'
}
},
http://jsfiddle.net/XV5yz/2/
But I can't get the rotated labels... I think I've included all the relevant js files...
The "fontSize" option works as expected.
Your jqplot files aren't correct. Try to include those instead :
http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js
http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js
http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js
http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js
http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js
You need to increase div height too in order to see ticks well fitted :
<div id="chart2" style="height:400px;width:300px"></div>
Please see working example here
Related
I can't get resizeMode='contain' to work for images loaded remotely, wondering if there's something I've done wrong.
Render Method:
return (
<View style={styles.internal_button_avatar_container}>
<Image
style={styles.internal_button_avatar_image}
source={{ uri: this.state.imageURL }}
loadingIndicatorSource={require('../assets/icons/PageLink-Loading.png')}
resizeMode={'contain'}
/>
</View>
);
Styles (relevant section):
internal_button_avatar_container: {
marginRight: 10,
width: 40,
height: 40,
},
internal_button_avatar_image: {
width: 40,
height: 40,
},
I've tried resizeMode='contain' and resizeMode='center' but the image always is cropped around the outside of it's frame. Screenshot showing cropped icon.. I've also tried with undefined height and width on the image.
The cropping only appears to happen if the source image is not the same aspect ratio as the frame, a square source will result in perfectly scaled image.
I tried to reproduce your situation, but I haven't problems with that in this snack:
https://snack.expo.io/#gersonmontenegro/resizemode
The original size of the image is bigger than the container, even it has a different aspect radio, and it has loaded according to the internal_button_avatar_image.
Is ok for you?
Turns out I was getting the image from an endpoint in an API that auto-cropped the original image - should've checked the source image before everything else!
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)
Following the Telerik Kendo Area Chart example found here: http://demos.telerik.com/kendo-ui/dataviz/area-charts/index.html
I've been trying to apply the 'smooth' effect to my chart, but with no luck.
seriesDefaults: {
type: "area",
stack:false,
area: {
line: {
style: "smooth"
}
}
},
Maybe I'm going blind, but I can't see what's wrong.. I've tried a myriad of different options and included all of the css styles for example in the jsFiddle:
http://jsfiddle.net/markive/u33m6/
Any idea what I am doing wrong?
I have a jqplot object that has x-axis tick marks/labels rendered on bottom. Basically, there is a stack of charts, all using the same x-axis. I would like to reclaim the bottom axis area from the middle charts for the plot lines.
How can I dynamically relocate the x-axis to top (i.e., northward)
How to make the x-axis label go away? For this I tried
plotobject.axes.xaxis.showLabel = false;
plotobject.replot();
but that seems to have no visible effect. plotobject is what's returned by the original $.jqplot() call and I am using $.jqplot.DateAxisRenderer for xaxis.renderer. I have access only to the plot object.
Thanks
This simple CSS solution is working for me to put the x-axis labels on top of the chart.
.jqplot-xaxis {
position: relative;
top: -30px;
}
well, the label for each axis (which is the axis title) has it's own renderer, and thus it's own options. I use the plugin one ( http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html ) but also the default has a show: true/false setting. ( http://www.jqplot.com/docs/files/jqplot-axisLabelRenderer-js.html )
it should look something like this:
axes: {
xaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Dates',
labelOptions: {
show: true,
fontSize: '10pt'
},
}
}
For putting the x-axis on top, I'm not sure what your problem realy is, but I try to select it with jquery and set it's z-index to something high to bring it on top. Take a look at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html for some selection ideas.
I'm using jqplot for displaying bar chart and pie chart. I want to display them without grid lines. So, I've inserted the following line.
grid:{background:'transparent',borderColor:'#d0d0d0'},
It is not working in IE but in firefox it is displaying without grid lines. Please help me out.
The grid lines can also be removed using the showGridline property within the tickOptions object (within the x or y axis object [within the axes object {within the options object}]).
axes: {
xaxis: {
tickOptions: {
showGridline: false
}
}
}
I'm pretty sur that IE < 9 doesn't support transparancy.
Try this for IE <= 8 loading of excanvas, It worked for me:
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js">
</script><![endif]-->
grid: { background: 'rgba(0,0,0,0)',
drawBorder: false,
shadow: false
}