I have a map of the US with markers for stores in each state and currently when you hover over each marker, the name and address of that store shows up. I used a json file (us.json) to get the states coordinates and boundaries. The second json file (newstorelocations.json) contains information about each store and it's location which I used to display the markers. I used a tooltip for this.
What I currently have is at:
http://bl.ocks.org/binishbaig/3969ec74b485d1021034
gist:
https://gist.github.com/binishbaig/3969ec74b485d1021034
I have a third json file (newstorespend.json) that contains products and amount spent for each store. The variable StoreDescription exists in both the second and third json file. Any clue how can I make a simple vertical bar chart displaying amount and product for each store location when you hover over each marker? I am totally new to d3.js so I am guessing I would have to write a separate function creating the chart in a separate file, and then pass it into that variable d in the mouseover function but that's purely a guess. I did make a bar chart out of the data from the third file but how do I make individual bar charts for each store and show it when the mouse hovers over the corresponding store marker.
I would appreciate any help. Thanks in advance!
There's basically no difference between adding a chart to a tooltip vs doing it normally, you'll just need to grab the data and filter it so that it only applies to the data point that you're hovering over and then create/update the chart based on that data at the correct DOM element.
I've forked your gist and done just that. I just used the data that you had for Anchorage in your newstorespend.json file in your gist. Hover over the data point for the store in Anchorage to see what shows up.
You can take a look at http://bl.ocks.org/benlyall/37e757a1e6922dccb077
The onHover and offHover functions do all the work that you're probably interested in.
Note: this is only one way to do it, and possibly not even the best.
Related
I want to create a LINE chart using angular-nvd3, with each data point has label on top and displaying the data value. I was able to find the option "showValues" and it can work for the discreteBarChart, but that options doesn't seem to work for line chart.
Any help? below is a picture of what I wanted. Update: i know that for a matter of fact the "showValues" is not in the LineChart. But is there any workaround.?
I am trying to make the series name in a bar chart show up as a Data Label in spreadsheetgear 2012 but cannot find a way to make it visible in the chart explorer. Any help would be appreciated.
While the ChartExplorer allows you to modify many aspects of a chart, it does not yet support modifying data label related chart elements.
Instead, you'll need to use SpreadsheetGear API to do this, which would involve enabling ISeries.HasDataLabels and then fine-tuning how the labels are displayed with ISeries.DataLabels (see IDataLabels interface). Example:
// Assuming you have an IChart object named "chart", enable
// data labels for the first series.
chart.SeriesCollection[0].HasDataLabels = true;
I am trying to show machine states over time. Part of this is to reproduce/automate a report that used to be done by hand. It consists of coloring 2minute 'time slices' in Excel based on what the machine is doing.
(Sorry, not enough reputation to post a picture, but it is a classic heatmap where the state drives the color. Some non DC-JS fiddle: http://jsfiddle.net/ww6Lbnc5/4/)
I was able to generate most of what I want in the following jsfiddle:
http://jsfiddle.net/hwhfxz2t/14/
See fiddle for code.
The total state duration (for selected time frame) is shown in the pieChart, followed by the individual state lines and then the heatmap that people are used to. (the ZOOM and date selection buttons do not work in the fiddle but are there to select specific data ranges or zoom in if you like).
The line charts uses the original representation of the states, which consists of a time the state is entered and a duration.
In order to make the heat map work, I had to (I think) take the original data and convert it into individual minute chunks and mark them with a state. So for instance the original data specifying:
RUN state starting 14:30 for 300 seconds
becomes:
14:30=RUN, 14:31=RUN, 14:32=RUN, 14:33=RUN and 14:34=RUN
The code in lines 233-297 loops through the original data and generates a new one that does this. In cases where there is more than one state within a given minute, the last state survives.
This works okay but it seems that this code is exactly what is normally done in group().reduce(add,remove,init). But in this case I need to add multiple timeslots depending on the duration of a state.
Also, because it is now using a different crossfilter, maps do not update each other.
Here are my questions related to this:
Can I display a heatmap without supplying information for all individual
'cells'? (i.e. straddle cells based on a value, similar to rowspan in a table)
Can I add multiple values at once inside group().reduce()?
Is there an easy way to invert the yAxis so 0 is at the top?
When clicking a row in the heatmap, it selects a column and vice-versa?
I'm not sure if this should be in the crossfilter group. If so please ignore my rambling. If someone knows how to keep the charts linked by grouping better, please let me know.
--Nico
Concerning Question 3:
DC.js heatmaps currently do not support custom order functions on axis but there is a pull request that has been merged into the developing branch and should be accessible to the public soon.
You could manually edit the dc.js file to set the sorting in heatmaps to a custom function. In the latest (2.0.0-beta10) version it is the following line:
rowValues.sort(d3.ascending);
and accordingly
colValues.sort(d3.ascending);
I use jqPlot for creating a graph in my web application.
Initially, the graph is blank.
My goal is I allow users to select a specific dataset from a dropdown. Each dataset will have different maker render options derived from a lookup file that I maintain separately.
When users select a new dataset, that dataset will be drawn onto the graph with other previous selected datasets. Is it possible to achieve this effort dynamically through jqPlot APIs?
Here is what I have done:
I add new dataset to myChart.data. The data property is an an array of all datasets from the chart.
I clone a new series from myChart.series[0], extend the cloned series with my specific marker render options and add the cloned series to myChart.series.
I redraw the chart.
Apparently it doesn't work. I always get an error like at line 3059 jquery.jqplot.js
Uncaught TypeError: Cannot read property 'shadowCanvas' of undefined
Looking thru the source code, I realize that the jqPlot init function also does initializations of other members of the graph and that is why I receive the above error.
Please help.
============================================
I solved the problem by accessing the data and the options from the jqplot directly (not thru any API). To draw the graph when new data series added, I will do:
jQuery.jqplot('ptGraph', chartData, chartOpts);
chartData will contain old and new series data and chartOpts will contain old and new data series options. THe new options will have to contain customized parameters (like marker icons, etc). There is no API involved, just pure coding for now.
creating simple charts with BIRT is easy, but now I would like to bring some more life to them...
imagine a simple line chart. Let's define as a requirement, that the maximum value should be highlighted. A further requirement would be that if the user clicks on this data point, something happens.
How can I solve this?
I can imagine that I could created a second value series which consists only of the highlighted data points.
But it would be nicer if there was a JavaScript API (or even a server side java api) with which I could loop through the data points and add a highlight on the fly. Is this possible?
I think I've found a good starting point:
http://www.birt-exchange.org/org/devshare/designing-birt-reports/276-birt-chart-scripting-dynamic-markers-and-datapoint-colors/
Now I have to find a way to add on click events to certain data points...