I would like to add a url to each of my data points inside my series that when clicked user is redirected to that page. For example jsfiddle .
series:[{data: [ [123.12,'http://xyz.com'],[332.32,'http://zzs.com'] ] }]
I was able to get the points to be clickable, but how I actually get them to find the point I am clicking on and which url to use I can't figure out. I can obviously hack it by using an alternative array that stores the links... but I would like to use chart as it's meant.
Now that it has been solved for future reference to be able to add links to your points here is the code:
http://jsfiddle.net/awasM/2/
Here's one way to do this (fiddle here):
series: [{
name: 'Batch',
URLs: ['www.google.com', null, null, 'www.yahoo.com', null, null, 'www.cnn.com', null, null, 'www.minecraft.net'], // pass in array of URLs
data: [4375.48, 113599.39, 1278, 83950.12, 6579.65, 94582, 1285.65, 48700.39, 500, 62917.27],
color:'#b8ecce',
point: {
events: {
click: function() {
var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
if (someURL)
window.open('http://'+someURL);
}
}
}
}],
You can use structure:
data:[{
y:10,
ownURL:'http://www.google.com'
},{
y:11,
ownURL:'http://www.google2.com'
},{
y:5,
ownURL:'http://www.google3.com'
}]
and then you have ability to "get" this value by
this.point.options.ownURL
Related
For a project i'm working on with Fusioncharts to render a TimeSeries Chart. The data for the chart is provided by Laravel by passing it through a controller.
Now after a couple of days of debugging, frustration and not being able to figure out the issue i'm here.
I've created a timeseries chart and am trying to render this chart in a div i defined in my blade directive.
I followed this tutorial and read the docs about the specific graph but i end up with the following error:
fusioncharts.js:19 Uncaught Error: Data must be provided in 2D array format or array of json objects
The error itself is pretty clear, the data provided doesnt match the rules that fusioncharts have for delivering the data to the chart. So i started looking at my code and started looking the way i build up my json. The entire proces in creating the json is pretty straight forward and this is the output:
[{"timestamp":"2020-09-25 11:21:24","value":"268.00"},{"timestamp":"2020-09-25 11:21:24","value":"268.00"},{"timestamp":"2020-09-25 11:21:24","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"},{"timestamp":"2020-09-25 11:21:25","value":"268.00"}]
In the example fusioncharts provided they use this link to get the data. After looking at both data objects i could find a big difference apart from the key in mine.
This is the code i use to create a chart.
Promise.all([
#json($machine->coldData),
#json($machine->coldDataSchema),
]).then(function(res) {
const data = res[0];
const schema = res[1];
const dataStore = new FusionCharts.DataStore().createDataTable(data, schema);
new FusionCharts({
type: "timeseries",
renderAt: "graph-container",
width: "100%",
height: "400",
dataSource: {
data: dataStore,
chart:{
"theme": "fusion"
},
caption: {
text: "Products on pallet."
},
subcaption: {
text: "Lorem Ipsum...."
},
yaxis: [
{
plot: [
{
value: "Products",
connectnulldata: true
}
],
title: "Products on pallet",
min: "130"
}
]
}
}).render();
});
Its almost the same as the code in the tutorial but i get the error. I also tried the links in the tutorial but get the same error.
Can someone explain why this error occurs and how i should solve it.
Kindly provide the schema in the given format below :
[{
"name": "Time",
"type": "date",
"format": "%Y-%m-%d %H:%M:%S"
}, {
"name": "Products",
"type": "number"
}]
As per the data you have provided, it seems that the data is given in array of objects format and not in 2d array. In order to make your sample work please provide the data in the 2d array format. Below is an example of the same.
[
[
"2020-09-25 11:21:24",
268
],
[
"2020-09-25 11:21:24",
230
],
]
I'm using C3 to create a bar chart. I am using JSON formatted data, with a category axis.
I have a subchart i am using to implement scrolling and i would like to set a default extent with axis.x.extent.
Regardless of what i put in the extent array, C3 ignores it and displays the entire thing.
Code looks like this:
var chart = c3.generate({
bindto: this.$element[0],
data: {
json: [{name: 'name-01', count: 3}, {name: 'name-02', count: 9}, {name: 'name-03', count: 7}],
keys: { value: ['count'], x: 'name' },
type: 'bar',
}
axis: {
x: {
type: 'category',
extent: ['name-01', 'name-02']
}
}
},
subchart: {
show: true
}
});
Because the x values are category names, it seems i cant just use indexes. According to other stackoverflow posts.
According to other stackoverflow posts it seems like i am supposed to directly put in the category names. But that isnt working either. C3 still ignores it.
I have also tried using min and max instead of extent, which works, however it also sets it for the subchart, which makes it useless.
Theres very little to no documentation.
Anyone have any ideas?
You can achieve this by using chart.zoom
chart.zoom([0,1]);
can you can reset it using "unzoom"
chart.unzoom();
I'am using the jQuery Gantt api, and I want to access to certain elements, but I don't know how.
$(function() {
"use strict";
//var obj = JSON.parse($(".gantt").gantt);
$(".gantt").gantt({
source: [{
name: "Sprint 0",
desc: "Analysis",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "Requirement Gathering",
customClass: "ganttRed"
}]
}],
navigate: "scroll",
scale: "weeks",
maxScale: "months",
minScale: "days",
itemsPerPage: 10,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
//alert("OK");
//var parsedData = JSON.parse();
//alert($(".gantt").gantt.source);
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
prettyPrint();
});
I found this ape with static example, but am trying to draw my own chart by changing content of element source.
so can some tell me how can i get the element source from the gantt object.
Do you expecting this?
To access gantt elements through object try like this.
var ganttObj = $(".gantt").data("gantt");
Or try to create instance for your gantt like this.
var ganttObj = $(".gantt").gantt("instance");
ganttObj.model.maxScale = "years" //To change `maxScale` property values dynamically
Or you can also directly access your elements like this.
For eg: To change maxScale value from months to years, you can use like below.
$(".gantt").gantt({ maxScale: "years" });
Please let me know if this helps you.
Based on your example, you could simply move the source data into a variable so you can reference it later:
var ganttSource = [{
name: "Sprint 0",
desc: "Analysis",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "Requirement Gathering",
customClass: "ganttRed"
}]
}];
$(".gantt").gantt({
source: ganttSource,
...
});
console.log(ganttSource);
So I would like to call the "name" in this set of data to use in a function in another part of the script.
I'm able to call the ticker, x, info, and hover variables by using
event.point.ticker, event.point.info
but I havn't figured out how to get the name of the series. I've tried multiple things such as...
series.name, this.series.name, and event.point.name, this.chart.name
all to no avail. Here is the data
series:
[{
name: 'Weak Outlook',color: 'red',data:
[{
x: 40,
y:10,
ticker:'Michael Kors: (KORS)',
info: 'Outlook roughly inline<br>1Q Revenue below street expectations', hover:'Guidance slightly below consensus<br>1Q Revenue to disappoint<br>read more'
},
{
x: 20,
y:50,
ticker:'Shares to sell off on earnings',
info:'Data implies that shares, after management releases Q1 guidance, will...<br><br>read more'
},
{
x:0,y:0,ticker:'Zynga: (ZNGA)'
},
{
x:3,y:4,ticker:'Avid: (AVID)'
},
{
x:4,y:10,ticker:'JCPenny: (JCP)'
},
{
x:6,y:25,ticker:'Deckers Outdoor: (DECK)'},
{
x:0,y:100,ticker:'Nutrisystem Corp: (NTRI)'
},
]}],
and here is the function that is not working, notice that I'm passing event and series as parameters, and I'm using "series.name" to try to get the name of the series... which doesnt seem to be working
click: function(event,series)
{
xmlhttp.open("GET","/s.php?o="+event.point.ticker+"&q="+event.point.y+"&r="+event.point.x+"&s="+event.point.info+"&t="+series.name+"&u="+event.point.str5+"&v="+event.point.str6,true);
You want event.point.series.name Each point holds a reference to its parent series.
Series API
Point API
Really simple question but I can't find an answer. I know how to do this in regular javascript and I know how to do this in jquery. Right now if I have this:
var states = [{"name":"alaska","id":1},{"name":"alabama","id":2];
Is there an YUI based method to push that into a select box, to set the selected item, to get the selected item back? If so, where's the online example? If not I'll just use javascript.
Yes, there is. You can do something like this:
var buttonMenu = [
{ text: "Alaska", value: 1, onclick: { fn: onStateClick } },
{ text: "Alabama", value: 2, onclick: { fn: onStateClick } },
...];
.. and then use this in a YUI menu button configuration:
var statesButton = new YAHOO.widget.Button({ type: "menu", label: "Alabama", name: "mymenubutton", menu: buttonMenu, container: containerElement });
More details on the YUI button example page.
Hope that helps.