i'm trying to create a chart using dojo. I choose a StackedColumns chart. I want to make it interactive. When a user clicks on a graph columns, an hyperlink should be invoked. But to create hyperlink'url, I need the series name. Is there any way to get Series Name when user clicks on a column? I've been searching for days but i didn't found any solution. Here is my code:
<div id="chartNode" style="width: 1024px; height: 768px;"></div>
<div id="legend"></div>
<script type="text/javascript">
require(['dojox/charting/Chart',
'dojox/charting/themes/PrimaryColors',
'dojox/charting/plot2d/StackedColumns',
'dojox/charting/plot2d/Grid',
'dojox/charting/widget/Legend',
'dojox/charting/action2d/Tooltip',
'dojox/charting/action2d/Magnify',
'dojox/charting/action2d/Highlight',
'dojo/store/Observable',
'dojo/store/Memory',
'dojox/charting/StoreSeries',
'dojox/charting/axis2d/Default',
'dojo/domReady!'], function(Chart, theme, StackedColumns,Grid,Legend,Tooltip,Magnify,Highlight,Observable,Memory,StoreSeries){
var myData = [{id:1,value:1,site:'1'},
{id:2,value:2,site:'1'},
{id:3,value:6,site:'1'},
{id:4,value:4,site:'1'},
{id:5,value:5,site:'1'},
{id:6,value:1,site:'2'},
{id:7,value:3,site:'2'},
{id:8,value:1,site:'2'},
{id:9,value:2,site:'2'},
{id:10,value:7,site:'2'}];
var myStore = new Observable(new Memory({
data: { identifier: 'id',
items: myData
}
}));
var serie_1 = new StoreSeries(myStore, { query: { site: 1 } }, 'value');
var serie_2 = new StoreSeries(myStore, { query: { site: 2 } }, 'value');
var myChart = new Chart('chartNode');
myChart.setTheme(theme);
myChart.addAxis('x', { fixLower: 'minor',
fixUpper: 'minor',
natural: true,
rotation: 90
});
myChart.addAxis('y', {vertical: true,fixLower: 'major',fixUpper: 'major',minorTicks: true,includeZero: true});
myChart.addPlot('myPlot', { type: 'StackedColumns', gap: 5, minBarSize: 8});
myChart.addSeries('Serie 1',serie_1,{ stroke: { color: 'red' }, fill: 'lightpink' });
myChart.addSeries('Serie 2',serie_2,{ stroke: { color: 'blue' }, fill: 'lightblue' });
var highlight = new Highlight(myChart, 'myPlot');
myChart.render();
var legend = new Legend({ chart: myChart }, 'legend');
myChart.connectToPlot('myPlot',function(evt) {
// React to click event
if(type == 'onclick') {
var msg = 'x:'+evt.x+';y:'+evt.y+';index: '+evt.index+';value: '+evt.run.data[evt.index];
alert(msg);
//How to get series informations when onclick event fires???
}
var tip = new Tooltip(myChart,'myPlot',{text:function(evt){return evt.run.data[evt.index];}});
});
});
</script>
I tried this in a stacked bar and works well:
chart.connectToPlot("default", function(evt) {var type = evt.type; if(type=="onclick") console.log(evt.run.name);})
evt.run.name provides the series name based on the column you clicked
Great! Thank you Noelia!
I have used it for a pie chart. You can get the index number of the slice with the parameter evt.index.
Related
I am using Paramquery grid and I need to add new row to the detail grid, the new row should be added to the child of the current row.
I tried this :
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-plus', label: 'New', listener:
{
"click": function (evt, ui) {
debugger;
var $gridDet = $("#grid_editing").pqGrid("option", "detailModel");
//append empty row at the end.
var rowData = { ID: "2", 'Name':'Has'}; //empty row
var rowIndx = $gridDet.pqGrid("addRow", { rowData: rowData, checkEditable: true });
$gridDet.pqGrid("goToPage", { rowIndx: rowIndx });
$gridDet.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
}
]
An error thrown: $gridDet.pqGrid is not a function (The line that starts with rowIndx throws the error)
Please check the image below to see mygrid structure.
You can get the grid using:
var $gridDet = $(this).closest('.pq-grid');
and then apply the add logic to it.
I'd like to be able to edit the content attribute of visjs timeline items in the timeline itself. However, when I use an input as part of a template, it doesn't appear to receive any mouse events; I can't click in it and type anything, and clicking buttons doesn't work, either. Buttons appear to get the mouseover event, though:
function test(item) {
alert('clicked');
}
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div onClick="test"><input value="click in the middle"></input><button onClick="test">test</button></div>'
}
};
/* create timeline */
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) properties.event.target.focus();
});
https://codepen.io/barticula/pen/EpWJKd
Edit: Code above CodePen example have been updated to use the click event to focus on the input, but all other normal mouse behavior is missing. Keyboard events appear to function normally.
To get a reaction with a click on a timeline element, you can use the library's own events (see events on doc and this exemple on website).
On your example, you could do something like this among other possible solutions in pure javascript including...
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div id="test-div"><input placeholder="hey" type="text" id="inputTest" ><button id="test-button">test</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) alert('click on' + target.id);
});
UPDATED
It is difficult to know exactly what you want to do because there are several possible solutions anyway.
Eventually, I propose another snippet below and a codepen updated.... but will it meet your need, not sure ?
2nd UPDATE (for another work track, see comments)
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div><input placeholder="edit me..." type="text"></input><button>send value</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function(properties) {
var target = properties.event.target;
var item = items.get(properties.item);
console.log(properties.event);
// if (properties.item && target.tagName === "DIV") focusMethod(target);
if (properties.item && target.tagName === "INPUT") target.focus();
if (properties.item && target.tagName === "BUTTON") getInputValue(item, target);
});
focusMethod = function getFocus(target) {
// target.insertAfter("BUTTON");
target.firstChild.focus();
}
getInputValue = function getValue(item, target) {
target.focus();
var inputValue = (target.parentNode.firstChild.value) ? target.parentNode.firstChild.value : "no value entered ";
alert("Input value : " + inputValue + " => send by: " + item.content)
}
I have a page in a web app showing new users vs. users, and I'm charting it in a column chart. The JS looks like this:
var dataChart1 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:newUsers, ga:users',
dimensions: 'ga:date',
'start-date': beginDate,
'end-date': endDate
},
chart: {
container: 'chart1-container',
type: 'COLUMN',
options: {
width: '100%',
isStacked: true
}
}
});
The result stacked column chart looks as follows:
As you can see there no X-axis tick marks, and I would like to add them for each date in the chart. How would I do this?
You could modify the chart and redraw.
Not sure what your data looks like. But you may need to remove duplicates from chartTicks...
dataChart1.on('success', function(response) {
// response.chart : the Google Chart instance.
// response.data : the Google Chart data object.
var chartTicks = [];
for (var i = 0; i < response.data.getNumberOfRows(); i++) {
chartTicks.push(response.data.getValue(i, 0));
}
var options = {
width: '100%',
isStacked: true,
hAxis: { ticks: chartTicks }
}
response.chart.draw(response.data, options);
});
I am creating an application using Meteor and ReactJS. I have a collection which I subscribe to and the client side, and I want to render a ChartJS Polar Area chart based on the data from the collection.
The problem is that whenever I update the collection, both the new data and the old data appears on the chart (when I hover, I get two different values for the segments, the old data and the new data).
Here is my code:
ChartComponent = React.createClass({
mixins: [ReactMeteorData],
getMeteordata() {
let data = Meteor.subscribe("sentiment");
return {
chartData: [
{
value: MyCollection.find({"item": "test1"}).count(),
color: "green",
label: "Test1"
},
{
value: MyCollection.find({"item": "test2"}).count(),
color: "yellow",
label: "Test2"
},
{
value: MyCollection.find({"item": "test3"}).count(),
color: "red",
label: "Test3"
}
]
}
},
_drawGraph() {
let ctx = document.getElementById("my-canvas").getContext("2d");
let polarChart = new Chart(ctx).Polararea(this.data.chartData, {
animateScale: true,
});
return polarChart;
},
componentDidMount() {
this._drawGraph();
},
componentDidUpdate() {
this._drawGraph().update();
},
render() {
return <canvas id="my-canvas"></canvas>
}
});
Help would be appreciated. Thank you very much!
Note:
I am using react version 0.14. The official react-chartjs component does not work, due to some of the api changes.
i am populating a jqgrid from database and one of its columns is a color column like red, blue, etc. Can i set the cell color of this column based on the value coming from database at run time? how should i set formatter in this case? i tried like this but do not work
var colorFormatter = function(cellvalue, options, rowObject) {
var colorElementString = '<div class="colorBlock" style="background-color: red;"></div>';
return colorElementString;
---
---
colModel: [
{ name: 'GroupName', index: 'GroupName', width: 200, align: 'left' },
{ name: 'Description', index: 'Description', width: 300, align: 'left' },
{ name: 'Color', index: 'Color', width: 60, align: 'left', formatter: colorFormatter}],
Add a load complete call to a function that formats the colors:
loadComplete: function (data) {
$.each(data.rows, function (i, item) {
var rowId = data.rows[i].id || data.rows[i]._id_;
var myRow = new Array(item.valueOf());
jQuery('#' + grid).setCell(rowId, colName, '', { background: 'red'});
});
}
You just need to add the code to check for the conditions you want to apply.
I am changing the background color for the row based on status ("status" is the data column). Hope this might help. Here is the sample code:
<style>
.state_inactive {
background-color:##FF9999 !important;
border:1px solid ##A6C9E2;
color:##222222;
}
</style>
<script type="text/javascript">
$j("#Grid").jqGrid({
url:"getData.php",
datatype:"json",
colNames:['Name', 'Organization', 'Status'],
colModel:[{name:'name', index:'name'}, {name:'organization', index:'organization'}, {name:'status', index:'status'}],
},
gridComplete:function() {
var ids = jQuery("#Grid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var status = jQuery("#Grid").jqGrid("getCell", ids[i], 'status');
if (status == "-20") {
$j('#' + ids[i]).removeClass("ui-widget-content");
$j('#' + ids[i]).addClass("state_inactive");
}
}
})
</script>
Looks like a design flaw of jqgrid.
The best way is to implement this during loading and the custom formatter only has a value where you can do this. But you need to do this not on the value, but on the div or span that is in front of it.