We Keep Coding

Pushing an array into an object Javascipt

I am trying to develop a chart with chartJS.But my question is about basic question about javascript.
My html code is
<div class="static-spline-chart-1" data-points='[
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
] '></div>
<div class="static-spline-chart-1" data-points='[
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
] '></div>
And Js code is:
var StaticSplineChartOptions = {
backgroundColor: "transparent",
axisY: {
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFontSize:0,
margin:-20,
},
axisX: {
labelFontSize:0,
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
},
tickThickness: 0,
}
function RenderStaticSplineChart(className,options) {
var charts = [];
var chartClassElements = document.getElementsByClassName(className);
for (var i = 0; i < chartClassElements.length; i++) {
var dataPoints = chartClassElements[i].data('points');
options.push({
data: [{
color: '#fff',
type: "spline",
markerSize: 0,
dataPoints: dataPoints,
}]
});
charts.push(new CanvasJS.Chart(chartClassElements[i], options));
charts[i].render();
}
}
RenderStaticSplineChart("static-spline-chart-1", StaticSplineChartOptions);
My objective is to make StaticSplineChartOptions like the following object
var StaticSplineChartOptions = {
backgroundColor: "transparent",
axisY: {
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFontSize:0,
margin:-20,
},
axisX: {
labelFontSize:0,
lineThickness: 0,
includeZero: false,
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
},
tickThickness: 0,
data: [{
color: '#fff',
type: "spline",
markerSize: 0,
dataPoints: [
{ x: new Date(2017, 0, 3), y: 650 },
{ x: new Date(2017, 0, 4), y: 700 },
{ x: new Date(2017, 0, 5), y: 710 },
{ x: new Date(2017, 0, 6), y: 658 },
{ x: new Date(2017, 0, 7), y: 734 },
{ x: new Date(2017, 0, 8), y: 963 },
{ x: new Date(2017, 0, 9), y: 847 },
{ x: new Date(2017, 0, 10), y: 853 },
{ x: new Date(2017, 0, 11), y: 869 },
{ x: new Date(2017, 0, 12), y: 943 },
{ x: new Date(2017, 0, 13), y: 970 },
{ x: new Date(2017, 0, 14), y: 869 },
{ x: new Date(2017, 0, 15), y: 890 },
{ x: new Date(2017, 0, 16), y: 930 }
]
}]
}
But i am getting such an error jquery.js:2 Uncaught TypeError: chartClassElements[i].data is not a function .
How i can get data attribute of that class in for loop? and how i get that above type of objects after getting that data?

change
chartClassElements[i].data('points')
to
chartClassElements[i].dataset.points
in the RenderStaticSplineChart function

instead of chartClassElements[i].data('points')
try
chartClassElements[i].attr('data-points')
but you still have a problem with the rest of the code. the return of the above code is not in the array. its a simple text. you may put those data-points in html with some backendish language. try jsonify or serialize it. so after when you read it with js, by simply de serialize or parsing json, you can have the real array back

Insert python object in the Graphs javascript dataobject

I am working on the Python Django project and have added my HTML in the template folder. Now one of my page needs to render a graph. The data set of the graph is generated from the database and passed to the html.
For a simple graph I have obtained the following code from HERE
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainerSet1",
{
theme: "theme1",
title:{
text: "Restart Count PerDay"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "Date"
},
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
But now I am not able to feed custom data from the python view.
I tried doing the following:
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: {{myobjectforData}}
}
Also,
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: "{{myobjectforData}}""
}
I am okay to share more code from my python django template html file.

Canvas JS causing issues

I am creating a line graph in canvas js. It has the following dataset
dataPoints: [//array
{x: new Date(Date.UTC (2012, 00, 1, 1,0) ), y: 26 },
{x: new Date( Date.UTC (2012, 00, 1,2,0) ), y: 38 },
{x: new Date( Date.UTC(2012, 00, 1,3,0) ), y: 43 },
{x: new Date( Date.UTC(2012, 00, 1,4,0) ), y: 29},
{x: new Date( Date.UTC(2012, 00, 1,5,0) ), y: 41},
{x: new Date( Date.UTC(2012, 00, 1,6,0) ), y: 54},
{x: new Date( Date.UTC(2012, 00, 1,7,0) ), y: 66},
{x: new Date( Date.UTC(2012, 00, 1,8,0) ), y: 60},
{x: new Date( Date.UTC(2012, 00, 1,9,0) ), y: 53},
{x: new Date( Date.UTC(2012, 00, 1,10,0) ), y: 60}
]
}
]
I understand the 1,2,3 parameters in Date.UTC() but I don't understand the 4th and 5th parameters. What are these? I am using
http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/date-time-axis/
Under the heading Converting in Local Time

Date.UTC() can be under this form:
Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])
so in your example:
{x: new Date(Date.UTC (2012, 00, 1, 1,0) ), y: 26
2012 is the year,
00 is the month,
1 is the day,
1 is the hour,
0 is the minute.
Please notice that only year and month are needed while all other parameters are optional.

convert axisX date to text in Html5 5 line chart

convert x-axis date to text in Html5 5 line chart, currently on x-axis 'jan,feb....' appearing . want to display text like subject name .Here is the refrence site is http://canvasjs.com/html5-javascript-line-chart/
$(function () {
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "Line Chart"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
});

You need to put the label key with value to the objects. Here is a jsFiddle.
dataPoints: [{
x: new Date(2012, 00, 1),
y: 450,
label: '2012-00-01'
}, {
x: new Date(2012, 01, 1),
y: 414,
label: '2012-01-01'
}, {
x: new Date(2012, 02, 1),
y: 520,
label: '2012-02-01',
indexLabel: "highest",
markerColor: "red",
markerType: "triangle"
}, {
x: new Date(2012, 08, 1),
y: 410,
label: '2012-08-01',
indexLabel: "lowest",
markerColor: "DarkSlateGrey",
markerType: "cross"
}, {
x: new Date(2012, 09, 1),
y: 500,
label: '2012-09-01'
},

How to assign a piece of javascript code to a variable and display it in textarea?

So far I have tried a code, which is a assigning a piece of javascript code and displaying it into with id="myCodeArea". But its not displaying in proper format as I am using JSON.stringify for converting the code in JSON I want code in original form. Can anyone help how to achieve it?
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>

Maybe this is a way for you to do the editing (stripped your data items a little) ...
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: "2012-00-01", y: 1352 },
{ x: "2012-01-01", y: 1514, indexLabel: "Exams" },
{ x: "2012-02-01", y: 1321 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>
... and then when you execute the chart object through your method you do the date parsing something like this:
var some_var = new Date(chart.data[i].dataPoints.x);
If you still need to embed the function itself, here is one way how to embed functions in a string
// function name and parameters to pass
var fnstring = "runMe";
var fnparams = [1, 2, 3];
// find object
var fn = window[fnstring];
// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);
Src: http://www.sitepoint.com/call-javascript-function-string-without-using-eval/

I changed code xyz.textContent = JSON.stringify(chart, null, 4);
Here 4 is number of spaces you want.
Hope you are expecting this.
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart, null, 4);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>