Custom bullseye chart for Salesforce chart.js - javascript

I would like to create a layer of overlapping circles. Something like the following http://imgur.com/VAB2jsy
I guess it would be similar to a bullseye chart. I would imagine it needs to be built with chart.js and tied to Salesforce Apex Page. The idea is that it will be embedded into the account and it will populate the Contact Details (Related List) from the account depending on the roles. It will display information for 14 roles and the layers of the circles are fixed as well.
First Innermost circle has 2 roles.
2nd has 2 roles
3rd has 2 roles
4th has 3 roles
5th has 5 roles.
If there are multiple people it should display multiple people under that role within each circle and it should dynamically adjust.
I know it can be done but don't know how to go about getting this done. Can anyone help with the chart.js or js script which will help me achieve this and how it can be embedded into an apex page?

Related

Insert dynamically user comments into a chart [Highcharts]

I need to be able user insert user comments on the chart dynamically way. It means, the user will view the chart and will decide to make a comment on the chart or not.
P.S.: The user could make one or more comments anywhere on the chart.
I'm using Highcharts JS with ReactJS.
And I saw this functionality in Highcharts Stock and would like to know if it's possible to make it with Highcharts JS.

Thingspeak data visualisation/ graphs for webpage

i want to make graphs/ charts from my data, that is stored on Thingspeak (its a weather station project using arduino). Now, i want to be able to plot these data into graphs. Thingspeak itself does that, but the graph is non customizable.
What i want do do is to have some buttons and comboboxes to select for example certain time interval (days,weeks,months), be able to point on line in graph and it tels the stats for the one spot etc.
Is there any templates or web services that do that? Or tutorials on how to do that? I want to have these charts embedde to my webpages. Thank you for replies.
I suggest you look at Chart JS or D3, both good charting libraries.

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.

Interactive BIRT Pie Chart with Drill down using Data Cube

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();
}

How to make selectable states in Australia (web map)?

The following link provided is something that I am after for a web mapping project.
http://developers.arcgis.com/javascript/samples/fl_dgrid/
The following link contains the utilisation of ESRI base layer map, and what seems to be a layer polygon possibly created in Arcmap, which allows users to select individual states, which when selected displays in a table.
I am trying to achieve the similar user interaction but just for Australia; for example, users will be able to select Western Australia, Northern territory est, which would then show which state the user selected in a table and generate data/information.
So far from my understanding, it seems as though ArcGIS for server could have been used in order to save the feature polygon layer, which is then called as a service from the coding and generated onto the base layer map of ESRI.
I am wondering if anyone can help me in terms of how to get this user interaction working just for a map of Australia. Would I create the polygon layer in arcmap, make that as a service using ArcGIS for server and then call it from coding?
Also, for the actual selection of each state and showing in a table, my understanding is javascript is used?
I guess I am just trying to get a more thorough understanding so I can go on from there, in order to create something similar just for Australia. Any help will be much appreciated.
Thanks in advanced.
There are probably a few different ways to go about getting this to work depending on what data you have available to you. My answer is based off what I see in the example you posted.
Assuming you had the polygons for Australia available to you, you should be able to modify the example and have a working version pretty easily.
Grid
For the grid, it looks like they are using the dgrid plugin which unfortunately I have no experience with so you would need to look up info on that.
Map
If you are wanting to have a polygon shown for each state/territory then you would need to have a service with all the polygon objects available to you. Not sure if this is already available or if you would need to create each polygon somehow.
When the map loads you would want to load all the polygons. When a user clicks on a state you would want to create a query to select the given polygon so that it is highlighted (they are using the OBJECTID field in the example which would be unique to each polygon). When selecting the polygon in the map you would also select the row in the grid(This is also done by the ID aka OBJECTID field from the polygon).

Categories