Anyone know how looping json data INSIDE varibale?? Example
var data = {
$.each(data, function(i, item) {
console.log(data[i].PageName);
});
labels: [dateLoop],
datasets: [{
}]
};
Well that code is didnt work for me. I want looping inside that varibale. Anyway this coding for Chart.js
Why i need looping?? cuase i have filter buyer and date range, if i choose 3 buyer, and date range from january 2016 to May 2016. On data will show data buyer, each data buyer will have value from date range. Exmaple data json
data [Buyer 1] : ["167404", "129770", "113598", "127301", "156868", "634789", "242188", "166312", "169418"];
data [Buyer 2] : ["9580", "22250", "3500", "5558", "254556", "268500", "77750", "69850", "55"];
So what i need how too looping inside variable?? Sorry my bad languange.
Edit probbaly someone dont know what i mean,
example i have pick 2 buyer, Buyer A (Json["data"][0]) and Buyer B (Json["data"][1]) and each that buyer have value (wich this value order by month if i pick January and May, it will show "222","555")
and the code i mean like this :
var data = {
labels: [dateLoop], #ignore this
datasets: [{ label : (Json["data"][0])
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [(value orderby month in Json["data"][0]]
},
{ label : (Json["data"][1])
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [(value orderby month in Json["data"][1]]
}
]
};
That i want it. But i sue each make error. :/
try this, you need 2 loop first loop is for keys and second is for the values inside array
var data = {
'Buyer 1': ["167404", "129770", "113598", "127301", "156868", "634789", "242188", "166312", "169418"],
'Buyer 2': ["9580", "22250", "3500", "5558", "254556", "268500", "77750", "69850", "55"]
}
for(var key in data) {
for (var x in data[key]) {
console.log(data[key][x]);
}
}
Related
I have an ASPX dropdown list, that is used in a web service call to generate a graph.
If I manually enter the drop down list entries, the code executes fine, however if I dynamically generate the dropdown list from the SQL server the web service call fails.
Here is how I am generating the dropdown list:
//Populate Customers DDL
string constr = ConfigurationManager.ConnectionStrings["Indigo2.Properties.Settings.ConstrNW"].ConnectionString;
DataTable customers = new DataTable();
using (SqlConnection con = new SqlConnection(constr))
{
try
{
SqlDataAdapter adapter = new SqlDataAdapter("SELECT DISTINCT custid from [Indigo].[dbo].[invoices] WHERE custid='ACC001'", con);
adapter.Fill(customers);
//ddlCustA.DataSource = customers;
//ddlCustA.DataTextField = "custid";
//ddlCustA.DataValueField = "custid";
//ddlCustA.DataBind();
}
catch (Exception ex)
{
// Handle the error
}
}
Here is the HTML
<asp:DropDownList ID="ddlCustA" runat="server" Height="17px" Width="100px" AutoPostBack="True">
</asp:DropDownList>
This is where I call the Web Service
//Code for graph (all in document ready)
$("#btn_line_chart").on('click', function () {
var CustA = $("#ddlCustA").val();
var CustB = $("#ddlCustB").val();
var getYear = $("#ddlYear").val();
var jsonData = JSON.stringify({
custA: CustA,
custB: CustB,
year: getYear
});
$.ajax({
type: "POST",
url: "WebService1.asmx/getLineChartData",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(reponse) {
var aData = reponse.d;
var aLabels = aData[0];
var aDatasets1 = aData[1];
var aDatasets2 = aData[2];
var data = {
labels: aLabels,
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: aDatasets1
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: aDatasets2
}]
};
var ctx = $("#myChart").get(0).getContext('2d');
ctx.canvas.width = 750; // setting width of canvas
ctx.canvas.height = 400; // setting height of canvas
var lineChart = new Chart(ctx, {
type: "line",
data: data,
bezierCurve: false
});
}
function OnErrorCall_(repo) {
alert("Woops something went wrong, pls try later !");
}
});
If I manually choose the dropdown list options (like below), it works fine.
<select id="ddlCustA">
<option>ACC001</option>
</select>
When the dropdown list is generated from the SQL server, the web service call fails with the folowing error:
HTTP500: SERVER ERROR - The server encountered an unexpected condition
that prevented it from fulfilling the request. (XHR)POST -
https://localhost:44338/WebService1.asmx/getLineChartData
Any help greatly appreciated.
UPDATE: It seems to be a timing issue. If I add an alert just before the web service calls the ddlCustA variable, ddlCustA shows as "Undefined"
alert($("#ddlCustA").val());
In case it helps anyone else, my solution was the way I was calling the object from Javasctipt. The below code fixed it.
var CustA = document.getElementById('<%= ddlCustA.ClientID %>').value
Hi i want to make a chart for my project using chatjs. I have a users table and when user registered my site the registered time is datetime format like this 2018-03-02 10:35:25 . I want to make it with this chat DEMO
I need to write a php code to reveal the graph, like:
$months = array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
$monthvalues = array();
foreach ($months as $month) {
$monthvalues[$month] = 0;
}
$result = mysqli_query($db,"SELECT registerTime, count(*) FROM users group by WEEKDAY(registerTime)") or die(mysql_error($db));
while ($row = mysqli_fetch_array($result, MYSQL_NUM)) {
$monthvalues[$row[0]] = (int)$row[1];
}
and i am printing it like this
// Data
var data = {
labels: <?=json_encode($months);?>,
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: <?=json_encode(array_values($monthvalues));?>
}]
};
The query above gives me just one log report. I can not show it on the chart. I need an output that I can reflect on a weekly basis.
The problem is, I can not figure out how to do graphs with code. Could someone help me by giving an example in this matter please ?
the result should be data: [28, 48, 40, 19, 86, 27, 90] like this
january = 28, february = 48 , ...
If you want to return an array, you should use a GROUP BY, like this
SELECT COUNT(registerTime) as `count` FROM users WHERE DATE(registerTime) = CURDATE() GROUP BY MONTH(registerTime)
And you can add a month number in output to create labels
SELECT COUNT(registerTime) as `count`,MONTH(registerTime) as `month` FROM users WHERE DATE(registerTime) = CURDATE() GROUP BY MONTH(registerTime)
I'm creating a chart using the Chart.js library and it's working well. I'm using the .toBase64Image() function to generate a base 64 encoded string of the chart (png data url).
I can see this when I inspect the chart in my browser developer tools, e.g.:
data:image/png;base64,iVBORw0KGgoAAAA etc
I now need to call a URL to another application that will pass the data url as a parameter - I'm just stuck at how to get the data url as a parameter to pass to my URL that I will then call.
Here's my script as it currently stands:
var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [3, 2, 1, 5, 6, 8, 5]
},
]
};
window.onload = function() {
window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 1,
scaleStartValue: 0,
onAnimationComplete: function() {
document.getElementById("canvas").innerHTML = myRadar.toBase64Image();
theURL = "fmp://$/chartingFile?script=getChartToContainer¶m=";
window.location = theURL;
}
});
}
I need to append the "data:image/png;base64,iVBORw0KGgoAAAA" string to the 'theURL' variable but can't figure out how to get this as a string?
Managed to work this out as follows:
onAnimationComplete: function() {
document.getElementById("canvas").innerHTML = myRadar.toBase64Image();
var x = document.getElementById("canvas").innerHTML = myRadar.toBase64Image();
theParam = encodeURIComponent(x);
theURL = "fmp://$/chartingFile?script=getChartToContainer¶m=" + theParam;
window.location = theURL;
Not sure if it's optimal etc but it's working well so far.
I have this chart made with Chart.js.
var data = {
labels: ["", "", "", "2015-08-28", "2015-08-29", "2015-08-30", "2015-08-31", ],
websites: ["", "", "", "gamesoutletCrawler", "gamesoutletCrawler", "G2PLAY", "instantgaming", ],
datasets: [{
label: "Best price last 7 days",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [0, 0, 0, 34.5, 36.8, 37.3, 37.99, ]
}]
};
window.onload = function() {
var ctx = document.getElementById("chartkeys").getContext("2d");
window.myLine = new Chart(ctx).Line(data, {
responsive: true,
tooltipTemplate: "<%= data.websites[idx] %>",
scaleLabel: "<%= Number(value).toFixed(2).replace('.', ',') + ' €'%>"
});
}
On my tooltip template, I want to use values from data.websites but I don't know how to pass in the index for my tooltip array. This is not working:
<%= data.websites[idx] %>
idx is wrong, it's not the index the system is using. Any idea what I have to write here to show the index tooltip when you hover on the graph?
If I write <%= data.websites %>, it's showing me all the websites in the array, not the one hovered.
You can use a function instead of a template string
...
tooltipTemplate: function (d) {
return data.websites[data.labels.indexOf(d.label)]
},
...
Note that this requires the labels to be unique, or if there are duplicate labels that it not matter which one is active (for instance, in your data, the first 3 labels are the same but that won't cause any problems because the first 3 entries in the websites array too are the same. If they were different this method will not work)
In this fiddle when you toggle a serie the others reset to their inital values, instead of adding new values to themselves.
How to avoid this behaviour?
You need to store the current state of the data for each series before blanking or resetting the corresponding dataset in enableCheck. Then use this saved state.
Example for the SP dataset
Initialization of the state (spData). I also initialize the dataset (SP)
var spData = [1, 2, 3, 4, 5, 6, 7, 8]
var SP = {}
Saving the state (in enableCheck()) - I get the values from the actual data points
if (SP.data) currentChart.datasets.forEach(function (d) {
if (d.label === 'My First dataset') {
spData = d.points.map(function (e) {
return e.value
});
}
})
Using this saved state (in enableCheck())
SP = {
label: "My First dataset",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(220,0,0,1)",
pointColor: "rgba(220,0,0,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,0,0,1)",
data: spData
};
And if you want the new values to be inserted for the hidden series as well, update your data insertion statements in your setTimeout
var d = []
if (First) d.push(randomScalingFactor())
else {
spData.shift()
spData.push(randomScalingFactor())
}
if (Second) d.push(randomScalingFactor())
else {
ncData.shift()
ncData.push(randomScalingFactor())
}
if (Third) d.push(randomScalingFactor())
else {
spaData.shift()
spaData.push(randomScalingFactor())
}
Working fiddle - http://jsfiddle.net/Lsg37amf/