I'm using google charts with this code:
<?php
function testing($chartId, $chartFunc, $chartTitle, $xAxisTitle, $chartData, $chartType)
{
$pageMeat =<<<EOD
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback($chartFunc);
function $chartFunc() {
var data = google.visualization.arrayToDataTable($chartData);
var options = {
title: '$chartTitle',
hAxis: {title: '$xAxisTitle', titleTextStyle: {color: 'red'}}
};
EOD;
if($chartType == "line") {
$pageMeat .=<<<EOD
var chart = new google.visualization.LineChart(document.getElementById('$chartId'));
EOD;
}
else if($chartType == "pie") {
$pageMeat .=<<<EOD
var chart = new google.visualization.PieChart(document.getElementById('$chartId'));
EOD;
}
else {
$pageMeat .=<<<EOD
var chart = new google.visualization.ColumnChart(document.getElementById('$chartId'));
EOD;
}
$pageMeat .=<<<EOD
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="$chartId" style="width: 900px; height: 500px;"></div>
</body>
</html>
EOD;
echo $pageMeat;
}
$gChartId = "vertColumns";
$gChartFn = "columnChart";
$gChartTitle = "Company Performance";
$gXAxisTitle = "Year";
$gChartData[] = array('Year', 'Sales', 'Expenses');
$gChartData[] = array('2004', 1000, 400);
$gChartData[] = array('2005', 1170, 460);
$gChartData[] = array('2006', 660, 1120);
$gChartData[] = array('2007', 1030, 540);
testing($gChartId, $gChartFn, $gChartTitle, $gXAxisTitle, json_encode($gChartData), "column");
?>
It works with line, pie and columncharts but when i try to use a table chart https://developers.google.com/chart/interactive/docs/gallery/table
It doesn't seem to work, how can i use a array with this table chart?
Thank you for help
you need to include the table package...
packages:["corechart", "table"] // <-- include table package here
Related
I want to display a drop-down list of buttons in the left panel, one button for one "need".
Later, the user will be able to add a new need-button to the list.
I use a panel with "itemArray" binding.
But the button is not displayed when sentence: addNeed("My new need"); is executed.
I checked with the "dynamicPorts sample but I can't understand why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="minimumCode" content="width=device-width, initial-scale=1">
<title>minimumCode</title>
<meta name="description" content="Iso prototype Leon Levy" />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<span id="diagramEventsMsg" style="color: red"></span>
<script id="code">
var ellipseStrokeWidth=3;
var ellipseWidth = 80;
var ellipseHeight = 25;
var myFont = "16px sans-serif";
var myFontMedium = "23px sans-serif";
var myFontLarge = "30px sans-serif";
var needWidth = 170;
var needHeight = 20;
var needStrokeWidth = 0;
var needColor = 'purple';
var portSize = new go.Size(8, 8);
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myBannerNeeds =
$(go.Diagram, "myBannerNeedsDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position
})}
);
myBannerNeeds.nodeTemplate =
$(go.Node,
$(go.Panel, "Vertical", //needs list buttons
{ alignment: new go.Spot(0, 0), row: 0, column: 0},
new go.Binding("itemArray", "needsDataArray"),
{ itemTemplate:
$(go.Panel,
$(go.Shape, "Rectangle",
{ stroke: "red", strokeWidth: 2,
height: 30, width: 30}
),
$(go.TextBlock, { text: "...", stroke: "gray" },
new go.Binding("text", "key"))
) // end itemTemplate
}
) // end Vertical Panel
);
// Add a button to the needs panel.
function addNeed(newNeedName) {
myDiagram.startTransaction("addNeed");
var button = $('Button',
$(go.Shape, "Rectangle",
{ width: needWidth, height: needHeight, margin: 4, fill: "white",
stroke: "rgb(227, 18, 18)", strokeWidth: needStrokeWidth}),
$(go.TextBlock, newNeedName, // the content is just the text label
{stroke: needColor, font: myFont }),
{click: function(e, obj) { needSelected(newNeedName); } }
);
var needsNode = needsDataArray; //document.getElementById("ForNeeds");
if (needsNode) { showMessage("needsNode is true; " + button)}
else {showMessage("needsNode is false")};
myDiagram.model.insertArrayItem(needsNode, -1, button);
myDiagram.commitTransaction("addNeed");
}// end function addNeed
var needsDataArray = [];
var linksNeedsDataArray = []; // always empty
myBannerNeeds.model = new go.GraphLinksModel( needsDataArray, linksNeedsDataArray);
myDiagram.grid.visible = true;
myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true;
addNeed("My new need");
function needSelected(e,obj) {
alert("e:" + e + "; obj:" + obj + ' selected')
}; //end function flowTypeSelected
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
}// end function init
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ; height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="ForNeeds">
<div id="myBannerNeedsDiv" style="display: inline-block; width: 200px; min-height: 400px; background: whitesmoke; margin-right: 0px; border: solid 1px purple;">
</div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
</div>
</div>
</body>
</html>
Here's a basic demonstration of what I think you are asking for:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" }),
$(go.Panel, "Vertical",
$(go.TextBlock,
{ margin: 4 },
new go.Binding("text")),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "buttons"),
{
itemTemplate:
$("Button",
$(go.TextBlock, new go.Binding("text", "")),
{
click: function(e, button) {
alert(button.data);
}
}
)
}
)
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", buttons: ["one", "two"] },
{ key: 2, text: "Beta", buttons: ["one"] }
],
[
{ from: 1, to: 2 }
]);
}
function test() {
myDiagram.commit(function(diag) {
diag.selection.each(function(n) {
if (n instanceof go.Node) {
diag.model.addArrayItem(n.data.buttons, "another");
}
})
})
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Test</button>
</body>
</html>
Select a Node and then click the HTML "Test" Button. It will add an item to the node's data.buttons Array, which causes a copy of the Panel.itemTemplate to be added to that Panel. In this case, that item template is just a GoJS "Button" which when clicked calls alert with the value of the item, a string.
Note how the value added to the JavaScript Array in the data is just a simple object -- in this case just a string, although it is commonplace to have each Array item be a JavaScript Object with various properties. I think your problem is that you are trying to add GraphObjects to the Array. That's a no-no -- you should not be mixing the Diagram's GraphObjects with the Model data.
do you have a type of "half gauge", that show the trends on top of it?like in this picture:enter image description here
For business purpose, so we are open to buy the licence
Yes, you can create the required chart with AnyChart library. We have prepared a similar sample, you can check it below.
For purchasing AnyChart, please, contact us by email - sales#anychart.com
var data = [45, 67, 56];
var axisMaximum = 100;
data.push(axisMaximum);
var dataSet = anychart.data.set(data);
anychart.onDocumentReady(function () {
var stage = anychart.graphics.create("container");
var circularGauge = anychart.gauges.circular();
circularGauge.data(dataSet);
circularGauge.fill('#fff')
.stroke(null)
.padding(0)
.startAngle(270)
.sweepAngle(180);
var circularAxis = circularGauge.axis().radius(100).width(1).fill(null);
circularAxis.scale()
.minimum(0)
.maximum(axisMaximum);
circularAxis.labels().enabled(false);
circularAxis.ticks().enabled(false);
circularAxis.minorTicks().enabled(false);
circularGauge.bar(0).dataIndex(0)
.radius(100)
.width(15)
.fill('red')
.stroke(null)
.zIndex(5);
circularGauge.bar(1).dataIndex(3)
.radius(100)
.width(15)
.fill('#cecece')
.stroke(null)
.zIndex(3);
// marker
circularGauge.marker(0)
.axisIndex(0)
.dataIndex(1)
.size(7)
.stroke(null)
.fill('blue')
.type("triangle-down")
.position("outside")
.radius(108);
// marker
circularGauge.marker(1)
.axisIndex(0)
.dataIndex(2)
.size(7)
.stroke(null)
.fill('green')
.type("triangle-down")
.position("outside")
.radius(108);
var circularLabel0 = circularGauge.label(0);
circularLabel0
.enabled(true)
.anchor('center-bottom')
.useHtml(true)
.hAlign("center")
.text("<p style='color:red; font-size:20'>30 %</p><br>" +
"<p style='color:black; font-size:20; text-decoration:overline;'>% of Gross sales</p>");
var circularLabel1 = circularGauge.label(1);
circularLabel1
.enabled(true)
.anchor('center-top')
.padding(15)
.fontSize(20)
.fontColor('black')
.text('Product 1.1');
var circularTitle = circularGauge.title();
circularTitle.enabled(true)
.text('Division 1')
.fontColor('black')
.fontSize(25);
circularGauge.container(stage).draw();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-circular-gauge.min.js"></script>
<div id="container"></div>
I am new to angularjs and I would like to understand what the directives do but I can't find a tutorial with different example by complexity and I was curios if I could move the following code in a directive.
This is my javascript file(controller.js):
function TestCtrl(){
var json = {
id:"judge_id",
name:"Test",
children: [ {
id:"filter_1",
name:'Filter 1',
children:[{id:"case_1",name:"CaseA",children:[]},{id:"case_2",name:"CaseB",children:[]},{id:"case_3",name:"CaseC",children:[]}]
},
{
id:"filter_2",
name:'Filter 2',
children:[]
},
{
id:"filter_3",
name:'Filter 3',
children:[]
},
{
id:"filter_4",
name:'Filter 4',
children:[]
},
{
id:"filter_5",
name:'Filter 5',
children:[]
},
{
id:"filter_6",
name:'Filter 6',
children:[]
}
]
};
var rgraph = new $jit.RGraph({
//Where to append the visualization
injectInto: 'infovis',
background: {
CanvasStyles: {
strokeStyle: '#555'
}
},
//Add navigation capabilities:
//zooming by scrolling and panning.
Navigation: {
enable: true,
panning: true,
zooming: 10
},
//Set Node and Edge styles.
Node: {
color: '#ddeeff'
},
Edge: {
color: '#C17878',
lineWidth:1.5
},
//Add the name of the node in the correponding label
//and a click handler to move the graph.
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
domElement.onclick = function(){
rgraph.onClick(node.id, {
onComplete: function() {
Log.write("done");
}
});
};
},
//Change some label dom properties.
//This method is called each time a label is plotted.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#ccc";
} else if(node._depth == 2){
style.fontSize = "0.7em";
style.color = "#494949";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
}
});
//load JSON data
rgraph.loadJSON(json);
//trigger small animation
rgraph.graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(-200, -200);
});
rgraph.compute('end');
rgraph.fx.animate({
modes:['polar'],
duration: 2000
});
}
ANd my html file is like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<script src="..js/controller.js"></script>
<link type="text/css" href="../base.css" rel="stylesheet" />
<title></title>
</head>
<body onload="TestCtrl();">
<div id="center-container">
<div id="infovis"></div>
</div>
</body>
</html>
Thanks
Sabbu
I am trying to create a map which allows a person to enter a zip code and a radius and will draw a radius around that point. The codeAddress function seems to work, but the drawCircle function is not working. Perhaps someone can pinpoint the error
see code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</script>
<script type= "text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function drawCircle() {
var radius=document.getElementById("radius").value;
geocoder.geocode( { 'address': address}, function(results, status){
if (status==google.maps.GeocoderStatus.OK){
var latlng=results[0].geometry.location;
var latitude=latlng.lat();
var longitude=latlng.lng();
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
// Degrees to radians
var d2r = Math.PI / 180;
// Radians to degrees
var r2d = 180 / Math.PI;
// Earth radius is 3,963 miles
var cLat = (radius / 3963) * r2d;
var cLng = cLat / Math.cos(latitude * d2r);
//Store points in array
var points = [];
// Calculate the points
// Work around 360 points on circle
for (var i=0; i < 360; i++) {
var theta = Math.PI * (i/16);
// Calculate next X point
circleX = longitude + (cLng * Math.cos(theta));
// Calculate next Y point
circleY = latitude + (cLat * Math.sin(theta));
// Add point to array
points.push(new GPoint(circleX, circleY));
};
//Add points to map
var sColor=003F87;
var stroke=.5;
map.addOverlay(new GPolyline(points, sColor, stroke));
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:460px;
-moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-style:solid ;-moz-outline-color:#9FB6CD;
-moz-outline-width:10px;"></div>
<div>
Zip Code: <input id="address" type="textbox" value="">
Radius:<input id="radius" type="textbox" value="">
<input type="button" value="Find" onclick="codeAddress() ">
<input type="button" value="Draw Radius" onclick= "drawCircle() ">
</div>
</body>
</html>
How can I horizontally expand a combobox pull-down display?
My actual data is: ARAMEX1234
But the pull-down display only shows: ARAMEX123
I need to support the following browsers: IE 6, 7, 8.
I tested it using Firefox and it works out of the box. However, my application will be run on IE and never on FF.
Here is the code (jsp file content):
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
This is a well-known bug in IE. You can fix it by temporarily resizing the select input on mouseover or on focus as described in the following article: Select Cuts Off Options In IE (Fix)
In your specific example, the code might look like this:
$("#rowed5 select").live({
focus: function () {
$(this).
data("origWidth", $(this).css("width")).
css("width", "auto");
},
blur: function () {
var $this = $(this);
$this.css("width", $this.data("origWidth"));
}
});