Small HighCharts disappear - javascript

I want this highchart - http://jsfiddle.net/zPDca/ inside a popup. But if i decrease its width to lets say to 200 px, it dissapers. Any suggestions!

It looks like 251 px is the lower limit for the width.
This was probably a decision the developers made due to readability. Think about it:
This is a stock chart and it contains the "detail" view and a navigator view, you have export enabled and by default you are showing the buttons, the default selection buttons for zooming are also shown. Wouldn't this be really crowded for the user? Why not use a different kind of chart (standard highchart maybe) that shows latest data and gives user option to expand view. This would save a lot of space in the view.
Things you can try:
Remove the export buttons (you can write your own extension to still do exporting without useing the built-in buttons)
Remove the "Zoom" text
Change chart to be less "busy" overall
Having a data visualization is all about quickly seeing the data you need - not necessarily seeing all the options you may need in a tight space. If this chart is to be used for continuous monitoring you can strip it of all option settings but have it use the options set by the user in a "primary/setup" chart.

Look this example http://jsfiddle.net/zPDca/1/
It's working well.
If you take a look the reference you can see that it can be calculated by the containing element. So you just have to remove width from your chart as you can see on my example.

Okay I got the answer. Versions higher than 1.1.5 do not allow charts smaller than certain dimension. I do not know why. But I'm detouring right now by using version 1.1.5.

Related

Calculating width and height of an element to be on one screen, unknown number of elements

I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square.
I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).
Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.
Any JS libraries that could do this? If none, what function should I write?
Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables
You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout. With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport (100vh and 100vw), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).

c3js : Custom region tooltips, hover effects, etc

I've been creating a metrics module (using timeseries) with c3js. I'm now trying to plot out events over my metrics data, which are date-spans (startDate to endDate). Using c3js' regions seemed to be a good choice for it, it only took a little tinkering to make them short and appear above of all my graphed data.
Problem is, the actual SVG Group called g.c3-regions is automatically displayed behind the graphed data. Makes sense, there hasn't been any real need allow any user interaction with regions. I need it in the forefront, so I can bind hover and click functions to each event.
I tried doing this with jQuery: $('.c3-regions').insertAfter('.c3-chart'), which simply places it in front. Works fine - that is, until my c3js instance re-renders. Then it spits out an error that it's having trouble re-rendering the regions (since they obviously moved)
I've also tried cloning it and putting that in front, but it doesn't seem to copy over the SVG information.
Any help would be truly appreciated, can provide any code samples on request.
Cheers - - Andrew
To expand on Robert Longson's comment, what you want to add is
.c3-event-rect {
pointer-events: none;
}
.c3-chart {
pointer-events: none;
}
This will allow the clicks to go through to the region layer.

C3 rendering before bootstrap kicks in

I am using c3.js, AngularJs and bootstrap to render some charts. The setup is as follows:
Bind a variable to <select> form to change between chart types
I have a $watch on the same variable which triggers the chart rendering.
Depending on variable I render multiple charts, different types depending on it's value. I have two charts per row, each one inside a col-XX-6.
Each chart group is hidden/shown using ng-show="myVariable== 'typeX'" depending on the same variable that triggers the render.
So, view and c3 render are acting on the same variable.
The first render is triggered by watch on $viewContentLoaded and everything works fine. After I change the select option, the first chart in the column renders with 100% width, disregarding bootstrap template. My theory is that c3.js renders the chart "too fast", before the view kicks in and sets the proper width. Further investigation:
Adding a $timeout on renderer fixes the problem but this is unacceptable solution
Adding a fixed width on charts works but is not acceptable, it needs to adapt to bootstrap
So far it seems that the only solution is to listen to the actual DOM change to see when the DOM actually becomes visible and only then start the render. But it seems that this technique is highly discouraged.
How do I fix this problem the proper way?
Edit 1: It seems that even if I render all the charts once and never refresh them, they still rarely but randomly oversize when shown.
Edit 2:
Plunkr: http://plnkr.co/edit/mU5m694VoDB5GtXrmPdP
Plunkr works (...) but basically, it happens to me when you'd switch from type2 to type1, the first graph would take 100% width and mess up everything. I'll see if I can find something in Plunkr that would make it break.
Edit 3: Well, perhaps not working that well afterall. I noticed charts sometimes do not render (blank page) and they only appear after I inspect element or fiddle with the screen in some way. Seems like it could be the same problem behind this. You should increase the plunker preview to simulate a wider screen.
You mention that you are having problems with initial size, but actually, there is going to be problems when browser size changes too.
We use d3.js (not c3) extensively in our project, and we found that the best option is to set viewBox attribute of svg element created by d3 to the parent element's size when browser size change event is emitted by window.
viewBox basically translates coordinate system of svg to origin and size defined by it.

Set width as percentage but render divs evenly

I am trying to write a graphing function for .Net MVC to produce a pure HTML bar graph. I want to set the width of each bar to be a percentage of the parent div so that the chart scales correctly if the user re-sizes the browser.
However, I will normally have around 300 bars in the graph so the width of each bar ends up being computed at 1.54px (for example). This does horrible things to how the browser renders the bars (in IE and chrome at least).
This uneven rendering of the bars goes away if I set a fixed width to each bar with an integer value of pixels (i.e. 2px, not 1.6px). However if I do this the the chart won't scale with the browser.
Is there a "best practice" solution to this problem? Can I get the bars to scale with the browser without allowing non-integer values for the width of the bars?
EDIT: One other point to note, my boss has a pathological mistrust of 3rd party libraries, hence writing the function from scratch.
Have you looked at http://d3js.org/ this is a library for all sorts of graphs. It takes care of calculating the spaces. Has nice effects and is easy to use with binding in javascript.
As silverfighter pointed out, there are a lot of graphing libraries for a variety of graphs. These solutions are again divided into Canvas based and HTML based. The canvas based libraries may not work on certain old browsers. Some solutions such as google charts are a little better at handling old browsers.
So, depending on the support you want to provide for old browsers, you can choose between the libraries. A simple google search gave me the below link
http://techslides.com/50-javascript-charting-and-graphics-libraries
Canvas based - d3js.org, visjs.org
https://developers.google.com/chart/
If you still fixated on writing your own code to positioning a div relatively, the "auto" value for the "margin" css tag should help.
[Edit] - Sorry misread the question and thought the problem was with the height. The width can be set after the graph data is available using javascript. Assign a class to each bar, calculate available width and then divide by your total count. So, you get the width dynamically based on the page size.

Creative ideas for display large amount of text on web page

I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less

Categories