I am trying to show data in my pieChart. Everything works great if I have multiple fields in my dataprovide (ex: EmployeeA, EmployeeB..etc). The pie will be divided into pieces and have texts shown on each pieces.
However, if my dataprovider only has one field (ex: EmployeeA). The pieChart will show the whole pie with no texts on the pieChart. I was wondering if there are any ways to show the data text inside the pieChart. Thanks a lot.
Code:
<mx:PieChart id="piechart1" x="254" y="321" width="367" height="367"
dataProvider="{getHours.lastResult}">
<mx:series>
<mx:PieSeries id="pieSeries" labelFunction="pieFunction"
explodeRadius="0.05" field="EmployeeOverTime" labelPosition="inside"/>
</mx:series>
</mx:PieChart>
//EmployeeOverTime data will show on each pie pieces if I have multiple
//employees in the department but won't show if the department has only one employee.
It looks like it was a bug in the PieSeries code. I had to monkey patch the charting code in order to get this to work. Here's an fxp file that works.
http://dl.dropbox.com/u/20054635/forever/piechart.fxp
The bug is that on line 3323 there's this code:
var rscale:Number = 1;
// find out how much we would have to scale to get to the next neighbor up
/* var RXScale:Number = Math.abs(ld.labelX - nextNeighbor.labelX)/(ld.labelWidth/2 + nextNeighbor.labelWidth/2);
Then on line 3338 it removes the label based on rscale (which is now zero because there was no nextNeighbor when there is only 1 item in the piechart)
if (rscale * Number(labelFormat.size) < insideLabelSizeLimit)
{
ld.prev.next = ld.next;
ld.next.prev = ld.prev;
removedLabels.push(ld);
Related
I would like to modify the format of my Hoverinfo in Plotly Dash:
Im working with plotly and not plotly express for some reasons.
My Code:
fig.add_trace(go.Bar(x = summe2[monat_week], y = summe2['Umsatz'], name='Umsatz', offsetgroup = 1, marker_color = 'blue'), secondary_y = False)
fig.update_traces(hovertemplate = "Umsatz:%{y:20,.2f}'+ 'X%{monat_week}: %{x}", secondary_y=False)
At the beginning when i hovered on on my chart it displayed 100K instead of 100,000
With hovertemplate = "Umsatz<:%{y:.2f} I fixed it and now im getting 100000.00 as intended but I have no clue how to set an group delimiter 3 that im getting the 100000.00 displayed
like 100,000.00. I found an older post from here but its not working from me
Link: Plotly: How to format numeric yaxis and hover text?
I Wrote the code for the formatting as in the previous link but nothing changed and maybe you could tell me if i can change the formatting to EU like 100.000,00 instead of 100,000.00
via Dash fig.update_traces(hovertemplate = 'Umsatz: %{y: 20,.2f}') should work to display it like 100,000.00 but there is no difference to
%{y: .2f} Display: 100000.00
Thank you in advance
Greetings LittleStudent
I've a Higstock lineal graph. Sometimes I need to show just one serie, other times I need two or three series to draw.
Obviously, this is an example of adding series dynamically. I put:
$(function() {
var chart = new Highcharts.StockChart({
// ...
series: []
// ...
})
chart.addSeries({name : "Value1",data : value1Data});
chart.addSeries({name : "Value2",data : value2Data});
chart.addSeries({name : "Value3",data : value3Data});
But not working, the chart needs to have at least one serie with data values in "series" node, not allowing an empty series node, like I put before.
I need to add all my series dynamically.
Anyone can help me? Thanks.
Example: http://jsfiddle.net/8aP69/1/
FYI: The graph only draws the navigation bar.
After many little test, a man that I loved him give me the solution.
I need to set initial series node like that:
series: [{ name: "Serie1", data : [null]}] // first serie has to be null
And after that, adding data point for first serie.
chart.series[0].setData(data1); // adding his data here
Im trying to change colour according to Label value in pie series.Im trying to write a inline if condition inside pie series like this
<mx:PieSeries
id="s1"
field="Value"
nameField="Label"
color="{'Value'='Other'?0xd8d8d8:colorArr}">
</mx:PieSeries>
this is my data source to pie chart.data source length is not fixed. it will change dynamically.so i cant passs colour array by hard coding particular colour to other label field.Thats why im tying to write if condition inside pie series.
This is a sample data source
var expenses:ArrayCollection = new ArrayCollection([
{Label:"Taxes", Value:1001},
{Label:"Rent", Value:1005},
{Label:"Bills", Value:1008},
{Label:"Car", Value:1009},
{Label:"Gas", Value:1020},
{Label:"Food", Value:1015},
{Label:"Other", Value:1080}
]);
This is my colour array
private var colorArr:Array = new Array(
"0x1ad6ef",
"0xee816d",
"0xfdd849",
"0xff9e5d",
"0xa4c286",
"0xca6353",
"0xd69b99",
"0xe67976",
"0xfe9ae3",
"0x6965b8",
"0xfebf9a",
"0xfeb548"
);
Is this possible guys ?
Can you try this:
color="{'Value'=='Other'?0xd8d8d8:0xffffff}"
I am currently having some issues configuring a simple graph using Google App Scripts. I seem to be unable to find the correct documentation in order to progress any further!
I have everything hooked up pulling data from a couple of spreadsheets, so that aspect is fine!
I see that there are various ways in order to customise the looks of a chart and there are tools available for example:
http://imagecharteditor.appspot.com/
http://code.google.com/apis/ajax/playground/?type=visualization
I wish to add colours to my bar charts like in this example
http://code.google.com/apis/ajax/playground/?type=visualization#image_multicolor_bar_chart
Additionally in the first link there are options to create sections using the range marker tool. I was hoping that with these tools I could copy the code across to use in my App Script Chart.
The only way I can see this working is using .setOption(string, object)
I've tried this...
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'Mark Achieved')
for(var x=0; x < ChartData.length;x++){
data.addRow(ChartData[x]);
}
data.build();
var chart = Charts.newColumnChart()
.setDataTable(data)
.setDimensions(1000, 600)
.setRange(0, 100)
.setTitle('Test Scores')
.setLegendPosition(Charts.Position.BOTTOM)
.setOption('options',{cht: 'bvs', chco: 'A2C180,3D7930', max: 100})
.build();
app.add(chart);
any help would be much appreciated!
EDIT
The options you are trying to use are applicable to the static image charts (which are now deprecated), and won't work with ColumnCharts. ColumnCharts color the bars by series, not by data point, so if you want multi-colored bars, you have to separate them out into different data series. I wrote a hack that does this (see on jsfiddle for the standard javascript version). My reading of the AppsScript implementation of the Visualization API seems to preclude using calculated columns in the DataViews, but it is possible that the documentation is incomplete here. Try creating a view like this:
// add one calculated column for each month
var dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, {
type: Charts.ColumnType.NUMBER,
label: 'Mark Achieved',
calc: function (dt, row) {
if (dt.getValue(row, 0) == 'January') ? dt.getValue(row, 1) : null;
}
}, {
type: Charts.ColumnType.NUMBER,
label: 'Mark Achieved',
calc: function (dt, row) {
if (dt.getValue(row, 0) == 'February') ? dt.getValue(row, 1) : null;
}
}/*...*/]);
It is probable that this needs to be tweaked, and possible that it won't work at all, in which case you would have to either change the query of the spreadsheet or rearrange the structure of the spreadsheet.
As far as adding the ranges to the chart, can you elaborate more on what you would like those to look like?
The data provider for the chart contains an array of facility objects. A facility object is made of several parts indicating the installation ID, facility number and facility name as shown below:
{
installationID:1000,
facilityNum:529,
facilityName:"Building1"
}
I have a chart that depicts energy consumption per building. There may be buildings shown in the chart from several different regions. I want to:
Group all the buildings in the same region together.
Include a region label only when it starts a new group.
Align the label parts in a grid such that:
All region labels are left aligned with each other.
All Building IDs are right aligned with each other.
Building names are left aligned with each other.
An example of the desired output it shown in the image below.
Using a custom label function applied to the category axis I can concatenate the values into one string. By sorting the array region ID and I can even remove (not add) the region ID unless a new group is starting. The custom label function is shown here.
private var nextCategoryIndex:int = 1;
public function facilitiesLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
{
var nextInstallationID:String = "";
var facilitiesColl:ArrayCollection = ArrayCollection(axis.dataProvider);
// if this is not the last facility to be processed get the next installation ID
if (nextCategoryIndex <= facilitiesColl.length - 1) {
nextInstallationID = facilitiesColl[nextCategoryIndex].installationID;
}
var label:String = categoryItem.facilityNum + " - " + categoryItem.facilityName;
// preppend the installation id when we start listing facilities from a different installation
if (nextInstallationID != categoryItem.installationID) {
label = categoryItem.installationID + " " + label;
}
nextCategoryIndex++;
return label;
}
However, this generates a singular string that is right aligned (as expected). What I want to achieve is the left, right, left alignment of the three properties as described above.
I attempted to concatenate the property values in the label function with an '#' as as delimiter. The thinking was that I could create custom label renderer that would split the string on this delimiter and perform the alignment as needed. However, I do not seem to be able to change the alignment of a label within a custom label renderer.
How can I align multi-part labels in a grid like fashion in a Flex Chart?
I don't know of any multi-part label capabilities in Flex, but you can create item renderers that would contain and align any number of labels (or other components) in the manner you want. Something like this should work (not complete or tested, but should point you in the right direction):
<mx:BarChart>
<mx:AxisRenderer>
<mx:labelRenderer>
<fx:Component>
<s:Group width="300">
<s:Label left="0" text="{data.leftvalue}" />
<s:Label horizontalCenter="0" text="{data.centervalue}" />
<s:Label left="right" text="{data.rightvalue}" />
</s:Group>
</fx:Component>
</mx:labelRenderer>
</mx:AxisRenderer>
</mx:BarChart>