Using dimple, how can I make the right-most data point in a line chart be connected to the previous data point by a dotted line, while the rest of the line chart still uses a solid line?
(Think a chart with a future projection at the end, or any situation where the final data point is "different" than the rest.)
I don't know dimple.js. The approach used in an Excel chart would be to plot a second data series and let the "connecting" data points overlap.
A similar approach should be possible with any tool that produces line charts.
I would suggest splitting your data to "real" data and "expectations"/"forecast" data, and create a series for each one.
The real data would contain all data points except for the right most one.
Forecast-data will contain only the two right most points.
For the real data draw the chart as usual and for the forecast data create a line chart with custom classes as shown here: Custom Classes
The line class should look like:
.dotted-line {
stroke-dasharray:"10,10";
}
and before drawing insert the custom class as the class for axisLine:
myChart.customClassList = {
axisLine: 'dotted-line'
}
More on customClasses can be found here
More on dotted lines can found here
Related
I've just draw a stacked-area-chart with D3JS.
This is my referral implementation
I also need to dynamically swap the ordering of the layers.
I think that there isn't a way to do it dynamically without redrawing (or is there any? :D )
Actually i'm trying to map the data to a new header column, but this implies the redrawing.
Let me show you an example:
Here is the TSV header ['date', 'columnA', 'columnB', 'columnC']
Every column, except of 'date', represent the % of area for that sample.
I would like to dynamically rearrange the area layers, but I'm pretty sure that I also need to parse again the data with a new header
eg: ,
['date', 'columnA', 'columnB', 'columnC']
-map to-
['date','columnB', 'columnC', 'columnA']
and then draw the result.
I'm doing it right? Thanks for your support, cheers.
This is the line that defines the array that will be passed to the stack() function:
var keys = data.columns.slice(1);
Right now, this is the array:
["Google Chrome","Internet Explorer","Firefox","Safari","Microsoft Edge","Opera","Mozilla","Other/Unknown"]
But you can sort it anyway you want. For instance, sorting by alphabetic order:
keys.sort();
Which gives us:
["Firefox","Google Chrome","Internet Explorer","Microsoft Edge","Mozilla","Opera","Other/Unknown","Safari"]
Here is the result: https://bl.ocks.org/anonymous/6a339ed0731a70bb234af150ee6b4a99
Here is another one, with a random permutation (refresh the page to see diferent orders): https://bl.ocks.org/anonymous/662f99901219b8907030ec3c84363f3a
Pay attention to this: the order in the stacked area chart is now different, but the colours don't keep the same for each browser (that is, each stacked area). That's because d3.scaleOrdinal(d3.schemeCategory10) assigns the colours in a first-come, first served basis.
Need to display line in a line-chart , with the ability to move the tiles, to see a max bitrate value line, to see labels and axis pointers on hover, grouped with a table and time Slider.Y dimension needs to display "bitrate total" or "bitrate Avg" (as defined in code). X dimension needs to display 15 min interval in scope of weeks.
I can upload my data into a table but not into the line graph. I can see points on the graph using .renderDataPoints() but no lines.
I checked the data - could not find any null/NaN values being returned, not using any old version of colors.
The code can be found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. Tried to replace my CSV with var data but nothing is being displayed at the moment in the fiddle. The code as whole is displayed in https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI
Any help would be greatly appreciated.
Here's my go-to-answer for how to put data into a jsFiddle. Basically it's easiest to stick it in an unused tag in the HTML. bl.ocks.org / blockbuilder.org is easier for this.
Here's a fork of your fiddle with the data loaded that way:
http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/
I also had to remove the spaces from the column names, because those got d3.csv confused and caused the BITRATE calculations to fail.
There was also some stray code inside the renderlet which was failing with a complaint about dim not existing.
The main reason why data was not displaying was because the input groups were not producing usable aggregated data. Your data is very close together in time, so aggregating by week would aggregate everything.
The way to debug this is to put a breakpoint or a console.log before the chart initialization and look at the results of group.all()
In this case bitrateWeekMinIntervalGroupMove and minIntervalWeekBitrateGroup were returning an array with one key/value pair. No lines can be drawn with one point. :)
It looks like you originally wanted to aggregate by 15 minute intervals, so let's get that working.
For whatever reason, there are two levels of aggregation in crossfilter, the dimension level and the group level. The dimension will have first crack at generating a key, and then the group will further refine these keys.
Your min15 function will map each time-key to the 15-minute mark before it, but it needs data that is higher than 15 minutes in resolution. So let's put these groups on the dateDimension, which hasn't already been mapped to a lower resolution:
var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...
Great, now there are 30 data points. And it draws lines.
I made the dots a bit smaller :) because at 30 pixels it was hard to see the lines.
Zooming in using the range chart reveals more of lines:
There still seem to be glitches in the reduce function (or somewhere) because the lines drop to zero when you zoom in too far, but hopefully this is enough to get you moving again.
My fork of your fiddle: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/
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.
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.
I'm trying to create a jqplot with multiple lines plotted on it, where the number of data series depends on user input.
Now I want to use two different y-axes for certain kinds of results, but the jqplot documentation only shows how to assign different y-axis to series in a static way.
Is there a dynamic solution?
you will need to change the option string when ever you need to have different y axises, But still you will need to re draw the chart as well..