Develop Reference

Problem Rendering Multiple CanvasJS charts on one page

I have a page (stats.php) that calls php pages containing canvasjs scripts for rendering charts on them. I can get the pages (top_airlines.php and top_aircraft.php) that contain each individual chart to render, however, when I try to get them on the single stats.php page only one of them will actually render.
It utilizes JSON, which I am not at all familiar with and am using the example that was given to me by their help desk a couple of years ago. I've attempted to modify the code so that it should, in theory, load the chart. Again, they'll load on their independent pages it's just when I try to call them on a single page together that all code breaks loose.
I am curious to think that maybe it is related to the javascript code for
$(document).ready(function ()`
TOP AIRLINES (top_airlines.php)
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“blueShades2”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
$(document).ready(function () {
$.getJSON(“http://globe-trekking.com/vg/charts/top_airlines_data.php”, function (result) {
var chartAirlines = new CanvasJS.Chart(“top_10_airlines_chart”, {
animationEnabled: false,
colorSet: “blueShades2”,
toolTip:{content: “{name}”},
data: [
{
type: “bar”,
indexLabelFontSize: 22,
dataPoints: result
}
]
});
chartAirlines.render();
});
});
}
</script>
<div id=”top_10_airlines_chart” style=”width: 100%; height: 300px;”></div>
TOP AIRCRAFT (top_aircraft.php)
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“blueShades”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
$(document).ready(function () {
$.getJSON(“http://globe-trekking.com/vg/charts/top_aircraft_data.php”, function (result) {
var chartAircraft = new CanvasJS.Chart(“top_10_airplanes_chart”, {
animationEnabled: false,
colorSet: “blueShades”,
toolTip:{content: “{name}”},
data: [
{
type: “bar”,
indexLabelFontSize: 22,
dataPoints: result
}
]
});
chartAircraft.render();
});
});
}
</script>
<div id=”top_10_airplanes_chart” style=”width: 100%; height: 300px;”></div>
I'm calling them on the stats.php page by using the following located in a certain location on the stats.php page.

The issue seems to happen due to overriding of window.onload event. Changing it to jQuery ready / load should work fine in your case. Here is the sample project.
You can also try out the ways suggested in this stackoverflow thread.
$(document).ready(function () {
CanvasJS.addColorSet(“blueShades”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);
});
PS: dataPoints are hardcoded in sample-project.

Loading curvedText via JSON no longer works in fabricJS 1.7.3

I am using the excellent plugin for fabricjs, "curvedText" from https://github.com/EffEPi/fabric.curvedText
This works great, however, a recent update to fabricjs has rendered the plugin to stop loading via JSON. The following snippets demonstrate this.
Both the following snippets are exactly the same apart from the version of fabricJS being used.
1.7.2 version:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
1.7.3 version:
$(function ()
{
canvas = new fabric.Canvas('c');
var CurvedText = new fabric.CurvedText('CurvedText',
{
left: 100,top: 20,
textAlign: 'center',
fill: '#0000FF',radius: 150,
fontSize: 20,spacing: 20
});
canvas.add(CurvedText).renderAll();
$('#save').click(function() {
var design = JSON.stringify(canvas.toJSON());
canvas.clear();
canvas.renderAll();
canvas.loadFromJSON(design, function() {
console.log('loaded');
canvas.renderAll();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.js"></script>
<script src="//cdn.rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
<canvas id="c" width="400" height="160"></canvas><br/>
<button id="save">Save/Reload</button>
The 1.7.2. version works fine, the 1.7.3. version does not. The saving process seems fine, but when loading the JSON nothing seems to happen.
Looking at the release notes of 1.7.3 ( https://github.com/kangax/fabric.js/releases/tag/v1.7.3 ) it seems that a change to :
"Improvement: Better error managment in loadFromJSON #3586"
...may be responsible. Any ideas?
Additional
There are no console errors and no network errors. As stated the scripts are identical except the version of fabric being used. The JSON I am talking about is generated from fabric itself. This allows designs to be saved and loaded. Clicking the save/reload button generates the JSON which is then reloaded (as a test). The loading mechanism breaks when loading JSON containing curvedText items. No messages are presented in any way.

OK, finally tracked down the bug in fabric.curvedText.js. Well, the code in fabricjs's enlivenObjects function has changed from 1.7.2. to 1.7.3. causing curvedText objects to stop loading.
If one changes the fromObject code in fabric.CurvedText from:
fabric.CurvedText.fromObject=function (object)
{
return new fabric.CurvedText(object.text, clone(object));
};
to this:
fabric.CurvedText.fromObject=function (object, callback)
{
var newObject = new fabric.CurvedText(object.text, clone(object));
if(typeof callback !== "undefined")
callback(newObject, false);
else
return(newObject);
};
Then loading will now work. Hope this helps someone else!

ExtJs 5.1 - Ext.Panel with XML-Highlighting, editing, linenumbering capabilities

Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing.
I have searched through the web and found the Javascript API CodeMirror.
I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the Ext.Panel and also no line-numbers are seen:
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- codemirror imports -->
<script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
<link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
<script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var panel_1 = Ext.create('Ext.panel.Panel', {
frame:true,
id: 'panel_1_id',
title: 'panel_1',
padding: '10 10 10 10',
margin: '10 10 10 10',
autoScroll: true
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel_1],
autoScroll: true,
renderTo : Ext.getBody()
});
var myCodeMirror = CodeMirror(panel_1.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
});
</script>
</head>
<body>
</body>
</html>
So the following questions arise:
1.) I thought about extending Ext.Component and somehow pack the CodeMirror object inside it?
Is this possible?
2.) Is it possible to adapt my little codeexample from above to align it correctly?

This can be solved with a few slight tweaks to your code.
The key point here is that the behaviour of CodeMirror will vary depending on the type of the first parameter you pass to the CodeMirror constructor. Passing a HTML element (as in your example) will result in the HTML DOM function appendChild() being called. And this is why there is a large space before your new element, because it is being appended after the body of the panel.
If you pass in a function (acting as a callback) to the CodeMirror constructor then you will be returned with the HTML element that is the CodeMirror. Constructing the element this way enables you to replace the body element of the panel with the new HTML element (rather than appending).
This can be achieved by creating a simple function. The code changes you require are as follows....
Create a function to pass to CodeMirror constructor
var codeMirrorCallbackFunction = function(codeMirrorEl) {
var panelDom = panel_1.el.dom;
// the node at index 1 is the body (index 0 is panel header)
panelDom.replaceChild(codeMirrorEl, panelDom.childNodes[1]);
};
Create the CodeMirror object passing the function as 1st parameter
var myCodeMirror = CodeMirror(codeMirrorCallbackFunction, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
Update the padding of the Panel
// without this change the panel header and codemirror html overlap
padding: '25 10 10 10'

You are doing good, you only need to add a property like
var myCodeMirror = CodeMirror(panel.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>",
lineNumbers: true
});

jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts

I use EnhancedLegendRenderer plugin for my jqPlot charts, however I am unable to get it working for Pie charts.
If I click on the legend labels, they don't show or hide series. Here is jsFiddle example.
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberColumns: 3,
seriesToggle: true
},
show: true
}
Has anybody came across and found a solution?

The answer of Merrily somehow correct, ZingChart looks good and have such functionality out of the box, but jqPlot is free and open source.
I rewrote jqPlot Pie Chart plugins and now the Pie chart from your example will work. Here is my blog post with explanation what I changed.
Download these 2 files:
extendedPieRenderer.js (it replaces jqplot.pieRenderer.js)
enhancedPieLegendRenderer.js (it replaces
jqplot.enhancedLegendRenderer.js)
And use them like this code:
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="extendedPieRenderer.js"></script>
<script type="text/javascript" src="enhancedPieLegendRenderer.js"></script>
<script type="text/javascript">
...
var plot = $.jqplot('chart', data, {
seriesDefaults: {
renderer: $.jqplot.PieRenderer
},
legend: {
renderer: $.jqplot.EnhancedPieLegendRenderer
}
});
...
</script>
I also created this jsFiddle which you can open and verify that showing and hiding works: http://jsfiddle.net/19vzL5h2/1/

I'm not sure how tied to jqPlot you are, but many libraries have this sort of option baked in. Highcharts has it (and is free in most cases if that is your concern) and I saw it in AmCharts recently too.
It is also available through the ZingChart JavaScript charting library. I've made a demo with the toggle legend for you to try.
<html>
<head>
<script src="https://blog.pint.com/include_files/zingchart-html5-min.js"></script>
<script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>
<script>zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";</script>
<meta charset="utf-8">
<title>Pie chart with legend</title>
</head>
<div id="zc"></div>
<script>
var piedemo ={
"type":"pie",
"plot":{
"value-box":{
"text":"%v"
}
},
"series":[
{
"text":"Apples",
"values":[5]
},
{
"text":"Oranges",
"values":[8]
},
{
"text":"Bananas",
"values":[22]
},
{
"text":"Grapes",
"values":[16]
}
],
"legend":{
"header":{
"text":"Click an item to toggle"
},
"layout":"x4",
"marker":{
"type":"circle",
"size":4,
"border-color":"#333"
}
}
};
zingchart.render({
id: 'zc',
data: piedemo,
height: 400,
width: 400
});
</script>
</body>
</html>
I'm on the ZingChart team so if you have any questions on this demo, please feel free to reach out.

Titanium is not defined when attempting Titanium.UI.currentWindow using titanium appcelerator

When I run the app on the device I get no error (well nothing occurs at all) as there is no debug console but when I run the app in the browser I get "Titanium is not defined"
Is there a js file I need to include?
I got the camera code from here:
http://www.mindfiresolutions.com/Capture-Image-with-device-camera-in-IPhoneAndroid-application-using-Titanium-1912.php
I call it from an html file from webview.
I created a new project from scratch and I get he same error. This is so frustrating:
in html:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0 maximum-scale=1.0; user scalable=0;">
<title>Notes</title>
<script language="JavaScript" type="text/javascript">
function play(locid) {
Ti.App.fireEvent('play', {
locid : locid
});
}
</script>
</head>
<body>
<a id="Home" onclick ="play(125)" title = "" > hello </a>
</body>
</html>
in app.js:
Ti.App.addEventListener('play', function(e)
{
alert(e.locid);
});
Uncaught ReferenceError: Ti is not defined in the HTML file!!!

That code has a number of things preventing it from working as a standalone app.js. I want to address a couple of the concerns brought up by it, and then I'll directly address the app.js so you can get on your way.
First, "Ti.UI.currentWindow" is how you get a reference to a window in a situation like this:
In the file "app.js", you have:
var win = Ti.UI.createWindow({
url: 'win.js'
});
win.open();
And in "win.js", you have:
var win = Ti.UI.currentWindow;
win.add(Ti.UI.createLabel({
text: 'Hello, world!', textAlign: 'center',
color: '#000'
}));
But structuring your apps like that isn't the recommended approach anymore. If you're starting fresh, start right -- with Alloy. http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start
If all you really care about is getting the example to work, below is the code updated to work:
//Define the current window
var myWin = Ti.UI.createWindow({
backgroundColor: 'white'
});
//Define the button to activate camera
var cameraBtn = Ti.UI.createButton({
title: 'Click to activate Camera',
top: 10 //Set the button position on the screen
});
cameraBtn.addEventListener('click', function () {
//Activate camera
Ti.Media.showCamera({
success: function (event) {
//Holds the captured image
var capturedImg = event.media;
// Condition to check the selected media
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
//Define an image view with captured image
var imgView = Ti.UI.createImageView({
left: 10,
width: 250,
height: 250,
image: capturedImg //Set captured image
});
//Add the image to window for displaying
myWin.add(imgView);
}
},
cancel: function () {
//While cancellation of the process
},
error: function (error) {
// If any error occurs during the process
}
});
});
myWin.add(cameraBtn);
myWin.open();

use "Titanium" instead of "Ti" in WebView HTML code.