How could I display more than 1 gauge chart in a html page. But each limit of gauge chart is different.
Example
(Max value) New York max is 1000, Boston max is 1200, Miami max is 1333
(Red region) New York redFrom is 0, redTo is 450,
Boston redFrom is 0, redTo is 600,
Miami redFrom is 0, redTo is 500
How could I modify this code or some useful method?
library(googleVis)
Gauge <- gvisGauge(CityPopularity,
options=list(min=0,
max=800, greenFrom=500,
greenTo=800, yellowFrom=300, yellowTo=500,
redFrom=0,
redTo=300, width=400, height=300))
plot(Gauge)
Image
Related
I'm using jqplot for represent several parameters in series across the time. So I have one Xaxis represent the time and several Yaxes(yaxis, y2axis, y3axis, y4axis, etc.). Each parameter is in different units(temperature, voltage, current, pressure, etc.), so all the Yaxes set to auto for min and max because I dont know what values will come from the server. I'm using ajax request to fill the data and next for real time updating the series with new points.
So now I want for the user to be able to set manual min and max for any Y-axe. So I set by this way:
var axis_name="y2axis";
console.log(plot.axes[axis_name].max);
var new_max=prompt("Please enter max value?");
console.log(new_max);
var plotOptionsEval = "plotOptions = { axes: { "+axis_name+": { max: \""+new_max+"\" } } };";
eval(plotOptionsEval);
console.log(plotOptions);
plot.replot(plotOptions);
console.log(plot.axes[axis_name].max);
So , when I set new max for the first axis(yaxis) everythins is fine.
But when I try to set the max parameter of any other axis - y4axis for example something gone wrong and that max value has a some different value from this the user is entered.
This is a debug from console.log output
50
12
axes: y4axis: {max: "12"}
350
Any ideas?
So I have found a solution if someone asking the same.
The trick is you need to set min and max parameters for all Yaxis in your plot. So I have prepared the min/max axes object with its original values:
var plotOptions = {
axes: {
yaxis: {min: 11.568, max: 11.582}
y2axis: {min: 11.688, max: 11.702}
y3axis: {min: 6.390000000000001, max: 6.53}
y4axis: {min: -300, max: 50}
}
}
Next set the desired Yaxis min/max parameter in the plotOptions object:
var new_max=prompt("Please enter max value?");
plotOptions.axes.y2axis.max=parseFloat(new_max);
and finally replot it:
plot.replot(plotOptions);
I have two data, one with time dependent and one not.
The data which is time dependent would be like below.
year, name , value
2001, "AAAAAAA", 200
2002, "AAAAAAA", 300
2003, "AAAAAAA", 400
2001, "BBBBBBB", 150
2002, "BBBBBBB", 250
2000, "CCCCCCC", 500
2001, "CCCCCCC", 600
2002, "CCCCCCC", 550
2001, "DDDDDDD", 100
2002, "DDDDDDD", 300
On the other hand, I have data independent to time which describes property of names.
name , type
"AAAAAAAA", "red"
"BBBBBBBB", "blue"
"CCCCCCCC", "green"
"DDDDDDDD", "red"
One way to handle data would be to hold data as following.
year, name , value, type
2001, "AAAAAAA", 200 , "red"
2002, "AAAAAAA", 300 , "red"
2003, "AAAAAAA", 400 , "red"
2001, "BBBBBBB", 150 , "blue"
2002, "BBBBBBB", 250 , "blue"
2000, "CCCCCCC", 500 , "green"
2001, "CCCCCCC", 600 , "green"
2002, "CCCCCCC", 550 , "green"
2001, "DDDDDDD", 100 , "red"
2002, "DDDDDDD", 300 , "red"
If you want to handle data on crossfilter, is the above data format the best way to handle it? Or could you handle it separately which is more data efficient?
Related to the data format, how could I make chart with type in the X-axis and average of the names value's average in the Y-axis.
Just using type as a dimension and calculating average would end up in averaging all result at once. I assume it would be normal to calculate average first with names then average again afterward.
Regarding the average-of-averages, I'd suggest something like this (untested).
Basically, keep a running sum and count for each name, and then when you need the average-of-averages, calculate all the averages and sum them, and divide by the number of names.
group.reduce(function(p, v) { // add
p.sum[v.name] = (p.sum[v.name] || 0) + v.value;
p.count[v.name] = (p.count[v.name] || 0) + 1;
return p;
}, function(p, v) { // remove
p.sum[v.name] -= v.value;
p.count[v.name]--;
return p;
} function() { // init
return {sum: {}, count: {}};
});
chart.valueAccessor(function(kv) {
var names = Object.keys(kv.value.sum),
sumavg = 0;
names.forEach(function(name) {
sumavg += kv.value.sum[name] / kv.value.count[name];
});
return sumavg / names.length;
});
I created a simple pie chart with around 10 items (using C3.js and D3.js). Now, in a second visualization (a table) I want to know the colors of each of the items, to also represent them in the table.
Is it possible to query the chart to receive the item's name and color?
I know I can manually hardcode colors for items and just use the same colors. However, this is not applicable in my case, as the items in the pie chart vary greatly (and I don't know them yet, as it is dependent on the user), hence my question.
Quick look at the source code reveals that you are correct, it's a category10().
Further it retrieves them by a key of "data id", which appears to be the first "column" in it's data input format:
columns: [
['data1', 30, 200, 100, 400, 150, 250], //<-- data1 is id
['data2', 130, 340, 200, 500, 250, 350]
]
You can inspect which are used by:
> chart.internal.color('data1')
"#1f77b4"
> chart.internal.color('data2')
"#ff7f0e"
I'm using JQPLOT to create graphs. But I have a lot of data for the x-axis. Now, i need to limit the number of ticks. I'm using numberTicks for this but doesn't work.
xaxis: {
numberTicks:15,
max: x_limits.max,
min: x_limits.min,
renderer:$.jqplot.CategoryAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%#m/%#d/%Y'}
},
I'm using CategoryAxisRenderer. When i use DateAxisRenderer, it works. -.-
EDIT (wrong answer) It doesn't work because it takes account of your minimal and maximal xaxis values. Try to remove them to take into account the "numberTicks" options (or just specify one of them but I'm not sure it will be correct)
EDIT2 : You have to remove the renderer and rendererOptions from the xaxis part :
xaxis:{
//renderer:$.jqplot.CategoryAxisRenderer,
//rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
max: 40,
min: 1,
numberTicks: 5,
}
Please see a working example here with 5 ticks.
I am struggeling with Magento custom options.
In Magento you can add custom options at a Simple product. With this option an attribute like "color" can be added. Before the customer want to add the product to his cart, he first select the custom option "color". The price can change at every color.
But the options are very individual. I want the options are dependent on each other.
Something like this:
lenght = 100cm -> wood type: 1 = 120 euro total-> color: green = 140 euro total
-> color: grey = 150 euro total
wood type: 2 = 130 euro total-> color: green = 150 euro total
-> color: grey = 160 euro total
lengt = 120cm -> wood type 1: = 130 euro total-> color: green = 160 euro total
-> color: grey = 170 euro total
wood type 2: = 140 euro total-> color: green = 180 euro total
-> color: grey = 190 euro total
A store that I know that use it is:
http://www.zelfbouwmeubels.nl/tafels/eettafel/
And then select "SAMENSTELLEN".
Do i need an plugin for it or is there an default functionality in Magento.
Consider using a configurable product instead of a simple product, and download a module that will use the selected simple product's pricing. Then you can individually manage each length/wood-type/colour option as an individual SKU and charge different prices for each.
Configurable products:
http://www.magentocommerce.com/knowledge-base/entry/tutorial-creating-a-configurable-product
Module to do what you want:
http://www.magentocommerce.com/magento-connect/Matt+Dean/extension/596/simple-configurable-products