I am using sparklines charts from omnipotent.net to display statistical information. The problem is that the lowest value in a data series, is always shown on the charts as if it's zero.
For instance, if I have a bar chart with 3 bars, and they have the values 4, 2 and 5, the lowest value (2) would look like it's zero on the bar chart (look at the picture to see what I mean).
I know that it's possible to set the "chartRangeMin" option in order to avoid the problem, but I am not using javascript to make the chart, but rather HTML.
Here is my code:
<div class='sparkline' data-type='bar' data-bar-color='#338ce8' data-bar-width='42' data-height='22'>1.37, 1.55, 1.66</div><ul class='list-inline text-muted axis'><li>2007</li><li>2008</li><li>2009</li></ul>
The question if, how do I use Javascript to set the "chartRangeMin" to another value than zero?
From the jQuery Sparklines documentation, on Line Graphs you can set the chartRangeMinX. This will allow you to set a minimum value for the X axis.
http://omnipotent.net/jquery.sparkline/#syntax
Related
How do you bring segments in morris.js bar chart close to each other? Below, the left one is what morris.js offers by default, but I would like to have the one on the right where segments are close to each other. The documentation doesn't specify such option. Do you know how I can achieve this?
According to the source of Morris.js, you can use the option barGap. Its default value is 3, you can try with a lower value. Also you can use the option barSizeRatio (default value: 0.75) in order to adjust width between 2 rows of data.
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I have some bar charts that leverage crossfilter to allow a user to dynamically filter the data set. When a user selects some portion of the data set, then the other bar charts show fewer records, as part of that data is getting filtered out.
I'd also like to have a stacked bar chart that shows the percent of all records that have been selected, vs. the percent of original records. So for example, pre-brush selection, the stacked bar chart would have just one rectangle at 100%. Then, after selecting some of the data, it could show one bar with 60% and another bar with 40%.
Is this possible? How would I go about implementing this type of solution either via d3.js + crossfilter, or dc.js?
Define a dimension dim that you don't filter on, then dim.all().length / crossfilter.size().
If you are using the latest alpha of crossfilter2, you can just use crossfilter.all().length / crossfilter.size() without needing to define an additional dimension.
I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor
I need to draw a graph to display engine status.That is i will be having time like 1-2,2-3,3-4 along axis and by using bar graph i need to display whether engine was on or off at these time.
That is from 1-2 if it is off it will how black and 2-4 if it is on it will show blue color and again if the status is changed it should show black from blue.Right now i have customised jquery high charts for displaying one bar,by removing some parameters.
I need to know how i implment this here or is it possible in this graph?
You can do this with a column range chart, with minimal fudging.
The main issue is making sure you set your data points correctly, and to set grouping:false in the plotOptions. The x value needs to be specified for each data as well, or else they will all be given a separate x value
Example:
http://jsfiddle.net/jlbriggs/o9ck2zLn/
This can easily be adapted to a time axis by supplying the timestamps as the y values.