How to create a chart like this in the browser? - javascript

I have a requirement to create a dynamic chart like this in the browser
Users should be able the drag and drop items onto the canvas and connect items together. I'd like to subscribe to events like dropped, connected items, etc. I am not sure what this type of chart is therefore I cannot research to see if there are any ready made JS libraries that do this. Do you know what kind of chart this is? What are some ready made libraries that make working with these charts easier?

You could probably configure an org chart from google charts to match your needs
https://developers.google.com/chart/interactive/docs/gallery/orgchart

Related

Gantt Chart Zoom in function is possible in Splunk?

Hello I have a question
I made a gantt chart using custom viz in splunk like this here.
https://splunkbase.splunk.com/app/1741/
It's app is very nice so many data visualization I think.
But How can I using zoom in/out function in this apps.
Need modified apps add to zoom in/out function?
How can I do this?
Thanks.
You would need to contact the developer to modify the app to allow zooming in and out. Or ad the source is available, add that function yourself. It doesn't look like that feature is supported currently
In general, you would probably like to decrease the time selected in order to zoom in to a particular timeframe

Is there a way to create a bubble chart with Chartist.js?

I'm searching for a chart tool to integrate into my app and I really liked the Chartist.js but I couldn't found any resources showing how to create bubble charts like this one in D3.
My goal is to create a non-overlapping bubble chart with images.
I would like to know if there is a way to achieve this natively or with a plugin.

drawing custom line chart and column chart

I need to make line charts and column charts for cricket run rate, wickets etc. and due to some extra requirement I am unable to use the libraries available on internet like google charts, highchart etc.
Some of the requirements are:
show more than 1 circle on line/column chart if more than 1 wickets falls in an over, something like the image below
different color of each bar
I have searched on google but couldnt find any ready to use libraries like this
and before I decide to draw custom charts I wanted to confirm if there is any library available where I can do these custom changes and if not then I need suggestion if I can draw them in HTML5 or what do you think would be the best approach.
It sound like you want to take a look at Chart.js. I've used it on several occasions, and it's a good tool for making charts with HTML5 and JavaScript. It gives you a wide variety of different charts to choose from without having to custom code a whole bunch of stuff. And they look nice as well.
The examples in the documentation are very descriptive, and the default example includes a bar-chart that has alternating colors, matching that of your example pictures.

Link different charts together using Javascript

I'm searching for a JavaScript library through which i can create charts that link to other charts or embed them. For example, let's say we have a pie chart, if someone clicks on a pie's slice, another different chart appears.
I'm using the Google Charts API and jqPlot at the moment, but so far I haven't found a way to add links or js functions when someone is clicking on a chart's element. Any help for any library will be appreciated.
Thank you.
They all allow event handling
Here is one
http://g.raphaeljs.com/piechart2.html

Editable javascript chart - interactively resize bars or pie sections

I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.

Categories