I have a bar chart that created in dc.js and hosted in jsfiddle. i want to remove x labels of this chart . after searching i find this SF question. but even i set
.xAxis().ticks(0)
it doesn't work and i can see the label.so how can i remove the xAxis labels.
Use the .tickValues() function instead, passing an empty array:
.xAxis().tickValues([]);
Complete demo here.
Related
I am using amcharts to draw bar chart. I need a chart title in my chart.
So I put graph title my code as follows:
graph.title="Beer chart";
But title is not coming.
Check my fiddle : FIDDLE
You added a title for your graph. To add title to the whole chart, use titles array (for JSON-based config), or addTitle() method for object-based. (you seem to be using the latter).
I.e.:
chart.addTitle("Beer chart");
Here's your fiddle updated as per above:
http://jsfiddle.net/baffygje/1/
while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.
I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0
It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.
You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.
Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/
I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers
I am trying to invert a chart through code in Highcharts.
I am setting the chart inverted property:
chart.inverted = true;
chart.redraw();
You can see the code I am using here:
http://jsfiddle.net/Wajood/Hz4bH/
This doesn't invert the chart. It seems to me that the redraw() function doesn't seem to care for the inverted property.
Any help/suggestions/tips in the matter will be appreciated.
Thanks.
Calling redraw() will only redraw data changes. Browsing the methods in the Highcharts API there does not appear to be a method which will change the inverted setting of an existing chart.
Your only option in this case is to destroy the existing chart and create a new one with the relevant chart.inverted setting.
I faced a similar problem and was able to solve it using chart.update.
chart.update({chart: {inverted: true}});
chart.redraw();
http://api.highcharts.com/highcharts/Chart.update