Interactive BIRT Pie Chart with Drill down using Data Cube - javascript

I have 3 levels categories in which many items are divided.
Like in level 1 i have a pie chart.. if i click on any slice of that chart it should go to level 2 of that particular slice category and then again to the third level.
Everything should happen on same pie chart.
eg.. I have a pie chart which shows number of animals in 2 categories.. i.e. mammals and birds. If i click on mammals it should change pie chart to show number of mammals in herbivorous and carnivorous category.
I my real scenario i made a data set which has all the data through a query.
Then i made a data cube having 3 dimensions and a measuring count.
I displayed the 1st level on pie chart but i am unable to move to next level. New to BIRT i am.
And I don't need to jump from one report to other using hyperlinks to other report.. Everything is happening in same report.
I am using:
Actuate BIRT Designer Professional
Version: 4.4.0

This can be achieved by using a drill-through hyperlink. A drill-through does not necessarily jump to another report: it is definitely possible to drill to the same report, and set a report parameter controlling the dimension level.
A straight solution is to design three charts (one per level) based on the same datacube, and make use of a report parameter to keep only the chart of the current level. This allows to optimize chart views for each level: change the title, legends, chart type, font size etc.
There are a couple of ways to disable / enable a chart from a report parameter, the most efficient is to drop it by script in beforeFactory such below. Visit this topic
var design=reportContext.getDesignHandle();
if (params["level"].value!="1"){
design.findElement("chartLevel1").drop();
}
if (params["level"].value!="2"){
design.findElement("chartLevel2").drop();
}
if (params["level"].value!="3"){
design.findElement("chartLevel3").drop();
}

Related

Best way of manipulating data in d3/Canvas JS?

I am working in visualization dashboard, I am facing few problems
I am quite confused with what to choose among d3js and canvasjs. Though d3js has rich functionality in terms of good visuals I prefer canvas because its easy to create charts, if you still have any ideas for me to proceed further in choose among these(d3js & canvasjs) please help it.
Purpose :
I want to create a interactive dashboard with lot of cross filters over the visuals any suggestion ?
The mode of data call from API; should I get the data completely from the server and work on the data in the java script or should I get data for each and every chart separately.
If I get the whole joined data from database the data size is too huge (more than 2 MB) for a dashboard and if i get a precise data for the specific chart its less. An example might help for better understanding.
Consider I have data for sales view which contains multiple columns joined from different table and my dashboard has 4 charts
chart 1: Bar chart for sales by item group
chart 2: Pie chart for sales by sales person
chart 3: Line Graph showing the sales by hours (week days): trend of the sales at the shop
chart 4: Total Sales, Total Orders KPI
Data Collection : I can get data for each and every charts separately by REST API which will only contain data for that chart (or) I can get the data as a whole from the JOIN of the tables which will be huge (MORE than 2 MB, it grows as the sales grows).
Interactivity : As i click on the chart 1 (bar chart's) any item group the rest of the charts should get filtered according to the selected item group: (writing a filter js code will help, am curious about the preferred way)
Which method i should prefer for data obtaining and cross filtering.
Answering the above question will invoke more doubts
Thanks
CanvasJs is more of creating charts using canvas element of HTML5 and D3 uses svg. Which gives advantage to canvasJs over D3 as CanvasJs have quick response time, thus rendering is fast in CanvasJs. If you want quick response time and not much calculation/filters on data then you can go with CanvasJs.
D3 is more of filtering charts based on filters, which can be used in your case. And though you'll be dealing with sales data. You will be needing filters, so that once you apply filter to one chart the changes related to that filter should reflect to other charts. D3 uses crossfilters and has ability to filter out all the related information and render the other charts accordingly.
Canvas and D3 both support Arrays, Json and CSV formats.

Displaying different graphs in the same stock panel (amCharts)

I'm using amCharts to display graphs and I need to display 2 graphs from different data providers it the same Stock Chart panel.
In amCharts tutorials, they displayed the graphs from the same data provider (one dataset), so when I tried adding another dataset, it didn't work! It only displayed the first graph.
Could anyone give me a tip or something?
JavaScript Stock Chart will display a copy of a graph for each selected or compared data set.
So if you need to display a graph for several data sets, make sure the following two conditions are met:
compared is set to true for the second data set.
comparable to true for the graph.
compareField is set for the graph.
Here's a working example:
http://codepen.io/team/amcharts/pen/1706af51ff69cf22b2d448cfb604b55b

Javascript Charting - Stacked Bar-Chart + Tree Chart combined

So I'm working on a project that requires me to graph the cummulative amount of days a certain record has spent in each of it's life cycle stages. The tricky part is, the relationship between parent and child records cause the data to branch out like a tree as one moves through the process. I'm trying to figure out the best chart type to visualize this data. Currently I have the parent and child records in separate charts, both stacked bar charts. Is there a way to make a chart that works like a stacked bar chart for it's pieces but grows like a tree as a whole? See diagrams below. In a sense, it is a an overly complicated Gantt Chart where each record is a sub-project.
Current
Desired

How to overlie bar charts in nvd3.js?

I want to display one bar chart on top of another one.
Reason:
I am showing a base consumption on a certain day, but also the overall
value.
I don't want a bar chart next to another but on top of one.
So far, I draw a line with pure d3.js on top of the bar, which brings a lot complexity and handling edge cases on my own.
The problem: I am using a multibarchart with nvd3.js, because I sometimes display more than one range of value in my chart. So for one or more series inside this chart, I want to display another bar chart on top.
Is there a better solution for this?

Merge two or more graphs using library

I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks
I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html
I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!

Categories