How trim xaxis values in chart ?
I am using http://www.jqplot.com/ plugin.
Try something like this:
xaxis:{
autoscale: true,
formatString: "%.2f"
}
Let me know..
Related
Consider this code snippet:
function drawChart() {
var slice_1 = ['A', 15];
var slice_2 = ['B', 40];
var slice_3 = ['C', 50];
var slice_4 = ['D', 40];
var series = [slice_1, slice_2, slice_3,slice_4];
var data = [series];
var options = {
seriesColors: ["#00aeef", "#FFBF00", "#0CDA08", "#FF1926"],
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer
},
legend: { show:true, location: 'e' }
};
$.jqplot('chartDivId', data, options);
}
In the above, how do i get percentage inside the pie chart? I tried many things but can;t make it work.
I added this:
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString:'%.4f'
}
But percentage didn't appear inside the pie chart.
I used the above snippet (the one you posted) and I was able to display labels in 'percentages'
You just need to use showDataLabels: true inside rendererOptions
By default, showDataLabels displays the labels in percentages.
No need for the code below. Remove these two lines
dataLabels: 'value',
dataLabelFormatString:'%.4f'
Here's a working JSFiddle for your code : Pie Chart - Show labels in percentages
Also make sure that you add rendererOptions inside seriesDefaults
You can also check the example over here: jqPlot - Pie Chart
Hope it helps.
I'm trying nvd3 example at http://nvd3.org/livecode/index.html#codemirrorNav
Please click on plot 2 "Scatter/Bubble Chart".
Original Code for JavaScript is like:
nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
d3.select('#chart svg')
.datum(data(4,40))
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I tried to change xAxis range/scale/domain to see if it has anything. But somehow it doesn't work.
What I did was to add
var xScale = d3.scale.linear().domain([0,1]).range([1,4]);
chart.xAxis.scale(xScale);
chart.xAxis.tickValues([1,2,3]);
below yAxis line in original plot.
I can see tickValues work as expected. But somehow both domain and range doesn't work as expected.
I would like to see xAxis to start from a different value like 1 or 0. Please help.
Try something like
chart.forceX([minValue,maxValue])
Hope it helps.
im using google api for line graph in my web application. in that line chart i dont want x axis line and y axis line, but i cant to fine how to remove the lines except the graph. could you please help me. i used this example for my practice
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
you cant remove or disable your x and y axis in google api the alter way is to set the baselineColor and gridlineColor same as the background color and set the textPosition to none.
vAxis:{
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
}
With the current version of Google Charts, the following removes axis lines:
hAxis: {
baselineColor: 'none',
ticks: []
},
vAxis: {
baselineColor: 'none',
ticks: []
}
I'm new to jqplot, when I want to draw a bar chart, x axis is date, interval is 1 day. This is part of my code:
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize:'10pt',
},
},
axes:{
xaxis:{
renderer:$x_renderer,
tickOptions:{
formatString:'%Y-%#m-%#d',
},
rendererOptions:{
tickOptions:{
angle:-90,
}
},
label:'$label',
tickInterval:'86400000',
},
yaxis:{
tickOptions:{
formatString:'%.2f',
},
autoscale:true
},
},
highlighter:{
show:true,
},
But I find the width of each bar is too large to cover each other. How to fix it?
Thanks!
The AnthonyLeGovic answer is indeed correct, but if you need to change the column width according to the number of data points you can do the following:
// Get the size of the container of the plot
var width = jQuery(containerName).width();
// Divide by the number of data points.
width = width / number_of_data_points;
// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;
// Set the value
$.jqplot(containerName, [data],
{
// whatever
// ...
seriesDefault:
{
renderer: $.jqplot.BarRenderer,
rendererOptions: { barWidth: width }
}
// whatever
// ...
}
Note that I'm not taking into account the width of the legend. The legend width can only be obtained after plotting, so if you want to reduce the column width considering even the width of the legend you must do it after plotting, and then replot.
I've prepared a fiddle that shows an example.
Hope it helps.
You can specify it in your series options :
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Don't forget to include barRenderer plugins.
For more documentations about bar chart on jqplot please take a look at : Jqplot documentation
I added below code and I got the result.
The reason behind my width was coming too large because of bar-width were not set in series Default block.
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Thanks to :AnthonyLeGovic
How can I move the padding around a dojox chart? Here is an example:
var chart1 = new dojox.charting.Chart2D("simplechart", {fill:"#FFC0C0"});
chart1.addPlot("default", {type:"Columns"});
chart1.addAxis("y", {type:"Invisible", includeZero:true, vertical: true});
chart1.addSeries("Series 1", [ 4,9,16,25,36,49,64,81,100 ]);
chart1.render();
Here is the plot generated.
http://www.flickr.com/photos/8110919#N02/5634624479/
Is there a way to remove the pink area around the chart?
Thanks.
i think that you want something like this:
var chart1 = new dojox.charting.Chart2D("chart1", {
margins: {
l: -8,
r: 0,
t: 0,
b: 0
}
});
Thanks #loops!. But the negative values throw an exception for me. I worked around that by adjusting the CSS margins in the HTML element holding the chart and settings the container's parent's overflow to hidden.