Plot median,lower quartile in dimplejs horizontal bar char - javascript

I have plot the simple horizontal grouped bar chart what i want is to create a point on median and lower quartile on each bar using dimpleJs tried many way still can't find how to do it?
my JSON data is:
var data = [{
"topic_id": 38,
"level": "easy",
"all_marks": [100],
"total marks": 80,
"name": "gamma",
"topic label": "sec A",
"median" : 18,
}, {
"topic_id": 38,
"level": "medium",
"all_marks": [30],
"total marks": 10,
"name": "alpha",
"topic label": "sec A",
"median" : 11,
}, {
"topic_id": 38,
"level": "difficult",
"all_marks": [40],
"total marks": 10,
"median" : 15,
"name": "delta",
"topic label": "sec A"
}, {
"topic_id": 39,
"level": "easy",
"all_marks": [100],
"total marks": 80,
"median" : 13,
"name": "gamma",
"topic label": "sec B"
}, {
"median" : 11,
"topic_id": 39,
"level": "medium",
"all_marks": [30],
"total marks": 10,
"name": "alpha",
"topic label": "sec B"
}, {
"median" : 10,
"topic_id": 39,
"level": "difficult",
"all_marks": [40],
"total marks": 10,
"name": "delta",
"topic label": "sec B"
}];

I can see median in your data but not lower quartile, if you can get that in to the data in the same format as median it will be fairly straightforward to add it to the chart. Here is an example adding median as a floating marker, you can change the series type to bubble if you would rather have dots than rectangles:
// Set up the chart as usual
var svg = dimple.newSvg("#chartContainer", 800, 600);
var c = new dimple.chart(svg, data);
var totalAxis = c.addMeasureAxis("x", "total marks");
var categoryAxis = c.addCategoryAxis("y", ["topic label", "level"]);
// Add an additional measure axis. By passing an axis object rather than a position letter to the first parameter
// we create a composite axis which draws both measures on the same physical axis.
var medianAxis = c.addMeasureAxis(totalAxis, "median");
// Add the bar series
var totalSeries = c.addSeries("level", dimple.plot.bar, [categoryAxis, totalAxis]);
// Add a separate bar series for median
var medianSeries = c.addSeries(null, dimple.plot.bar, [categoryAxis, medianAxis]);
// By setting to not be stacked on a bar series it draws floating bars which work as markers
medianSeries.stacked = false;
c.draw();
Here it is in action: https://jsfiddle.net/w9tjqq6c/

Related

change arc color and value in anychart

I am trying to create sunburst chart in d3.js. What I want is if the value is positive I should get green arc. and when the the value is negative the arc should be red. Another issue I am facing is whenever I enter negative value that arc/slice just hide. I also want to show my that slice with negative value.
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #562F34;
background: #33573D;
}
</style>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
<div id="container"></div>
<script>
file2 = [
{
"name": "KES100",
"fill": "#33573D",
"children": [
{
"name": "TEXTILE",
"id": "textileId",
"children": [
{
"continent": "textileId",
"name": "COST",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "COOT",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "AHTM",
"value": "10",
"points": "30"
}
]
},
{
"name": "OIL",
"id": "oilId",
"children": [
{
"continent": "oilId",
"name": "PSO",
"value": "20"
},
{
"continent": "oilId",
"name": "BYCO",
"value": "20"
},
{
"continent": "oilId",
"name": "MPCL",
"value": "10"
}
]
}
]
}
]
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('file2.json',
function (data) {
var color1 = [255, 0, 0];
var color2 = [0, 0, 255];
anychart.color.blend(color1, color2, 0.2);
var chart = anychart.sunburst(data, "as-tree");
chart.calculationMode("parent-independent");
chart.labels().format('{%Name}\n{%Value}');
console.log(chart.labels())
chart.tooltip().format('{%Name}:{%Value}');
chart.container("container");
chart.draw();
});
});
</script>
The "value" should always be positive as it affects the size of the node directly. You can provide negative values in the data and then preprocess it. Copy the positive/negative value to another custom field of the item data, and leave the absolute value in the "value" field. Then you can apply condition coloring by a callback function in fill() chart method. For details, check the sample based on your snippet.

How can i add click event on bars in horizontal funnel chart

How can I add click event on funnel bar in amcharts.
am4core.ready(function () {
debugger;
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.data = [{
"id": 10,
"name": "The first",
"value": 600
}, {
"id": 11,
"name": "The second",
"value": 300
}, {
"id": 12,
"name": "The third",
"value": 200
}, {
"id": 13,
"name": "The fourth",
"value": 180
}, {
"id": 14,
"name": "The fifth",
"value": 50
}, {
"id": 15,
"name": "The sixth",
"value": 20
}, {
"id": 16,
"name": "The seventh",
"value": 10
}];
});
and looking to perform click event
$(document).ready(function () {
$("#chartdiv").on("click", function () {
$("#id-133").click(function () {
console.log("clicked on ");
});
});
});
Here I am doing by Id which is wrong because of Id change dynamically.
Is there any click event in amcharts?
Get my answer by doing
am4core.ready(function () {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0;
var series = chart.series.push(new am4charts.FunnelSeries());
series.colors.step = 2;
series.dataFields.value = "value";
series.dataFields.category = "name";
series.dataFields.id = "id";
series.alignLabels = true;
series.orientation = "horizontal";
series.bottomRatio = 1;
series.data = [{
"id": 10,
"name": "The first",
"value": 600
}, {
"id": 11,
"name": "The second",
"value": 300
}, {
"id": 12,
"name": "The third",
"value": 200
}, {
"id": 13,
"name": "The fourth",
"value": 180
}, {
"id": 14,
"name": "The fifth",
"value": 50
}, {
"id": 15,
"name": "The sixth",
"value": 20
}, {
"id": 16,
"name": "The seventh",
"value": 10
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
series.slices.template.events.on("hit", function (ev) {
console.log(ev.target.dataItem.id);
console.log(ev.target.dataItem._dataContext);
});
});

d3 vertical bar chart

How can I draw chart like this?
I have data (for example):
{
"USA": {
"value": 10,
"companies": [ "Apple", "Google" ],
"color": "red"
},
"Germany": {
"value": 3,
"companies": [ "SAP" ],
"color": "green"
}
}
"value" is for the left side.
"companies" is for the right side.
"value" != "compnaies" length.
I can't figure out what kind of graph I must use.
I'll try hierarchy, but it must have only one root.
i made a small poc but i'm not sure what you want so i can't really got much further please take a look at this : https://jsfiddle.net/z9bcfdvk/
i used the dataser you provided and added one entry:
Let me know if you want more detail.
var data = [
{
country: "USA",
"value": 10,
companies: ["Apple", "Google"],
"color": "#123445"
},
{
country: "Germany",
"value":
3,
companies:
["SAP"],
"color":
"#987456"
}, {
country: "France",
"value":
1,
companies:
["RENAULT"],
"color":
"#8b9838"
}
]

Format data to be used in Highcharts series

Hi I am trying to make a stacked bar chart using Highcharts, but the way the data has to be formatted to be consumed as a a series is tripping me up.
series: [{
name: 'John',
data: [5]
}, {
name: 'ee',
data: [2]
}, {
name: 'aa',
data: [7]
},{
name: 'zz',
data: [4]
},{
name: 'Joe',
data: [3]
}]
That is how one of the examples is on their site for a stacked bar chart. I am using $http.get() to originally get data from a webservice, in JSON format like so :
{
"id": 13,
"name": "JohnSnow",
"totalScore": 5.239947894580996,
"models": [
{
"id": 0,
"name": "Grey",
"score": 75.5
},
{
"id": 1,
"name": "Black",
"score": 1.2355425046127677
},
{
"id": 2,
"name": "Purple",
"score": 24.0705126173457
},
{
"id": 3,
"name": "Teal",
"score": 28.981312850901684
},
{
"id": 4,
"name": "Yellow",
"score": 31.373482114014525
},
{
"id": 5,
"name": "Green",
"score": 22.02040979235661
},
{
"id": 6,
"name": "Red",
"score": 11.137161646416322
},
{
"id": 7,
"name": "Blue",
"score": 25.83014182677578
},
{
"id": 8,
"name": "Orange",
"score": 4.793888180490194
}
]
}
My original approach was to go through the returned data from the $http.get() call and add a JSON object to an array that I would then set series equal to but that isn't working out too well. What are some other options, or are there easier ways to get it in the format. The data has to stay in that format on the webservice, so changing is out of the question. I have a plunker I am trying to get working here.
interesting question, I normally use either angular.forEach or a library called underscore to handle data processing in angularJS. Here is the forEach version.
data = $http.get(); // suppose you have the data
result = [];
angular.forEach(data.models, function(item) {
// simple way is to take item as the original form
result.push(item);
// or do your own way
result.push({
name: item.name,
data: [item.score]
});
});
Now the result variable is the one you want now.

Custom label values for X axis in amcharts

Can I set Custom label values for X axis in amcharts js?
Type is xy.
On X axis I had labels 0, 10, 20, 30, 40, 50... Need to set 0, 1, 10, 100
You could just add the values into your data provider components, such as...
"dataProvider": [
{
"category": "0",
"column-1": 32
},
{
"category": "1"
},
{
"category": "10",
"column-1": 32
},
{
"category": "100"
},
{
"category": "1000",
"column-1": 14
}
];
To make the data on the chart start on the axis then ensure the "startOnAxis": true is within your categoryAxis section.
"categoryAxis":
{
"startOnAxis": true
}

Categories