I am using ExtJS to render charts, but my column chart is getting with the same color for all series. I need different colors for the series. Only happens with column, bar and area charts, the line chart is working fine.
My code:
Ext.Ajax.request({
method: 'get',
url: Webapp.link('chart/' + key),
success: function(response){
var resposta = Ext.JSON.decode(response.responseText);
var chart = Ext.create('Hemisphere.view.chart.Chart', {
axes: resposta.chart.axes,
series: resposta.chart.series,
store: store (The store is defined previously)
});
panel.removeAll();
panel.add(chart);
}
}
});
Anyone could help me? Thanks.
One serie code example.
You can change the color using a renderer on your series.
Ext documentation has a working example of this:
http://docs.sencha.com/ext-js/4-1/#!/example/charts/Column2.html
series: [{
type: 'column',
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
}
.
.
}]
Related
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API
I need to create a pie chart with labels indicating what each area means, but also another info overimposed over each area. If I use both data labels and a legend, they'll show the same text. How can I have both with different texts, or emulate that effect?
A mock of what I'd like to get:
Using the format or formatter config properties of the dataLabels, you can make them say whatever you want.
pie: {
dataLabels: {
enabled: true,
formatter: function(){
return 'Y Value: ' + this.y; // y value
}
},
showInLegend: true
}
Quick example.
I am creating a kendo chart that can have multiple datasets.
I am creating a chartOptions object that is only being manipulated by referencing the properties and is not manipulated through Kendo functionality. This is done by the following code:
var chartOptions = {
theme: "",
seriesDefaults: {
type: "line"
},
title: {
text: ""
},
legend: {
position: "bottom"
},
series: "",
categoryAxis: {
field: "category"
}
};
function createChart() {
$("#chart").kendoChart(
$.extend(true, {}, chartOptions)
);
}
I also have the user defining which datasets they want. The choose their datasets and create their chart. The chart is then rendered but missing its categoryAxis data.
I am setting the series data (the data comes from the server, but is available for example) in the following way:
dataSetContents.Series = {"Series":[{"name":"2009 Data","data":[{"category":"2008","value":18159},{"category":"2007","value":315},{"category":"2009","value":8}]},{"name":"2008-2010","data":[{"category":"2010","value":750},{"category":"2009","value":2980},{"category":"2008","value":4135},{"category":"2007","value":55}]}]}
chartOptions.series = dataSetContents.Series;
I figured out the reason why I was losing my categories. It has to do with the multiple series, the way to fix this by setting the categoryAxis. This can be done by passing the array of categories like this:
chartOptions.categoryAxis = { categories: [2007,2008,2009,2010] };
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.