Javascript chart with multiple "chart areas" - javascript

Can anyone suggest a Javascript chart library that could produce such chart: Refer this Image
The emphasis here is on two separate areas: history and schedule. Each of them should have a different title and background color. Basically, it would be great if each area is configurable separately.
I tried Google Charts but did not see how to implement it in a clean way. I could create two charts with a specific layout, but I would prefer a more dynamic and correct way of doing that.

If you're looking for a charting library to accomplish this, ZingChart would do the trick. By setting "layout" in the graphset object to "x2" and creating two separate chart objects, your charts are set up side-by-side but can still be manipulated individually. I've included a demo below for reference. Run it to see the chart.
You can download the entire library for free on the site. If you have any questions, I'm on the team and happy to help! You can reach us at support#zingchart.com.
var myChart = {
"layout":"x2",
"background-color":"#eee",
"border-color":"#000",
"border-width":2,
"graphset":[
{
"type":"bar",
"background-color":"#eee",
"width":"60%",
"x":0,
"y":0,
"title":{
"text":"Chart 1",
"text-align":"left",
"font-color":"black",
"background-color":"#ddd"
},
"scale-x":{
"values":["2007","2008","2009","2010","2011","2012","2013","2014"],
"label":{
"text":"History",
"offset-x":-125,
"padding-top":10
},
"tick":{
"visible":false
},
"guide":{
"visible":false
}
},
"scale-y":{
"values":"0:12:2",
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-right":0,
"background-color":"#ddd"
},
"legend":{
"shared":true,
"visible":false
},
"series":[
{
"values":[3,5,5,5,8,6,4,3],
"background-color":"#018BD3"
},
{
"values":[null,null,null,null,3,null,null,null],
"background-color":"#F27D30"
},
{
"values":[],
"background-color":"#F2D134"
},
{
"values":[null,null,null,null,null,2,null,2],
"background-color":"#14AE13"
}
]
},
{
"type":"bar",
"background-color":"#eee",
"width":"40%",
"x":"60%",
"y":0,
"title":{
"text":"Chart 2",
"text-align":"left",
"font-color":"black",
"background-color":"#ccc"
},
"scale-x":{
"values":["2015","2016","2017"],
"tick":{
"visible":false
},
"guide":{
"visible":false
},
"label":{
"text":"Schedule",
"offset-x":-25,
"padding-top":10
}
},
"scale-y":{
"values":"0:12:2",
"line-color":"#777",
"tick":{
"visible":false
},
"item":{
"visible":false
},
"guide":{
"line-style":"solid"
}
},
"plot":{
"stacked":true
},
"plotarea":{
"margin-left":0,
"margin-right":"50%",
"background-color":"#ccc"
},
"legend":{
"shared":true
},
"series":[
{
"values":[7,1,0],
"background-color":"#018BD3"
},
{
"values":[],
"background-color":"#F27D30"
},
{
"values":[3,6,1],
"background-color":"#F2D134"
},
{
"values":[1,null,null],
"background-color":"#14AE13"
}
]
}
]
};
zingchart.render({
id : "myChart",
height : "300px",
width : "100%",
data : myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

You can try d3Js - examples library.
The possible solution is you have to define Two graph separately with using <div> tag.
Give each of them separate CSS values (for colors and your specific needs), And then define both <div> under single division.
First try to edit JsFiddle

You can try LightningChart JS library. We have an extensive dashboard API which allows you to group multiple independent and customizable charts into a layout which can then also be resized on the fly.
You should take a look at our interactive examples for this specific use case Dashboard Example.
Full disclosure: I am a developer for LightningChart, I think you may find this very useful.

Related

How to create Polls on LinkedIn

I was able to successfully create regular Text, Image and Video Shares on LinkedIn using the Shares API.
Now, I also need to create Polls on LinkedIn and I've searched so much around but can't seem to find any documentations on how to do that using the Shares API.
Does LinkedIn support creating Polls programmatically? If yes, can anyone suggest API documentations for this?
Thanks.
LinkedIn recently added a possibility to create polls with their Posts API.
The details are on a dedicated page, but the gist is this payload:
POST https://api.linkedin.com/rest/posts
{
"author": "urn:li:organization:2414183",
"commentary": "test poll",
"visibility": "PUBLIC",
"distribution": {
"feedDistribution": "MAIN_FEED",
"targetEntities": [],
"thirdPartyDistributionChannels": []
},
"lifecycleState": "PUBLISHED",
"isReshareDisabledByAuthor": false,
"content": {
"poll": {
"question" :"What is your favorite color?",
"options" : [ { "text" : "Red" }, { "text" : "Blue" }, {"text": "Yellow"}, {"text": "green"} ],
"settings" : { "duration" : "THREE_DAYS" }
}
}
}

vis.js Level sorting in Hierarchical Layout

I have a fairly simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes on each level doesn't make much sense - there are a lot of crossed edges (screenshot: Default Layout )
I am hoping to get a layout similar to that given here:
Expected Layout
My vis.js options are as follows;
{
"layout": {
"hierarchical": {
"direction": "LR",
"sortMethod": "directed",
"nodeSpacing": 200,
"treeSpacing": 400
}
},
"edges": {
"smooth": {
"type": "continuous"
}
},
"nodes": {
"physics": false
}
};
What is the best method to produce this sorted layout?
I suggest your try enabling physics, which will sort out the edges crossing, etc.
However, in hierarchical layout, it's a good idea to disable the engine once it's done the first iterations by catching the 'stabilizationIterationsDone' event as follows:
network.on("stabilizationIterationsDone", function(){
network.setOptions( { physics: false } );
});
you should remove the quotation marks. these are object's properties, not strings. it should look like this:
layout: {
hierarchical: {
direction: "LR",
sortMethod: "directed",
nodeSpacing: 200,
treeSpacing: 400
}
},
edges: {
smooth: {
type: "continuous"
}
},
nodes: {
physics: false
}

Remove x-axis and y-axis from Zingchart

I want to completely remove, not hide, the x and y-axis in my Zingcharts. I have a graph that does not need an x or y axis, and although I can hide them, they are taking up valuable space, which results in a compressed graph. Is there anyway to do this?
Sounds like you may be setting scales to visible: false, but there is still a lot of space around the chart where these items used to be.
You can eliminate this space by setting items to visible:false, setting associated line-color attributes to "none" and adding:
"plotarea":{
"margin":"0 0"
}
to your JSON. Below is an example with this spacing removed using the method described above. Click the "run code snippet" button to see the resulting chart.
var myConfig = {
"type": "line",
"scale-x":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"scale-y":{
"line-color":"none",
"item":{
"visible":false
},
"tick":{
"line-color":"none"
}
},
"plotarea":{
"margin":"0 0"
},
"series": [
{
"values":[20,40,25,50,15,45,33,34]
},
{
"values":[5,30,21,18,59,50,28,33]
},
{
"values":[30,5,18,21,33,41,29,15]
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script>
<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
If you're setting scales to visible:false, that may create some issues. Instead, adjusting the styling so they are simply not seen can prevent conflicts with other functionality. I'm on the ZingChart team, so please let me know if this answers your question or if you would like additional clarification.

NO Data Is Loaded IN Charts Using Sencha Ext Js

What I need:
when charts are loaded data is loaded in charts.
Problem I'm facing: Charts are loading but data is not loading.
I'm using sencha docs as Reference Guide.
I just want load data in charts link: http://postimg.org/image/ydbac2soh/
This is the output link that I'm getting url: http://postimg.org/image/5whlpe6wj/
This is code of line charts:
Ext.require('Ext.chart.*');
Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.define('Employee',{
extend:'Ext.data.Model',
fields:['name','yearOfExperience']
});
var store=Ext.create('Ext.data.Store',{
model:'Employee',
data:[
{ name:'sam', yearOfExperience:12 },
{ name:'ram', yearOfExperience:7 },
{ name:'kim', yearOfExperience:16 },
{ name:'john', yearOfExperience:21 },
{ name:'Mary', yearOfExperience:13 }
]
});
Ext.onReady(function () {
Ext.Msg.alert("hello","all set");
Ext.create('Ext.chart.Chart',
{
width:500,
height:300,
animate:true,
shadow:store,
store:store,
renderTo:Ext.getBody(),
legend: {
position:'right'
},
insertPadding:25,
theme:'Base:gradients',
axes:[
{
title:'years Of Experience',
type:'Numeric',
position:'left',
fields:['yearOfExperience'],
minimum:0,
maximum:30
},
{
title: 'Employee',
type: 'Category',
position:'bottom',
fields:['name']
}
],
series:[
{
type:"line",
xFields: "name",
yField :"yearOfExerince"
}
]
});
});
I have used dummy data t load in charts in ext js.
Charts are loaded perfectly but data is not loaded in charts please help where i have done wrong.
I have tried with dummy data in charts but no data is loading.
Here is the output link: http://postimg.org/image/5whlpe6wj/.
Try setting the store to:
autoLoad = true;

Declaration 2d array containing multiple objects for graph plugin?

I using igDoughnutChart for my web-page, I want a graph which shows the following hierarchy
source of attack (inside)
login abuse
dos
spyware
worm
outside attackers
spying
social attacks
The current object array looks like (also demo)
var data = [
{ "attacksource": 43, "attacktype": 60, "AT":"DoS","Label": "iNISDE" },
{ "attacksource": 29, "attacktype": 40, "AT":"login abuse","Label": "outside" }
];
I want to change this to do following:- (also shown above)
Where I have a parent and child values in 2d array so above code is to transform as
var data =
[
[{"attacksource": 43,"Label":"Inside"}],
[
{"attacktype": 13,"Label":"dos"},
{"attacktype": 13,"Label":"virus"}...
]
];
I'm not sure If I have initialized / assigned 2d using objects correctly.I appreciate If someone can look at the code, and let me know if I'm doing this right.
UPDATE
The jsbin example is just something to illustrate my requirements for the new code. For e.g "Label":"virus" is currently hardcoded, in real code (which I cannot do on jsbin) is I will get the values from DB.
VISUAL EXAMPLE
I don't think the chart you are trying to use support what you want to do. That being said there is somewhat of a hack to make it work:
$(function () {
var data = [
{ "label": "Inside", "attacks": 8 },
{ "label": "Outside", "attacks": 6 },
// Inside
{ "label": "Dos", vector: "Inside", "dummyValue": 6 },
{ "label": "siem", detect: "Dos", "detectValue": 3 },
{ "label": "user", detect: "Dos", "detectValue": 3 },
{ "label": "Worm", vector: "Inside", "dummyValue": 2 },
{ "label": "siem", detect: "Worm", "detectValue": 1 },
{ "label": "user", detect: "Worm", "detectValue": 1 },
// Outside
{ "label": "Spying", vector: "Outside", "dummyValue": 3 },
{ "label": "siem", detect: "Spying", "detectValue": 1.5 },
{ "label": "user", detect: "Spying", "detectValue": 1.5 },
{ "label": "Social", vector: "Outside", "dummyValue": 3},
{ "label": "siem", detect: "Social", "detectValue": 1.5 },
{ "label": "user", detect: "Social", "detectValue": 1.5 },
];
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
innerExtent: 6,
series:
[
{
name: "Attack Type",
labelMemberPath: "label",
valueMemberPath: "attacks",
dataSource: data,
labelsPosition: "center"
},
{
name: "Attack Vector",
labelMemberPath: "label",
valueMemberPath: "dummyValue",
dataSource: data,
labelsPosition: "center"
},
{
name: "detect Vector",
labelMemberPath: "label",
valueMemberPath: "detectValue",
dataSource: data,
labelsPosition: "center"
}
]
});
});
The order of the data and series arrays matter (not completely, just partially). Here is a jsFiddle that demonstrates this. Disclaimer: I'm not saying this will always work, as it makes the big assumption that igniteUI will always parse and display the data in the same way.
Also I'm not familiar with the library but I would bet there is a way to customize the colors of each section of the chart. If so you could just make the color a function that returns a color based on the vector property.
Some alternatives:
Highcharts
D3 - this would be my preferred approach. Browse the gallery, there a few examples that apply here.

Categories