Adding a slider to a High Charts Treemap - javascript

I pretty new to both Highcharts and Javascript. I would am working on a treemap and would like to incorporate a slider to filter out datapoints based on their value key.
I am trying to use the slider code from this: http://jsfiddle.net/BLKQf/
When I integrate it into my code, the slider doesn't actually show up and my chart is not showing up.
http://jsfiddle.net/56huej7j/
I think it may be because my Data is in JSON and not a list (as in the sample), but I don't know enough javascript to fix it.
EDIT:
I got it working. Working solution at:
http://jsfiddle.net/8n3hfcn8/

You've got a few problems:
Missing an ending });
Not including jQueryUI (look at the javascript dropdown in the javascript panel. The 1st referenced fiddle includes jQuery UI 1.9.2
You are not setting the data correctly for a treemap.
http://jsfiddle.net/56huej7j/1/

Related

Collapsible force-layout using darge-d3

I want to render a directed graph in d3, and provide it collapsible force layout functionality like we see in this example : https://bl.ocks.org/mbostock/1093130
However, my graph would require bigger nodes with text on it, and my JSON-data is also formatted differently. Here's a working fiddle of my webpage just so you get an idea of what I want my graph to look like(I've also provided the Json-Data I get as input in the javascript section of the fiddle; it is a big graph so you'd have to scroll a bit to see the actual rendering) : https://jsfiddle.net/ashareah/zg42Lvx6/
g.setNode and g.setEdge functions are darge-specific and I run a loop to set them in my webapp using flask. I'm using darge-d3 https://github.com/dagrejs/dagre-d3 to do the rendering mainly because I haven't found how to get this working with d3 directly with the format of data I have.
I'm unable to figure out how to make my graph collapsible as we see in the first example. I'm also open to not using darge-d3 anymore because it's depreciated, if my graph is rendered perfectly and has the collapsible force layout functionality with d3 directly. How do I make my graph collapsible?

Chart.js - loading multiple charts with draggable datapoints into a single HTML Page

We're trying to load multiple line charts into one single page.
There is a simplified instance here - JSFiddle.
Canvases and instances have different names
We have used a JQuery wrapper to isolate the instantiation code.
Issue is that an offset is generated on dragging a data point so that the drag offset changes with each added instance. Just two instances are shown in the fiddle
We notice that the dynamic iframe generated by Chart.JS looks weird (developer tools)
Any comments / tips appreciated
It turns out that a different approach worked faultlessly. It appears that the original code sample we based our approach on was flawed. Thanks very much for looking at this

Show values on each column in Chart.JS

I am working with Chart.js (http://www.chartjs.org/docs) and I am dealing with some problems here.
Is it possible to show values for each data point? It seems it is lacking that functionality or am I wrong?
I am also using the stacked bar chart (with additional line chart applied on it) so I would like to show the value for each data point for these two bar data sets (excluding the Line chart)
The app is made with Ionic 2 (Angular2) and it seems, that I don't have all of the possibilites to call different helpers provided by Chart class. I see that a lot of examples include such things.
Is it safe to use this in production, regarding the support of the project?
Thank you very much in advance!

can Ext JS do snap-to-grid for drag/drop/resize UI?

Currently planning for a time-line application. Each elements on the time line will need to be resizable and draggable with a snap-to-grid positioning similar to jQuery UI's
http://jqueryui.com/demos/draggable/#snap-to
http://jqueryui.com/demos/resizable/#snap-to-grid (the snap to 20x20 kinda thing)
Is this feature available with Ext JS? Been googling around without any results. Can anyone point me to some examples please?
You may get some inspiration from http://ext.ensible.com/deploy/dev/examples/calendar/custom-views.html
Edit
Source code on Github

ask for a lightweithg jquery based chart lib

I have to build some chart in my page,I use extjs chart now,but I found it is rather heavy...
Through the google,there some jquery based lib,but I have no idea which is better,and it seems test them one by one is not a good idea,so I ask you guys if you have any experiences?
I just care the following points:
1)support drawing chart based json
data.
2)reload chart when data refreshed.
3)easily and readable coding
4)the less thrid-part lib needed,the
better.
flot
ticks all your boxes. I have been using it, seems pretty slick to me.
Flot supports column-line combined chart, thats actually why I used it, see here and here for a more comprehensive list of functionality.
I like Flot, which does most of the things you require.
Here's a good list of charting libraries for jQuery:
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/

Categories