show only part of the text on h-axis - javascript

I am working on angularjs google charts.
Please find the demo here
I want to show different value to be displayed on h-axis and tooltip.
In the below code, i want to show only the month name on the h-axis and both month and year on tooltip.
Any advices?
js code:
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
chart1.type = "ColumnChart";
chart1.displayed = false;
chart1.data = {
"cols": [{
id: "month",
label: "Month",
type: "string"
}, {
id: "laptop-id",
label: "Laptop",
type: "number"
} ],
"rows": [{
c: [{
v: "January" + " 2017"
}, {
v: 19,
} ]
}, {
c: [{
v: "February" + " 2017"
}, {
v: 13
}]
}, {
c: [{
v: "March" + " 2017"
}, {
v: 24
}
]
}, {
c: [{
v: "April" + " 2017"
}, {
v: 24
}
]
}, {
c: [{
v: "May"+ " 2017"
}, {
v: 18
}
]
}, {
c: [{
v: "June"+ " 2017"
}, {
v: 21
}
]
}, {
c: [{
v: "July"+ " 2017"
}, {
v: 24
}
]
}, {
c: [{
v: "August"+ " 2017"
}, {
v: 14
}
]
}, {
c: [{
v: "September"+ " 2017"
}, {
v: 4
}
]
}, {
c: [{
v: "October"+ " 2017"
}, {
v: 34
}
]
}]
};
chart1.options = {
"title": "Title goes here",
"colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"isStacked": "true",
"fill": 20,
focusTarget: 'category',
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
slantedText : "true",
},
};
$scope.myChart = chart1;
});
In the above code i'm using v: "January" + " 2017" , i want to show only first part i.e.,January to be displayed on h-axis and January 2017 on the tooltip when mouse over on the bar(same thing february,march..on the h-axis and on the tooltip show complete text for the individual bars).


you could use a real date for the column value
this will allow hAxis.format and hAxis.ticks for the axis labels
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [{
id: "month",
label: "Month",
type: "date"
}, {
id: "laptop-id",
label: "Laptop",
type: "number"
} ],
"rows": [{
c: [
{
v: new Date(2017, 0, 1),
f: "January 2017"
},
{v: 119}
]
}, {
c: [
{
v: new Date(2017, 1, 1),
f: "February 2017"
},
{v: 022}
]
}, {
c: [
{
v: new Date(2017, 2, 1),
f: "March 2017"
},
{v: 033}
]
}, {
c: [
{
v: new Date(2017, 3, 1),
f: "April 2017"
},
{v: 044}
]
}, {
c: [
{
v: new Date(2017, 4, 1),
f: "May 2017"
},
{v: 055}
]
}, {
c: [
{
v: new Date(2017, 5, 1),
f: "June 2017"
},
{v: 066}
]
}, {
c: [
{
v: new Date(2017, 6, 1),
f: "July 2017"
},
{v: 077}
]
}, {
c: [
{
v: new Date(2017, 7, 1),
f: "August 2017"
},
{v: 088}
]
}, {
c: [
{
v: new Date(2017, 8, 1),
f: "September 2017"
},
{v: 099}
]
}, {
c: [
{
v: new Date(2017, 9, 1),
f: "October 2017"
},
{v: 010}
]
}]
});
options = {
"title": "Title goes here",
"colors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"defaultColors": ['#0000FF', '#009900', '#CC0000', '#DD9900'],
"isStacked": "true",
"fill": 20,
focusTarget: 'category',
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
slantedText : "true",
format: "MMM"
}
};
options.hAxis.ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
options.hAxis.ticks.push(data.getValue(i, 0));
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

How can I sort the nodes of Sankey chart in rechart?

I want to sort my nodes in Sankey chart. How can I do that?
For example, for the following data:
const data0 = {
nodes: [
{ name: "L0" },
{ name: "L1" },
{ name: "L2" },
{ name: "L3" },
{ name: "L4" },
{ name: "R5" },
{ name: "R6" },
{ name: "R7" },
{ name: "R8" },
{ name: "R9" }
],
links: [
{ source: 0, target: 5, value: 30 },
{ source: 1, target: 8, value: 99 },
{ source: 1, target: 7, value: 20 },
{ source: 1, target: 6, value: 15 },
{ source: 4, target: 5, value: 6 },
{ source: 2, target: 8, value: 30 },
{ source: 0, target: 6, value: 15 },
{ source: 2, target: 9, value: 11 },
{ source: 3, target: 9, value: 8 },
{ source: 3, target: 8, value: 23 },
{ source: 2, target: 5, value: 20 }
]
};
For this data, the Sankey chart will be as follows:
But I want to sort the nods on each side. I want nodes to be on each side in this way:
How can I do that?

"javascript" bar graph that breaks down annual columns to monthly

I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks

Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>

Lodash to subgroup items in Array of Objects

I have an Array of objects with band property. i would like to group them according to band
I have tried _groupBy and failed to get expected result
var data=[
{
"tOffice": 123,
"cType": 5000,
"band": -4877,
"minCh": 12,
"maxCh": 20
},
{
"tOffice": 123,
"cType": 5000,
"band": -4877,
"minCh": 1,
"maxCh": 2
},
{
"tOffice": 123,
"cType": 5000,
"band": -4877,
"minCh": 11,
"maxCh": 12
},
{
"tOffice": 123,
"cType": 6000,
"band": -5877,
"minCh": 11,
"maxCh": 12
},
{
"tOffice": 456,
"cType": 5000,
"band": -4544,
"minCh": 12,
"maxCh": 20
},
{
"tOffice": 456,
"cType": 5000,
"band": -4544,
"minCh": 10,
"maxCh": 11
},
{
"tOffice": 456,
"cType": 6000,
"band": -5211,
"minCh": 12,
"maxCh": 20
},
{
"tOffice": 456,
"cType": 6000,
"band": -5211,
"minCh": 12,
"maxCh": 20
},
{
"tOffice": 456,
"cType": 6000,
"band": -5211,
"minCh": 12,
"maxCh": 20
}
];
Expected Output:
var expectedResult = [{
tOffice: 123,
bandType: [{
band: '123-5000',
minMaxCharge: [{
minCh: 12,
maxCh: 20
}, {
minCh: 1,
maxCh: 2
}, {
minCh: 11,
maxCh: 12
}]
},
{
band: '123-6000',
minMaxCharge: [{
minCh: 11,
maxCh: 12
}]
}
]
}, {
tOffice: 456,
bandType: [{
band: '456-5000',
minMaxCharge: [{
minCh: 12,
maxCh: 20
}, {
minCh: 10,
maxCh: 11
}]
},
{
band: '456-6000',
minMaxCharge: [{
minCh: 12,
maxCh: 20
}, {
minCh: 12,
maxCh: 20
}]
}
]
}]
The expected result should contain a tOffice with max 2 combinations(5000 & 6000), band is a combination of tOffice+cType.
_.chain(data).groupBy("band").map(function(v, i) {
return {
}
})
I have tried some ES6 way and found that lodash methods will be a good choice, but i am not aware about that

This is a vanila js solution. You could do something like this using reduce and Object.values
var data=[{"tOffice":123,"cType":5000,"band":-4877,"minCh":12,"maxCh":20},{"tOffice":123,"cType":5000,"band":-4877,"minCh":1,"maxCh":2},{"tOffice":123,"cType":5000,"band":-4877,"minCh":11,"maxCh":12},{"tOffice":123,"cType":6000,"band":-5877,"minCh":11,"maxCh":12},{"tOffice":456,"cType":5000,"band":-4544,"minCh":12,"maxCh":20},{"tOffice":456,"cType":5000,"band":-4544,"minCh":10,"maxCh":11},{"tOffice":456,"cType":6000,"band":-5211,"minCh":12,"maxCh":20},{"tOffice":456,"cType":6000,"band":-5211,"minCh":12,"maxCh":20},{"tOffice":456,"cType":6000,"band":-5211,"minCh":12,"maxCh":20}];
const merged = data.reduce((r,{tOffice, cType, minCh, maxCh})=>{
const office = r[tOffice] = r[tOffice] || {tOffice, bandType:{}};
const band = `${tOffice}-${cType}`
const nested = office.bandType[band]
= office.bandType[band] || {band, minMaxCharge:[]};
nested.minMaxCharge.push({minCh, maxCh})
return r
},{})
const final = Object.values(merged);
final.forEach(a => a.bandType = Object.values(a.bandType))
console.log(final)

can add ChartRangeFilter to a Bubble Chart?

I would like to know if you can use the ChartRangeFilter for this type of chart. Since this data according to your search will continue to grow horizontally. And yes, I have to use the bubbles. Or else I can do a horizontal scroll but the vertical axis does not move.
I do not know what else to put in the post: / ask me to continue ingrensando more description
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var Alarmas = new Array();
Alarmas[1] = 'PROP1_BID';
Alarmas[2] = 'PROP1_ASK';
Alarmas[3] = 'PROP2_BID';
Alarmas[4] = 'PROP2_ASK';
Alarmas[5] = 'PROV1_ASK_05';
Alarmas[6] = 'PROV1_ASK_10';
Alarmas[7] = 'PROV1_ASK_20';
Alarmas[8] = 'PROV1_ASK_60';
Alarmas[9] = 'PROV1_ASK_X';
Alarmas[10] = 'PROV1_BID_05';
Alarmas[11] = 'PROV1_BID_10';
Alarmas[12] = 'PROV1_BID_20';
Alarmas[13] = 'PROV1_BID_60';
Alarmas[14] = 'PROV1_BID_X';
Alarmas[15] = 'PROV2_BID';
Alarmas[16] = 'PROV2_ASK';
Alarmas[17] = 'PROV3';
Alarmas[18] = 'OPEV1_05';
Alarmas[19] = 'OPEV1_10';
Alarmas[20] = 'OPEV1_20';
Alarmas[21] = 'OPEV1_60';
Alarmas[22] = 'OPEV1_X';
Alarmas[23] = 'OPEV2';
Alarmas[24] = 'OPEV3_01';
Alarmas[25] = 'OPEV3_05';
Alarmas[26] = 'OPEV3_10';
Alarmas[27] = 'OPEV3_20';
Alarmas[27] = 'OPEV3_60';
Alarmas[28] = 'OPEV3_X';
Alarmas[29] = 'OPEP1';
Alarmas[30] = 'OPEP2_01';
Alarmas[31] = 'OPEP2_05';
Alarmas[32] = 'OPEP2_10';
Alarmas[33] = 'OPEP2_20';
Alarmas[34] = 'OPEP2_60';
Alarmas[35] = 'OPEP2_X';
Alarmas[36] = 'OPEP3_05';
Alarmas[37] = 'OPEP3_10';
Alarmas[38] = 'OPEP3_20';
Alarmas[39] = 'OPEP3_60';
Alarmas[40] = 'OPEP3_X';
Alarmas[41] = 'AA1';
Alarmas[42] = 'AA2_05';
Alarmas[43] = 'AA2_10';
Alarmas[44] = 'AA2_20';
Alarmas[45] = 'AA2_60';
Alarmas[46] = 'AA2_X';
Alarmas[47] = 'AA3_05';
Alarmas[48] = 'AA3_10';
Alarmas[49] = 'AA3_20';
Alarmas[50] = 'AA3_60';
Alarmas[51] = 'AA3_X';
var Valores = new Array();
Valores[1] = 'BVN';
Valores[2] = 'LTOTALC1';
Valores[3] = 'LUISAI1';
Valores[4] = 'CORAREI1';
Valores[5] = 'CORAREC1';
Valores[6] = 'CONTINC1';
Valores[7] = 'MILENIC1';
Valores[8] = 'ORCL';
Valores[9] = 'YHOO';
Valores[10] = 'COFIINC1';
var options = {
title: 'Valor / Alarma Grid',
colorAxis: {
colors: ['#67DC41', '#FDFF66', '#FF7373']
},
tooltip: {
trigger: 'none'
},
sizeAxis: {
maxSize: 30,
minSize: 2
},
bubble: {
textStyle: {
fontSize: 14,
fontName: 'Times-Roman',
color: 'white',
bold: true,
italic: true,
auraColor: 'none'
},
opacity: 1
},
hAxis: {
slantedText: true,
slantedTextAngle: 90,
viewWindowMode: 'explicit',
viewWindow: {
max: Alarmas.length,
min: 0,
},
gridlines: {
count: Alarmas.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'PROP1_BID'
},
{
v: 2,
f: 'PROP1_ASK'
},
{
v: 3,
f: 'PROP2_BID'
},
{
v: 4,
f: 'PROP2_ASK'
},
{
v: 5,
f: 'PROV1_ASK_05'
},
{
v: 6,
f: 'PROV1_ASK_10'
},
{
v: 7,
f: 'PROV1_ASK_20'
},
{
v: 8,
f: 'PROV1_ASK_60'
},
{
v: 9,
f: 'PROV1_ASK_X'
},
{
v: 10,
f: 'PROV1_BID_05'
},
{
v: 11,
f: 'PROV1_BID_10'
},
{
v: 12,
f: 'PROV1_BID_20'
},
{
v: 13,
f: 'PROV1_BID_60'
},
{
v: 14,
f: 'PROV1_BID_X'
},
{
v: 15,
f: 'PROV2_BID'
},
{
v: 16,
f: 'PROV2_ASK'
},
{
v: 17,
f: 'PROV3'
},
{
v: 18,
f: 'OPEV1_05'
},
{
v: 19,
f: 'OPEV1_10'
},
{
v: 20,
f: 'OPEV1_20'
},
{
v: 21,
f: 'OPEV1_60'
},
{
v: 22,
f: 'OPEV1_X'
},
{
v: 23,
f: 'OPEV2'
},
{
v: 24,
f: 'OPEV3_01'
},
{
v: 25,
f: 'OPEV3_05'
},
{
v: 26,
f: 'OPEV3_10'
},
{
v: 27,
f: 'OPEV3_20'
},
{
v: 27,
f: 'OPEV3_60'
},
{
v: 28,
f: 'OPEV3_X'
},
{
v: 29,
f: 'OPEP1'
},
{
v: 30,
f: 'OPEP2_01'
},
{
v: 31,
f: 'OPEP2_05'
},
{
v: 32,
f: 'OPEP2_10'
},
{
v: 33,
f: 'OPEP2_20'
},
{
v: 34,
f: 'OPEP2_60'
},
{
v: 35,
f: 'OPEP2_X'
},
{
v: 36,
f: 'OPEP3_05'
},
{
v: 37,
f: 'OPEP3_10'
},
{
v: 38,
f: 'OPEP3_20'
},
{
v: 39,
f: 'OPEP3_60'
},
{
v: 40,
f: 'OPEP3_X'
},
{
v: 41,
f: 'AA1'
},
{
v: 42,
f: 'AA2_05'
},
{
v: 43,
f: 'AA2_10'
},
{
v: 44,
f: 'AA2_20'
},
{
v: 45,
f: 'AA2_60'
},
{
v: 46,
f: 'AA2_X'
},
{
v: 47,
f: 'AA3_05'
},
{
v: 48,
f: 'AA3_10'
},
{
v: 49,
f: 'AA3_20'
},
{
v: 50,
f: 'AA3_60'
},
{
v: 51,
f: 'AA3_X'
}
]
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: Valores.length,
min: 0,
},
gridlines: {
count: Valores.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'BVN'
},
{
v: 2,
f: 'LTOTALC1'
},
{
v: 3,
f: 'LUISAI1'
},
{
v: 4,
f: 'CORAREI1'
},
{
v: 5,
f: 'CORAREC1'
},
{
v: 6,
f: 'CONTINC1'
},
{
v: 7,
f: 'MILENIC1'
},
{
v: 8,
f: 'ORCL'
},
{
v: 9,
f: 'YHOO'
},
{
v: 10,
f: 'COFIINC1'
}
]
},
'width': 3900,
'height': 1000
};
//dtd
var customer_product_grid_data_table = new google.visualization.DataTable();
customer_product_grid_data_table.addColumn('string', 'Alarma & Valor');
customer_product_grid_data_table.addColumn('number', 'Alarma');
customer_product_grid_data_table.addColumn('number', 'Valor');
customer_product_grid_data_table.addColumn('number', 'Nivel de Alerta');
customer_product_grid_data_table.addColumn('number', 'Cantidad de alarmas');
customer_product_grid_data_table.addColumn('date', 'Fecha Inicio');
customer_product_grid_data_table.addColumn('date', 'Fecha Termino');
for (var j = 1; j < Valores.length; j++)
for (var i = 1; i < Alarmas.length; i++) {
var variable1 = Math.round(Math.random() * (10 - 1) + 1);
customer_product_grid_data_table.addRow([
'' + variable1, i, j, variable1, variable1, new Date(2016, 06, 1), new Date(2016, 06, 30)
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(customer_product_grid_data_table, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.js"></script>
</head>
<body>
<div id="chart_div"></div>
<div id="piechart" style="overflow-y: auto;white-space: nowrap; min-height:1200px;"></div>
</body>
</html>

you can bind a ChartRangeFilter with any type of chart,
the filter primarily works off the data table anyway...
the column that will be filtered needs to represent a continuous axis,
the data type must be --> 'number', 'date', 'timeofday', etc...
can't be --> 'string'
since the BubbleChart requires a 'string' for the first column,
use the chartView option on the ChartRangeFilter,
to specify which data table columns it should know about...
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 1, // <-- x-axis column
ui: {
chartType: 'ScatterChart',
chartView: {
columns: [1, 2] // <-- limit columns from data table
},
chartOptions: {
width: 3900
}
}
}
});
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart', 'controls']
});
function drawChart() {
var Alarmas = new Array();
Alarmas[1] = 'PROP1_BID';
Alarmas[2] = 'PROP1_ASK';
Alarmas[3] = 'PROP2_BID';
Alarmas[4] = 'PROP2_ASK';
Alarmas[5] = 'PROV1_ASK_05';
Alarmas[6] = 'PROV1_ASK_10';
Alarmas[7] = 'PROV1_ASK_20';
Alarmas[8] = 'PROV1_ASK_60';
Alarmas[9] = 'PROV1_ASK_X';
Alarmas[10] = 'PROV1_BID_05';
Alarmas[11] = 'PROV1_BID_10';
Alarmas[12] = 'PROV1_BID_20';
Alarmas[13] = 'PROV1_BID_60';
Alarmas[14] = 'PROV1_BID_X';
Alarmas[15] = 'PROV2_BID';
Alarmas[16] = 'PROV2_ASK';
Alarmas[17] = 'PROV3';
Alarmas[18] = 'OPEV1_05';
Alarmas[19] = 'OPEV1_10';
Alarmas[20] = 'OPEV1_20';
Alarmas[21] = 'OPEV1_60';
Alarmas[22] = 'OPEV1_X';
Alarmas[23] = 'OPEV2';
Alarmas[24] = 'OPEV3_01';
Alarmas[25] = 'OPEV3_05';
Alarmas[26] = 'OPEV3_10';
Alarmas[27] = 'OPEV3_20';
Alarmas[27] = 'OPEV3_60';
Alarmas[28] = 'OPEV3_X';
Alarmas[29] = 'OPEP1';
Alarmas[30] = 'OPEP2_01';
Alarmas[31] = 'OPEP2_05';
Alarmas[32] = 'OPEP2_10';
Alarmas[33] = 'OPEP2_20';
Alarmas[34] = 'OPEP2_60';
Alarmas[35] = 'OPEP2_X';
Alarmas[36] = 'OPEP3_05';
Alarmas[37] = 'OPEP3_10';
Alarmas[38] = 'OPEP3_20';
Alarmas[39] = 'OPEP3_60';
Alarmas[40] = 'OPEP3_X';
Alarmas[41] = 'AA1';
Alarmas[42] = 'AA2_05';
Alarmas[43] = 'AA2_10';
Alarmas[44] = 'AA2_20';
Alarmas[45] = 'AA2_60';
Alarmas[46] = 'AA2_X';
Alarmas[47] = 'AA3_05';
Alarmas[48] = 'AA3_10';
Alarmas[49] = 'AA3_20';
Alarmas[50] = 'AA3_60';
Alarmas[51] = 'AA3_X';
var Valores = new Array();
Valores[1] = 'BVN';
Valores[2] = 'LTOTALC1';
Valores[3] = 'LUISAI1';
Valores[4] = 'CORAREI1';
Valores[5] = 'CORAREC1';
Valores[6] = 'CONTINC1';
Valores[7] = 'MILENIC1';
Valores[8] = 'ORCL';
Valores[9] = 'YHOO';
Valores[10] = 'COFIINC1';
var options = {
title: 'Valor / Alarma Grid',
colorAxis: {
colors: ['#67DC41', '#FDFF66', '#FF7373']
},
tooltip: {
trigger: 'none'
},
sizeAxis: {
maxSize: 30,
minSize: 2
},
bubble: {
textStyle: {
fontSize: 14,
fontName: 'Times-Roman',
color: 'white',
bold: true,
italic: true,
auraColor: 'none'
},
opacity: 1
},
hAxis: {
slantedText: true,
slantedTextAngle: 90,
viewWindowMode: 'explicit',
viewWindow: {
max: Alarmas.length,
min: 0,
},
gridlines: {
count: Alarmas.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'PROP1_BID'
},
{
v: 2,
f: 'PROP1_ASK'
},
{
v: 3,
f: 'PROP2_BID'
},
{
v: 4,
f: 'PROP2_ASK'
},
{
v: 5,
f: 'PROV1_ASK_05'
},
{
v: 6,
f: 'PROV1_ASK_10'
},
{
v: 7,
f: 'PROV1_ASK_20'
},
{
v: 8,
f: 'PROV1_ASK_60'
},
{
v: 9,
f: 'PROV1_ASK_X'
},
{
v: 10,
f: 'PROV1_BID_05'
},
{
v: 11,
f: 'PROV1_BID_10'
},
{
v: 12,
f: 'PROV1_BID_20'
},
{
v: 13,
f: 'PROV1_BID_60'
},
{
v: 14,
f: 'PROV1_BID_X'
},
{
v: 15,
f: 'PROV2_BID'
},
{
v: 16,
f: 'PROV2_ASK'
},
{
v: 17,
f: 'PROV3'
},
{
v: 18,
f: 'OPEV1_05'
},
{
v: 19,
f: 'OPEV1_10'
},
{
v: 20,
f: 'OPEV1_20'
},
{
v: 21,
f: 'OPEV1_60'
},
{
v: 22,
f: 'OPEV1_X'
},
{
v: 23,
f: 'OPEV2'
},
{
v: 24,
f: 'OPEV3_01'
},
{
v: 25,
f: 'OPEV3_05'
},
{
v: 26,
f: 'OPEV3_10'
},
{
v: 27,
f: 'OPEV3_20'
},
{
v: 27,
f: 'OPEV3_60'
},
{
v: 28,
f: 'OPEV3_X'
},
{
v: 29,
f: 'OPEP1'
},
{
v: 30,
f: 'OPEP2_01'
},
{
v: 31,
f: 'OPEP2_05'
},
{
v: 32,
f: 'OPEP2_10'
},
{
v: 33,
f: 'OPEP2_20'
},
{
v: 34,
f: 'OPEP2_60'
},
{
v: 35,
f: 'OPEP2_X'
},
{
v: 36,
f: 'OPEP3_05'
},
{
v: 37,
f: 'OPEP3_10'
},
{
v: 38,
f: 'OPEP3_20'
},
{
v: 39,
f: 'OPEP3_60'
},
{
v: 40,
f: 'OPEP3_X'
},
{
v: 41,
f: 'AA1'
},
{
v: 42,
f: 'AA2_05'
},
{
v: 43,
f: 'AA2_10'
},
{
v: 44,
f: 'AA2_20'
},
{
v: 45,
f: 'AA2_60'
},
{
v: 46,
f: 'AA2_X'
},
{
v: 47,
f: 'AA3_05'
},
{
v: 48,
f: 'AA3_10'
},
{
v: 49,
f: 'AA3_20'
},
{
v: 50,
f: 'AA3_60'
},
{
v: 51,
f: 'AA3_X'
}
]
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: Valores.length,
min: 0,
},
gridlines: {
count: Valores.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'BVN'
},
{
v: 2,
f: 'LTOTALC1'
},
{
v: 3,
f: 'LUISAI1'
},
{
v: 4,
f: 'CORAREI1'
},
{
v: 5,
f: 'CORAREC1'
},
{
v: 6,
f: 'CONTINC1'
},
{
v: 7,
f: 'MILENIC1'
},
{
v: 8,
f: 'ORCL'
},
{
v: 9,
f: 'YHOO'
},
{
v: 10,
f: 'COFIINC1'
}
]
},
'width': 3900,
'height': 1000
};
//dtd
var customer_product_grid_data_table = new google.visualization.DataTable();
customer_product_grid_data_table.addColumn('string', 'Alarma & Valor');
customer_product_grid_data_table.addColumn('number', 'Alarma');
customer_product_grid_data_table.addColumn('number', 'Valor');
customer_product_grid_data_table.addColumn('number', 'Nivel de Alerta');
customer_product_grid_data_table.addColumn('number', 'Cantidad de alarmas');
customer_product_grid_data_table.addColumn('date', 'Fecha Inicio');
customer_product_grid_data_table.addColumn('date', 'Fecha Termino');
for (var j = 1; j < Valores.length; j++)
for (var i = 1; i < Alarmas.length; i++) {
var variable1 = Math.round(Math.random() * (10 - 1) + 1);
customer_product_grid_data_table.addRow([
'' + variable1, i, j, variable1, variable1, new Date(2016, 06, 1), new Date(2016, 06, 30)
]);
}
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'chart',
options: options
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'ScatterChart',
chartView: {
columns: [1, 2]
},
chartOptions: {
width: 3900
}
}
}
});
dashboard.bind(control, chart);
dashboard.draw(customer_product_grid_data_table);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>

How to pass a parameter to CanvasJS returned from XMLHttpRequest?

I took an example code from : http://canvasjs.com/html5-javascript-bar-chart/ ("Cost of pancake..").
When running it, it works of course.
I created a small html that when entering a url, it returns me exactly the second parameter that should be passed to : var chart = new CanvasJS.Chart("chartContainer",my_parameter);
code :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.response;
alert(xmlhttp.responseText);
var toSend = xmlhttp.response;
var chart = new CanvasJS.Chart("chartContainer",toSend); // The problem is here
chart.render();
}
}
xmlhttp.open("GET","https://myURL",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>PRESS BUTTON!!!</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
<script type="text/javascript" src="canvasjs-1.7.0-beta/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
MyURL is returning this (exactly what is written in the canvasJS chart example) :
{
title:{
text:"Cost Of Pancake Ingredients, 2011"
},
animationEnabled: true,
axisX:{
interval: 1,
labelFontSize: 10,
lineThickness: 0
},
axisY2:{
valueFormatString: "$ 0",
lineThickness: 0
},
toolTip: {
shared: true
},
legend:{
verticalAlign: "top",
horizontalAlign: "center"
},
data: [
{
type: "stackedBar",
showInLegend: true,
name: "Butter (500gms)",
axisYType: "secondary",
color: "#7E8F74",
dataPoints: [
{y: 3, label: "India"},
{y: 5, label: "US" },
{y: 3, label: "Germany" },
{y: 6, label: "Brazil" },
{y: 7, label: "China" },
{y: 5, label: "Australia" },
{y: 5, label: "France" },
{y: 7, label: "Italy" },
{y: 9, label: "Singapore" },
{y: 8, label: "Switzerland" },
{y: 12, label: "Japan" }
]
},
{
type: "stackedBar",
showInLegend: true,
name: "Flour (1kg)",
axisYType: "secondary",
color: "#F0E6A7",
dataPoints: [
{y: .5, label: "India" },
{y: 1.5, label: "US" },
{y: 1, label: "Germany" },
{y: 2, label: "Brazil" },
{y: 2, label: "China" },
{y: 2.5, label: "Australia" },
{y: 1.5, label: "France" },
{y: 1, label: "Italy" },
{y: 2, label: "Singapore" },
{y: 2, label: "Switzerland" },
{y: 3, label: "Japan" }
]
},
{
type: "stackedBar",
showInLegend: true,
name: "Milk (2l)",
axisYType: "secondary",
color: "#EBB88A",
dataPoints: [
{y: 2, label: "India" },
{y: 3, label: "US" },
{y: 3, label: "Germany" },
{y: 3, label: "Brazil" },
{y: 4, label: "China" },
{y: 3, label: "Australia" },
{y: 4.5, label: "France" },
{y: 4.5, label: "Italy" },
{y: 6, label: "Singapore" },
{y: 3, label: "Switzerland" },
{y: 6, label: "Japan" }
]
},
{
type: "stackedBar",
showInLegend: true,
name: "Eggs (20)",
axisYType: "secondary",
color:"#DB9079",
indexLabel: "$#total",
dataPoints: [
{y: 2, label: "India" },
{y: 3, label: "US" },
{y: 6, label: "Germany" },
{y: 4, label: "Brazil" },
{y: 4, label: "China" },
{y: 8, label: "Australia" },
{y: 8, label: "France" },
{y: 8, label: "Italy" },
{y: 4, label: "Singapore" },
{y: 11, label: "Switzerland" },
{y: 6, label: "Japan" }
]
}
]
}
I suspect that both xmlhttp.response and xmlhttp.responseText returning text..
If I remove the toSend parameter and enter hardcoded the long JSON it works fine.
Can anyone please help?
------- editing with solution :
var toSend= eval ('('+ xmlhttp.responseText +')');
var chart = new CanvasJS.Chart("chartContainer",toSend);
chart.render();

Parse the JSON string to turn it into a JavaScript object.
var toSend;
try {
toSend = JSON.parse(xmlhttp.responseText);
} catch(e) {
toSend = xmlhttp.response;
}
var chart = new CanvasJS.Chart('chartContainer', toSend);

Categories