Anychart: how to combine Jump line and multiseries column chart? - anychart

I'm trying to combine a jump line with a multiseries column chart. Is it possible to create a jump line specifically for each column of the multiseries column chart? For now the only thing that i could obtain is a jump line for each group of the dataset, here's an example:
anychart.onDocumentReady(function () {
var data = [
["January", 12000, 10000, 8100],
["February", 15000, 12000, 8200],
["March", 16000, 18000, 8300],
];
var dataSet = anychart.data.set(data);
var mapping1 = dataSet.mapAs({x: 0, value: 1});
var mapping2 = dataSet.mapAs({x: 0, value: 2});
var jump1 = dataSet.mapAs({x: 0, value: 3});
// create a chart
var chart = anychart.column();
// create the series and set the data
var series1 = chart.column(mapping1);
var series2 = chart.column(mapping2);
var series3 = chart.jumpLine(jump1);
series3.stroke("3 #FFFF00");
chart.container("container");
chart.draw();
});

If I got your idea correctly, then you can create an additional xScale and xAxis. Then bind the jump series to that additional scale. Here is the live sample based on your code.

If someone needs this, thanks to #AnyChart Support 's answer here's the code for combining this two chart.
anychart.onDocumentReady(function () {
var data = [
["January", 12000, 10000],
["February", 15000, 12000],
["March", 16000, 18000],
];
var jumpData = [
['January_1', 1000],
['January_2', 3000],
['February_1', 5000],
['February_2', 6000],
['March_1', 5000],
['March_2', 7500],
];
var dataSet = anychart.data.set(data);
var jumpDataSet = anychart.data.set(jumpData);
var mapping1 = dataSet.mapAs({x: 0, value: 1});
var mapping2 = dataSet.mapAs({x: 0, value: 2});
var jump1 = jumpDataSet.mapAs({x: 0, value: 1});
// create a chart
var chart = anychart.column();
chart.barGroupsPadding(1);
// Set the padding between bars or columns.
chart.barsPadding(1);
// create the series and set the data
var series1 = chart.column(mapping1);
var series2 = chart.column(mapping2);
var additionalXscale = anychart.scales.ordinal();
chart.xAxis(1).scale(additionalXscale).enabled(false);
var series3 = chart.jumpLine(jump1);
series3.pointWidth('60%');
series3.xScale(additionalXscale);
series3.stroke("5 #00FF00");
series3.name = "AAA"
chart.container("container");
chart.draw();
});

Related

How to iterate over an array and constructing an object from the results of a PostgreSQL query

Here's my problem:
var ps = ["P1", "P2"];
var hs = ["H1", "H2"];
var jOut = {};
hs.forEach(async (h) => {
var t = `t_${h}`;
var query = {
text: `SELECT pName, pPrice FROM ${t} WHERE pName = ANY($1)`,
values: [ps],
rowMode: "array"
};
var qres = await client.query(query);
jOut[t] = qres.rows;
});
console.log(jOut);
I want the output to look something like this:
{
t_H1: [ [pName: "P1", pPrice: 0.5], [pName: "P2", pPrice: 1.2] ],
t_H2: [ [pName: "P1", pPrice: 0.6], [pName: "P2", pPrice: 1.0] ]
}
But instead my output looks like this:
{}
forEach loop doesn't wait for promises until they are resolved, that's why
console.log(jOut);
is immediately executed before all/any of your promises are resolved.
Instead use for..of loop
for(const h of hs) {
var t = `t_${h}`;
var query = {
text: `SELECT pName, pPrice FROM ${t} WHERE pName = ANY($1)`,
values: [ps],
rowMode: "array"
};
var qres = await client.query(query);
jOut[t] = qres.rows;
}
console.log(jOut);

Get count of values in json data and create variable based on those for c3 table

I am trying to create a dynamic donut chart as I don’t know how many variables will be coming in but the dataset will be in the 10,000's with between 1 and 20 variables.
I have got my data into an array as below.
How do I create a var for each unique element in the array and its count i.e var 1 = [sys1, 94] or similer so they can be used in the columns and colours config
Original data
res.data[{system:'sys1'},
{system:'sys1'},
{system:'sys2'},
{system:'sys1'},
{system:'sys3'},
{system:'sys3'}]
Getting keys
var array_elements = []
angular.forEach(res.data, function(value, key){
if (array_elements.indexOf(value.system) === -1){
array_elements.push(value.system)
}
})
array_elements = ["sys1", "sys2", "sys3"];
config
var donutData = {
type : 'donut',
colors: {
Cats: $.pfPaletteColors.blue,
Hamsters: $.pfPaletteColors.green,
Fish: $.pfPaletteColors.orange,
Dogs: $.pfPaletteColors.red
},
columns: [
['Dogs', 2],
['Cats', 2],
['Fish', 3],
['Hamsters', 1]
],
You can do something like this:
var data = [{
system: 'sys1'
}, {
system: 'sys1'
}, {
system: 'sys2'
}, {
system: 'sys1'
}, {
system: 'sys3'
}, {
system: 'sys3'
}];
var tmp = {};
data.forEach(function(x) {
tmp[x.system] = (tmp[x.system] || 0) + 1;
});
var keys = Object.keys(graphData);
var finalData = [];
for(var i = 0; i < keys.length; i++) {
var x = [];
x.push(keys[i]);
x.push(graphData[keys[i]]);
finalData.push(x);
}
console.log(finalData);
Fiddle example

How to integrate two scales for single Y-axis

anychart.theme(anychart.themes.darkEarth);
anychart.onDocumentReady(function () {
var dataSet = anychart.data.set([
['P1', 969.5, 2040, 1200, 1600,2000],
['P2', 779.1, 1794, 1124, 1724,4000],
['P3', 739.2, 2026, 1006, 1806,5000]
]);
var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});
var seriesData_2 = dataSet.mapAs({x: [0], value: [2]});
var seriesData_3 = dataSet.mapAs({x: [0], value: [3]});
var seriesData_4 = dataSet.mapAs({x: [0], value: [4]});
var seriesData_5 = dataSet.mapAs({x: [0], value: [5]});
chart = anychart.column();
chart.animation(true);
chart.container('container');
chart.title('Combination of Stacked Column and Line Chart (Dual Y-Axis)');
var scale = anychart.scales.linear();
scale.stackMode('value');
chart.column(seriesData_2);
var lineSeries = chart.area(seriesData_1);
lineSeries.yScale(scale);
var lineSeries2 = chart.area(seriesData_5);
lineSeries2.yScale(scale);
chart.column(seriesData_3);
chart.column(seriesData_4);
chart.draw();
});
I am trying to add a Series Column chart with Stacked Area.
But the Series Column and Stacked Area should have different Scales to make them separate from Stacking.
How to integrate these two Scales into the Yaxis.
Is there any to do that? Please do suggest!!
I think you can use additional axis from the left or from the right of the chart.
Left axis example:
var secondYAxis = chart.yAxis(1).scale(scale);
http://jsfiddle.net/cgquc1pz/1/
Right axis example:
var secondYAxis = chart.yAxis(1).scale(scale);
secondYAxis.orientation('right');
http://jsfiddle.net/cgquc1pz/2/

Angular Dynamic Chart Generate

I am using Chart Js and Angular Chart Directive. I need bar chart dynamically in my ng-repeat directive.
https://jtblin.github.io/angular-chart.js/
According to their documentation i have to give two arrays
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];
I have made two functions in my controller for generating graph label and data array.
$scope.makeChartLbl=function(data)
{
console.log(data);
var arr=[];
for(var d in data)
{
arr.push(d.name)
}
// console.log(arr);
return arr;
}
$scope.makeChartData=function(data)
{
console.log(data);
var arr=[];
for(var d in data)
{
arr.push(d.total_vote)
}
// console.log(arr);
return arr;
}
My options object in dataset like as
{
"options": [
{
"id": 1,
"pool_id": 1,
"name": "pool1 option1",
"total_vote": 1
},
{
"id": 2,
"pool_id": 1,
"name": "pool1 option2",
"total_vote": 0
},
...
...
]
}
In view with ng-repeat directive
<canvas id="bar" class="chart chart-bar"
chart-data="makeChartData(options)" chart-labels="makeChartLbl(options)">
</canvas>
but it is not generating chart. How can solve this issue?
There are multiple issues :
I am not sure you are reading your Object correctly, check the code for my implementation; The other issue is that Angular trows a $rootScope:infdig error due to how you are creating new arrays inside your functions, I fixed that as well, but you might need to modify it for your particular case.
This is one solution:
var chartData = [];
var chartLabels = [];
$scope.options = options;
$scope.makeChartLbl = function(data) {
chartData.length = 0;
data.forEach(function(datum) {
chartData.push(datum.name);
});
return chartData;
}
$scope.makeChartData = function(data) {
chartLabels.length = 0;
data.forEach(function(datum) {
chartLabels.push(datum.total_vote);
});
return chartLabels;
}
}]);
var options = [
{
"id": 1,
"pool_id": 1,
"name": "pool1 option1",
"total_vote": 1
},
{
"id": 2,
"pool_id": 1,
"name": "pool1 option2",
"total_vote": 0
}
];
Full code in codepen:
Angular Chart.js issue
Result:

JQGrid data from Local Object array

I create a local object collection based on the user's selection. The dynamic Array should be loaded to the jqGrid. After dynamically creating the array I tried to reload, but nothing happens. Here is the code -
$(document).ready(function () {
var arrobj = [];
var JSONString = []; //[{"DOId":"0","DONo":"Please select","DealerCode":"0","Week":"0","Item":"0","Qty":"11","Date":"11"}]
$("#<%=btnAdd.ClientID%>").click(function () {
//Get values
//Date
var dlDt = $("#<%=tbRchngDt.ClientID%>").val();
//Qty
var dlQty = $("#<%=tbQty.ClientID%>").val();
//item
var dlItem = $("#<%=ddlItem.ClientID%>").val();
//DO No
var dlDOId = $("#<%=ddlDO.ClientID%>").val();
var dlDO = $("#<%=ddlDO.ClientID%> option:selected").text();
//Week
var dlWeek = $("#<%=ddlWeek.ClientID%>").val();
//Dealer
var dlDealer = $("#<%=ddlDealer.ClientID%>").val();
DistributionDtl = new Object();
DistributionDtl.DOId = dlDOId;
DistributionDtl.DONo = dlDO;
DistributionDtl.DealerCode = dlDealer;
DistributionDtl.Week = dlWeek;
DistributionDtl.Item = dlItem;
DistributionDtl.Qty = dlQty;
DistributionDtl.Date = dlDt;
//alert(DistributionDtl);
arrobj.push(DistributionDtl);
JSONString = JSON.stringify(arrobj);
//alert(JSONString);
$("#list").jqGrid('setGridParam',
{ datatype: "local",
data: JSONString
}).trigger("reloadGrid");
});
jQuery("#list").jqGrid({ data: JSONString,
datatype: "local",
height: 150,
width: 600,
rowNum: 10,
rowList: [10, 20, 30],
colNames: ['DOID', 'Item', 'Qty', 'Date'],
colModel: [{ name: 'DOId', index: 'DOId', width: 60, sorttype: "int" },
{ name: 'Item', index: 'Item', width: 120 },
{ name: 'Qty', index: 'Qty', width: 80 },
{ name: 'Date', index: 'Date', width: 120}],
pager: "#pager",
viewrecords: true,
caption: "Contacts"
});
});
You should add data local to jqgrid with any of the following methods:
addJSONData - with data as json
addRowData - adding row by row and then trigger reload grid to recalculate pagination - data should be a javascript object
Documentation can be found here. Edit: According to the documentation you CAN set local data directly in the "data" param but it should be an array not a json string and you do not have the contents of JSONString in your question, so the problem might come from that.

Resources