Canvas JS causing issues - javascript

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.

Related

Unable to draw linechart in react-native using canvas.js

Here I am using WebView in react-native to draw line chart in react-native, but its not coming.. below is the full code ..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){ var chart = new CanvasJS.Chart(chartContainer{title:{text: Earthquakes - per month}, data: [{type: line,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 },{ 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 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }}
/>
);
}
}
Thanks

Use this code..
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class SensorDetails extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){var chart=new CanvasJS.Chart(chartContainer,{title:{text: 'Abhigyan Data'}, data: [{type: 'pie',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 },{ 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 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }} />
);
}
}

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>

Dynamically add data to series in Highcharts

I´m trying to update my highchart serie appending new data.
My series look like:
series: [{
name: 'Serie1',
data:[
{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 00, 00),
high: Date.UTC(2013, 07, 03, 4, 0, 0),
cliente:[{nombre:'Pepe',
Partida:'11111',
Bandejas:'35'},
{nombre:'Pepe1',
Partida:'222',
Bandejas:'50'}]
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 5, 0, 0),
high: Date.UTC(2013, 07, 03, 9, 0, 0)
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}
]
},
{
name: 'Serie2',
data:[
{
x: 2,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 2, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 11, 0, 0),
high: Date.UTC(2013, 07, 03, 18, 0, 0)
}
]
}
]
When I click a button I want to append new data inside "Serie 1".
I´ve tried chart.series[pos].setData(newdata); and it works, but delete all the previous data.
I´ve also tried using chart.series[pos-1].data.push(newdata); but it doesn´t work.
Any solution?

You can use addPoint function which allows to add new data.

Google Column Chart Missing data

i have been googling a lot of time, but did not find any working solution, so decided to ask a question. Why i can't see my firs data_row element 99.00 date?
heres the code how i init all script:
var colors = [ '#F1A504', '#80CE61', '#0BA3E4', '#7E4CCF' ];
var gChart = {
table_data : {
1: 'Reguliavimas "į viršų" kiekis',
2: 'Reguliavimas "žemyn" kiekis',
3: 'Reguliavimas "į viršų" kaina',
4: 'Reguliavimas "žemyn" kaina'
},
data_row : [
[ new Date( 2013, 3, 17, 0, 00, 00 ), 0.00, 99.00, 0.00, 40.00],
[new Date( 2013, 3, 17, 1, 00, 00 ), 0.00, 11.00, 0.00, 40.00],
[new Date( 2013, 3, 17, 2, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 3, 00, 00 ), 0.00, 27.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 4, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 5, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 6, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 7, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 8, 00, 00 ), 0.00, 42.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 9, 00, 00 ), 0.00, 30.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 10, 00, 00 ), 0.00, 20.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 11, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 12, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 13, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 14, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 15, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 16, 00, 00 ), 0.00, 46.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 17, 00, 00 ), 0.00, 90.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 18, 00, 00 ), 0.00, 90.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 19, 00, 00 ), 0.00, 108.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 20, 00, 00 ), 0.00, 75.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 21, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 22, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 23, 00, 00 ), 0.00, 0.00, 0.00, 0.00 ]
],
lang : 'lt',
maxV : 108.00,
minV : 0.00,
chartType: 1,
dataGroup: 'H'
};
function drawChart( id, table_data, data_row, lang, chartType, colors ){
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('datetime', 'Time');
for ( var i = 1; i <= objCount( table_data ); i++ ) {
dataTable.addColumn( 'number', table_data[i] );
}
var dataView = new google.visualization.DataView( dataTable );
var options3 = {
width: 670,
height: 380,
fontSize: 11,
colors: colors,
backgroundColor: 'transparent',
legend: 'none',
chartArea: {
top: 5,
left: 50,
width: 647,
height: 351
},
hAxis: {
textStyle: { color: "#9a9fa3" },
baselineColor: "#b1b3b6",
gridlines: {
color: "transparent",
count: 28
},
maxAlternation: 26,
format: gChart.dataGroup
},
vAxis: {
baselineColor: "#b1b3b6",
gridlines: {
color: "#eff0f1",
count: 8
},
textStyle: { color: "#9a9fa3" }
}
};
var chart = new google.visualization.ColumnChart( document.getElementById( id ) );
dataTable.addRows( data_row );
chart.draw( dataView, options3 );
}
/* LOADING GCHARTS */
google.load( "visualization", "1", { packages:["corechart"], language: gChart.lang } );
google.setOnLoadCallback(function() {
drawChart( 'chart', gChart.table_data, gChart.data_row, gChart.lang, gChart.chartType, colors );
});

Please see my answer at Google Visualization Chart Not Showing First Column
Essentially, you need your DataView to format the first column of the table as a string.
After:
var dataView = new google.visualization.DataView( dataTable );
Insert:
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3, 4]);

Categories