I am trying to modify the cycling example from the react-timeseries-charts repository. I would like to add vertical lines that span across all rows (much like the cursor tracker does).
I have added the TimeMarker component to the charts array:
charts.push(
<LineChart
key={`line-${channelName}`}
axis={`${channelName}_axis`}
series={series}
columns={[channelName]}
style={style}
breakLine
interpolation={"curveStepAfter"}
/>
);
charts.push(
<TimeMarker
time={4500}
/>
);
This displays a vertical line on all plots as expected however the line doesn't span the full height of each ChartRow so visually looks disjointed (see image).
I have tried playing around with each of the props on TimeMarker but can't find any that alter the line height and can't find anything in the docs either.
Any help would be much appreciated.
Cheers,
P
edit: image upload doesn't seem to work, hopefully it's clear what I mean. There's about 10px of whitespace between each chart row where I would like the line to continue to produce a single joined up vertical line across all rows.
Related
I'm new with Rechart and I'm wondering if it's possible to remove the reference lines from it.
An image of the Chart with one of the lines rounded to mark what I mean:
Thanks!
You need to remove <CartesianGrid /> component from the Chart to get rid from it.
You can also adjust it if you want, here are the options.
See examples:
with CartesianGrid
without CartesianGrid
I'm working with highcharts and have come across an issue. I have a column chart bar graph. I have been fiddling with the colors, and even looked into the high charts pattern fill information mentioned here http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill , but have not been able to achieve what I am looking for. I am trying to make the color of a single bar a striped black and white color. A color like this would do http://thumb1.shutterstock.com/display_pic_with_logo/924836/169423604/stock-photo-seamless-black-white-diagonal-stripe-169423604.jpg
but the bars should be a bit thicker, and they should be tilted the same way. I would like this color to affect just one bar, and not the rest. Is there a way to do this? Both in regards to actually making a pattern fill of this kind as well as making it affect just one bar?
if I understood correctly you need change picture on columns with diagonal stripe
this js fiddle demo from official page but I change column settings:
color: {
pattern: 'http://images2.layoutsparks.com/1/192908/black-white-diagonal-stripes.jpg',
width: 24,
height: 24,
****
}
what this jsfiddle
I need to drag and drop cells from one table to another table where i am using it to develop foreign key mapping dynamically for the SQL table
Where the table also can be dragged as well inside the window, the mapping and drawing line between two tables are working perfectly
But when i bring the tables close to each other and when i move the tables further after the intersection of the tables the line is not drawing between the tables, i got where the issue is from but i cant figure out, how to draw the lines between the tables while intersection
So the issue is something like lines drawing from left to right but not right to left it is taking as intersection
Example: http://jsfiddle.net/mohamedmusthafac/2ecsjomz/embedded/result/
Here is the minimal example fiddle
Example : http://jsfiddle.net/mohamedmusthafac/2ecsjomz/4/
If you drag left drag box across the right drag box then line will not draw
This is just a demo, you can drag the primary key from table 1 and drop it in Table 2 works perfectly, But same as reverse will not draw the lines from table 2 to table 1 and also if you drag the table intersect with the table 2 the lines will not draw
For better understanding:
It is drawing perfectly
But when we bring the table near to another table line is not drawing
The problem was very simple to debug in the end. Your problem starts here:
svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);
Once the boxes start overlapping, svgwidth becomes negative. An SVG with a negative width is an error and the SVG will not be rendered.
You are either going to have to prevent the boxes from overlapping, or change the code to allow for 'right' being to the left of 'left'.
I am trying to customize the grid lines for morris.js to have a dashed style similiar to the revenue graph in http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit/attachments/107093, Is this even possible? It seems that the documentation is not very complete, gridLineColor is not listed as an option yet it does change the color when I add it to my graph. Morris.js seemed to be highly recommended but I cant seem to adjust simple things like this.
I would also like to have each grid line the same weight and not have the center line emphasized while the others lighter. I cant seem to find anything in the documentation for that either.
Thanks for any help!
There doesn't seem to be an option yet for this in morris.js but I was able to edit the uncompressed morris.js file to add an option for dashed grid lines. Simply add .attr('stroke-dasharray', this.options.gridDashed) to the end of line 508. You can then add the option gridDashed: '--' to the graphs you would like dashed grid lines on!
Here is the line that needed changing in Graeme's answer:
Grid.prototype.drawGridLine = function(path) {
return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth).attr('stroke-dasharray', this.options.gridDashed);
};
I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.
Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.
I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.
Any suggestions on how to get around this will be much appreciated.
This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under
this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');
add
this._elem.css({width: 300});
That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find
td1.css({textAlign: 'center', paddingTop: rs});
change that to
td1.css({width: 16, textAlign: 'center', paddingTop: rs});
and you should be all set.
Another method:
Just add these lines:
if (this.width) {
ss['width'] = this.width;
}
They allow you to set an arbitrary width in each different graph
You might also want to add these lines in jquery.jqplot.js (i.e if rendering bars)
Search for "createElement('table')" as described by mike
Worked for me