I am trying to render Google Geochart chart on my page and it renders okay. The only problem with the chart is the scale (colorAxis). As far as I know, from the developers guide, user can put values and colors that should be available on the scale.
The problem is, that I can put there only number values and I would like to change the scale, so it contains four text values - "low, medium, hard, extreme".
Is there any way to change the 1-4 scale to text scale, so min and max values on the scale would be strings, not integers.
I've already tried to put strings in colorAxis.minValue and colorAxis.maxValue but then, chart just ignores that.
colorAxis.minValue and colorAxis.maxValue according to Google Charts documentation are used for:
If present, specifies a minimum value for chart color data. Color data
values of this value and lower will be rendered as the first color in
the colorAxis.colors range.
What you want to change is the legend of the chart. I tried some options, but the best thing i could manage is simply add a string before min and max values with the following option.
var options = {
legend: {
numberFormat: "test"
}
};
Jsfiddle example here.
Related
I have run into a tick label length problem with plotly. I have scoured the literature and plotly documents but cannot find anything specifically related to tick label length. I have tried to update axis 'tickwidth' and 'ticklen' to no avail. I have found hoverlabel namelength but no tick label name length.
If a tick label is very long it will squash my graphs up. I cannot control the length unless I reduce the database length of the String as it relies on user input. But I need the full length for other uses. Is there a way to truncate or limit the length of the tick label somehow?
I also have the same problem with the legend reducing the size of the pie chart. I have used hoverlabel_namelength to limit the character in the hover label box of the bar chart, but can't find how to do this for the pie chart hover label box or either the pie legend box and also for the bar graph tick labels? Any ideas? I am using python but javascript options I can try and work with too.
EDIT--
There doesn't seem to be a plotly solution but #Thomas did suggest to just loop through the label data (this was a brain fart on my end as I was imagining the thousands of entries going in that needed truncating and not the smaller grouped output of the sql query that needed truncating) so I have done so here.
labels = [(i.name[:40] + '..') if len(i.name) > 40 else i.name for i in data]
Is there a way to make the google BarChart to work like the PieChart?
The google´s PieChart sums all values you provided and give percentages. The BarChart does not do that when you work with horizontal columns, the length of the columns and the graph itself are based only on the values you provided and it does not label the horizontal axis with the percentage.
Even though I format it with 'percentage' it only adds the % simbol to the current values.
Is there any way of doing that?
use the option isStacked:'percent'
https://jsfiddle.net/kzk07ocw/
I'm trying to create a color-coded bar chart using d3. I am SO CLOSE. Here's my bl.ocks chart:
http://bl.ocks.org/sconnors37/b99070b055f125c9dff1/1cb53954be3f20e3c4492066eccd749b5cf04bbe
What I'm trying to do is assign color values based on the "teams" field in my .tsv file. So grey for Mercedes, red for Ferrari, etc. I have the teams in the var color domain and the colors in the var color range, and I'm pulling var color into the bar attrib.
For some reason though, the entire chart is just taking on the first item in the range - I changed it from grey to red just to see if that was what was going on, and it is.
So! How do I get the rest of my colors to pull through onto the bar chart? Help me, stackoverflow, you're my only hope.
In your .tsv file the last column team is not separated from the previous column by a tab, but rather through two spaces. If you look at the data passed to the d3.tsv callback I think you will find that you have one date team column instead of a date and team column.
This means that the field d.team is undefined and ordinal(undefined) will just return the first value from the range.
I have a Google line chart that contains a few years of data. Each year is a separate series. The chart legends displaying each year/series are clickable and clicking on any given 2 or more of these legends/series, displays them and their corresponding Datapoints and their annotations. In the hAxis, these Datapoints are integers ranging from 1 to aprox. 6,000,000. I also have their values displayed under annotations for each Datapoint.
Notice that when you click on a datapoint, it increases in size and gains a white border. If you unclick it, it returns to it's original form.
My question is:
Is it possible to change my code to look for the top 10 closest-to-each-other integers between 2 series based on a predefined threshhold? I know styling may not be an option but perhaps there may be a way to force a Datapoint to appear clicked.
Please allow me to illustrate it for better understanding.
You can do that using option selectionMode: 'multiple' and selecting appropriate points using setSelection() method. For example:
chart.setSelection([
{row:0, column:1},
{row:0, column:2},
{row:2, column:1},
{row:2, column:2}
]);
Of course, you will have to find out points which correspond to defined threshold. See example at jsbin.
Update: example with DataView.
I want to show a column chart that will show empty columns on days without data. I have previously done this in amCharts, but trying to switch everything over to js charting.
Here is an example:
https://skitch.com/jhanifen/gy324/jhanifen-skitch.com
Basically if I could change the color of individual columns that would also work.
Answer provided on Highcharts forum.
http://highslide.com/forum/viewtopic.php?f=9&t=12873
You can set the y value to 100, and set a secondary value to the actual value, which you can then grab in the tooltip formatter.
see this example: http://jsfiddle.net/jlbriggs/BLxUL/
Depending on which you have more of, you can either set the bar color in the plotOptions, and call the 'blank' color in the data array when needed, or the other way around (as in the example)
Thanks jlbriggs!