In Google Line Chart how do you make a series line dashed?
For example the red line (called "Row B") in the screenshot below?
Below is my very simple test code, just open it in a browser and it will work instantly.
Please note that the usual suggestion to add certainty role:
{"p":{"role":"certainty"},"label":"Dashed","type":"boolean"}
doesn't help here, because it would make dashed (parts of) the both lines (the rows "A" and "B").
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"rows":[
{"c":[{"v":"C"},{"v":-43},{"v":-42}]},
{"c":[{"v":"D"},{"v":-49},{"v":-39}]},
{"c":[{"v":"E"},{"v":-49},{"v":-48}]},
{"c":[{"v":"F"},{"v":-50},{"v":-49}]},
{"c":[{"v":"G"},{"v":-57},{"v":-56}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"Row A","type":"number"},
{"p":{"role":"data"},"label":"Row B","type":"number"}]};
function drawCharts() {
var x = new google.visualization.DataTable(data);
var options = {
title: 'How to make red line dashed?',
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('test'));
chart.draw(x, options);
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Here is an example using the certainty role. Is there any reason why this doesn't work for you?
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawVisualization
});
var data = {
"rows": [
{"c": [{"v": "C"}, {"v": -43}, {"v": -42}, {"v": false}]},
{"c": [{"v": "D"}, {"v": -49}, {"v": -39}, {"v": false}]},
{"c": [{"v": "E"}, {"v": -49}, {"v": -48}, {"v": false}]},
{"c": [{"v": "F"}, {"v": -50}, {"v": -49}, {"v": false}]},
{"c": [{"v": "G"}, {"v": -57}, {"v": -56}, {"v": false}]}],
"cols": [
{"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"},
{"p": {"role": "data"},"label": "Row A","type": "number"},
{"p": {"role": "data"},"label": "Row B","type": "number"},
{"p": {"role": "certainty"},"type": "boolean"}]
};
function drawVisualization() {
var x = new google.visualization.DataTable(data);
var options = {
title: 'How to make red line dashed?',
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(x, options);
}
Here is an example using the certainty role to make both lines dashed.
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawVisualization
});
var data = {
"rows": [
{"c": [{"v": "C"}, {"v": -43}, {"v": false}, {"v": -42}, {"v": false}]},
{"c": [{"v": "D"}, {"v": -49}, {"v": false}, {"v": -39}, {"v": false}]},
{"c": [{"v": "E"}, {"v": -49}, {"v": false}, {"v": -48}, {"v": false}]},
{"c": [{"v": "F"}, {"v": -50}, {"v": false}, {"v": -49}, {"v": false}]},
{"c": [{"v": "G"}, {"v": -57}, {"v": false}, {"v": -56}, {"v": false}]}],
"cols": [
{"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"},
{"p": {"role": "data"},"label": "Row A","type": "number"},
{"p": {"role": "certainty"},"type": "boolean"},
{"p": {"role": "data"},"label": "Row B","type": "number"},
{"p": {"role": "certainty"},"type": "boolean"}]
};
function drawVisualization() {
var x = new google.visualization.DataTable(data);
var options = {
title: 'How to make red line dashed?',
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(x, options);
}
Related
I am building Dash App that uses plotly scattermapbox graph object. In the current map view each point is represented as a circle. As a user zooms-in and out, I'd like to cluster the points and create groupings. Here's my code for reference.
import dash
from dash import dcc
import pandas as pd
df = pd.DataFrame({
'x': [1, 2, 3],
'Lat': [37.774322, 37.777035, 37.773033],
'Long': [-122.489761, -122.485555, -122.491220]
})
layout = html.Div(
dcc.Graph(id="map"),
dcc.Input(id="inp")
)
#app.callback(
Output('map','figure'),
Input('inp','value')
)
def fin(val):
# do something
data = []
data.append({
"type": "scattermapbox",
"lat": df["Lat"],
"lon": df["Long"],
"name": "Location",
"showlegend": False,
"hoverinfo": "text",
"mode": "markers",
"clickmode": "event+select",
"customdata": df.loc[:,cd_cols].values,
"marker": {
"symbol": "circle",
"size": 8,
"opacity": 0.7,
"color": "black"
}
}
)
layout = {
"autosize": True,
"hovermode": "closest",
"mapbox": {
"accesstoken": MAPBOX_KEY,
"bearing": 0,
"center": {
"lat": xxx,
"lon": xxx
},
"pitch": 0,
"zoom": zoom,
"style": "satellite-streets",
},
}
return ({'data': data, 'layout': layout})
try using plotly.graph_objects.scattermapbox.Cluster. Hope this helps:
from dash import dcc, html, Dash, Output, Input
import pandas as pd
import plotly.graph_objects as go
app = Dash(__name__)
df = pd.DataFrame({
'x': [1, 2, 3],
'Lat': [37.774322, 37.777035, 37.773033],
'Long': [-122.489761, -122.485555, -122.491220]
})
#app.callback(
Output('map','figure'),
Input('inp','value')
)
def fin(val):
data = []
data.append({
"type": "scattermapbox",
"lat": df["Lat"],
"lon": df["Long"],
"name": "Location",
"showlegend": False,
"hoverinfo": "text",
"mode": "markers",
"clickmode": "event+select",
"customdata": df.loc[:,['Lat', 'Long']].values,
"marker": {
"symbol": "circle",
"size": 8,
"opacity": 0.7,
"color": "black"
},
"cluster": {'maxzoom': 14}
}
)
layout = {
"autosize": True,
"hovermode": "closest",
"mapbox": {
"bearing": 0,
"center": {
"lat": 37.774322,
"lon": -122.489761
},
"pitch": 0,
"zoom": 7,
"style": "open-street-map",
},
}
return ({'data': data, 'layout': layout})
app.layout = html.Div(
[dcc.Graph(id="map"),
dcc.Input(id="inp")]
)
if __name__ == '__main__':
app.run_server(debug=True)
Notice the added cluster parameters I added to data.
p.s - make sure you are using a new version of dash for this to work. I used the latest version - dash-2.7.1.
I'm trying to impliment a google chart like the no dependancies one shown here
To get this to work with my data I'm importing the data for the rows like so..
$.get('http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s', function (data2) {
console.log(data2);});
This pulls what I need... but how can I replace the data.addrows block with what I'm pulling in?
For reference, what I'm getting shown in the console is this;
['Task 1', 'Task 1','Team 1',new Date(2014 , 02, 01), new Date(2014 , 02, 10), null, 50, null],
['Task 2', 'Task 2','Team 2',new Date(2014 , 03, 01), new Date(2014 , 04, 01), null, 1, null]
So I pretty just need to find a way of getting this to "render" as part of my javascript.
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
$.get('http://http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s', function (data2) {
console.log(data2);});
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
first, recommend formatting the data as json, as found here...
{
"cols": [
{"label": "Task ID", "type": "string"},
{"label": "Task Name", "type": "string"},
{"label": "Resource", "type": "string"},
{"label": "Start Date", "type": "date"},
{"label": "End Date", "type": "date"},
{"label": "Duration", "type": "number"},
{"label": "Percent Complete", "type": "number"},
{"label": "Dependencies", "type": "string"}
],
"rows": [
{"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
{"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
]
}
this will allow you to create the data table directly, without client-side manipulation.
and it is the fastest way to load the data table.
next, both $.get and $.ajax are asynchronous,
which means you will need to wait until the data is received,
before trying to create the data table and draw the chart.
recommend using $.ajax so you can specify the dataType as json.
see following working snippet,
here, I use the fail promise method so the snippet will work,
you can remove on your server and just keep the done method.
google.charts.load('current', {
packages: ['gantt']
}).then(function () {
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
$.ajax({
url: 'http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s',
dataType: 'json'
}).done(drawChart).fail(function () {
var chartData = {
"cols": [
{"label": "Task ID", "type": "string"},
{"label": "Task Name", "type": "string"},
{"label": "Resource", "type": "string"},
{"label": "Start Date", "type": "date"},
{"label": "End Date", "type": "date"},
{"label": "Duration", "type": "number"},
{"label": "Percent Complete", "type": "number"},
{"label": "Dependencies", "type": "string"}
],
"rows": [
{"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
{"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
]
};
drawChart(chartData);
});
function drawChart(chartData) {
var data = new google.visualization.DataTable(chartData);
chart.draw(data, options);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to create a Hierarchical Tree Table in Eclipse Neon for a SAPUI5 Project.
I've looked at the following SDK for TreeTables : https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding/preview
I'm not getting any joy when executing my project, nothing is displayed in my chrome web browser.
Please see below my various code snippets, where am I going wrong?
Common.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tree="sap.ui.table"
controllerName="testcommon.Common" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
<content>
<tree:TreeTable id="treeTable"
selectionMode="Single"
enableColumnReordering="false"
expandFirstLevel="false"
rows="{
path : '/table',
parameters : {
countMode: 'Inline',
treeAnnotationProperties : {
hierarchyLevelFor : 'HierarchyLevel',
hierarchyNodeFor : 'NodeID',
hierarchyParentNodeFor : 'ParentNodeID',
hierarchyDrillStateFor : 'DrillState'
}
}
}">
<tree:columns>
<tree:Column label="Description">
<Text text="Description"/>
</tree:Column>
<tree:Column label="HierarchyLevel">
<Text text="HierarchyLevel" wrapping="false" />
</tree:Column>
<tree:Column label="NodeID">
<Text text="NodeID" wrapping="false" />
</tree:Column>
<tree:Column label="ParentNodeID">
<Text text="ParentNodeID" wrapping="false" />
</tree:Column>
</tree:columns>
</tree:TreeTable>
</content>
</Page>
Common.controller.js :
sap.ui.controller("testcommon.Common", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf testcommon.Common
*/
onInit: function() {
var model1 = new sap.ui.model.json.JSONModel();
model1.loadData("model/mock.json");
this.getView().setModel(model1, "model1");
jQuery.sap.require("sap.m.MessageBox");
},
index.html :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("testcommon");
var view = sap.ui.view({id:"idCommon1", viewName:"testcommon.Common", type:sap.ui.core.mvc.ViewType.XML});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
mock.json file which is in folder model under WebContent :
{"table":
[
{
"NodeID": 1,
"HierarchyLevel": 0,
"Description": "1",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 2,
"HierarchyLevel": 0,
"Description": "2",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 3,
"HierarchyLevel": 0,
"Description": "3",
"ParentNodeID": null,
"DrillState": "expanded"
},
{
"NodeID": 4,
"HierarchyLevel": 1,
"Description": "1.1",
"ParentNodeID": 1,
"DrillState": "leaf"
},
{
"NodeID": 5,
"HierarchyLevel": 1,
"Description": "1.2",
"ParentNodeID": 1,
"DrillState": "expanded"
},
{
"NodeID": 6,
"HierarchyLevel": 2,
"Description": "1.2.1",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 7,
"HierarchyLevel": 2,
"Description": "1.2.2",
"ParentNodeID": 5,
"DrillState": "leaf"
},
{
"NodeID": 8,
"HierarchyLevel": 1,
"Description": "2.1",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 9,
"HierarchyLevel": 1,
"Description": "2.2",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 10,
"HierarchyLevel": 1,
"Description": "2.3",
"ParentNodeID": 2,
"DrillState": "leaf"
},
{
"NodeID": 11,
"HierarchyLevel": 1,
"Description": "3.1",
"ParentNodeID": 3,
"DrillState": "expanded"
},
{
"NodeID": 12,
"HierarchyLevel": 2,
"Description": "3.1.1",
"ParentNodeID": 11,
"DrillState": "expanded"
},
{
"NodeID": 13,
"HierarchyLevel": 3,
"Description": "3.1.1.1",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 14,
"HierarchyLevel": 3,
"Description": "3.1.1.2",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 15,
"HierarchyLevel": 3,
"Description": "3.1.1.3",
"ParentNodeID": 12,
"DrillState": "leaf"
},
{
"NodeID": 16,
"HierarchyLevel": 3,
"Description": "3.1.1.4",
"ParentNodeID": 12,
"DrillState": "leaf"
}
]}
When run index.html as Web App Preview I only see a blank screen and I don't see any errors in F12 Developer tools in Chrome. Please assist.
Thanks lots,
Mark
You can only use treeAnnotationProperties with an OData model. It won't work with a JSON model.
Try to structure your data differently and bind it using the arrayNames parameter, like in the example below:
https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/code
I am trying to plot time of day chart using controlWrapper and Dashboard when i try to use ChartRangeFilter as controlType in controlWrapper options am not able to view the graph. If i use other visualization classes like CategoryFilter for controlType then everything is working fine.
Can anybody knows how to render the time of day with ChartRangeFilter?
here is the sample code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1.1', { 'packages': ['corechart', 'controls'] });
google.setOnLoadCallback(drawChart)
var dataTable = null;
var chartWrapper = null;
var controlWrapper = null;
var dashboard = null;
function drawChart() {
var data = {"cols": [
{"id": "Time", "label": "Time", "type": "timeofday"},
{"id": "Calls", "label": "Calls", "type": "number"}],
"rows": [
{"c": [{"v": [0, 10, 57]}, {"v": 45}]},
{"c": [{"v": [1, 9, 58]}, {"v": 23}]},
{"c": [{"v": [2, 10, 55]}, {"v": 12}]},
{"c": [{"v": [3, 0, 7]}, {"v": 23}]},
{"c": [{"v": [4, 10, 54]}, {"v": 12}]},
{"c": [{"v": [5, 35, 57]}, {"v": 56}]},
{"c": [{"v": [6, 29, 11]}, {"v": 234}]},
{"c": [{"v": [7, 11, 52]}, {"v": 34}]}]};
dataTable = new google.visualization.DataTable(data);
controlWrapper = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': { 'columns': [0, 0] },
'minRangeSize': 43200000
}
}
});
chartWrapper = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
"title":"Time of day calls",
"legend":{"position":"none","alignment":"start"},
"chartArea":{"height":"80%","width":"90%"},
"thickness":"1",
"displayExactValues":true,
"is3D":false
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(controlWrapper, chartWrapper);
dashboard.draw(dataTable);
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
I'm not strong JS user, but I want make "Nightingale chart" like this: http://windhistory.com/station.html?KHKA
I have that code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v2.js"></script>
<style type="text/css">
.arc{
fill: pink;
stroke: red;
}
</style>
</head>
<body>
<div id="chart" class="chart"></div>
<div id="table"></div>
<script type="text/javascript">
var svg = d3.select("#chart").append("svg").attr("width", 900).attr("height", 600);
var pi = Math.PI;
d3.json(
'data.json',
function(data){
var arc = d3.svg.arc()
.innerRadius(50)
.outerRadius(function(d) {
return (50 + d.value);
})
.startAngle(function(d) { return ((d.time - 1) * 30 * pi / 180); })
.endAngle(function(d) { return (d.time * 30 * pi / 180 ); });
var chartContainer = svg.append("g")
.attr('class', 'some_class')
.attr("transform", "translate(450, 300)");
chartContainer.append("path")
.data(data)
.attr("d", arc)
.attr("class", "arc");
}
);
</script>
</body>
</html>
On jsfinddle: http://jsfiddle.net/lmasikl/gZ62Z/
my json:
[
{"label": "January", "value": 150, "time": 1},
{"label": "February", "value": 65, "time": 2},
{"label": "March", "value": 50, "time": 3},
{"label": "April", "value": 75, "time": 4},
{"label": "May", "value": 150, "time": 5},
{"label": "June", "value": 65, "time": 6},
{"label": "July", "value": 50, "time": 7},
{"label": "August", "value": 75, "time": 8},
{"label": "September", "value": 65, "time": 9},
{"label": "October", "value": 50, "time": 10},
{"label": "November", "value": 75, "time": 11},
{"label": "December", "value": 150, "time": 12}
]
But my script draw only one arc. Can anybody help to solve this problem?
You may want to read Thinking With Joins. The D3 pattern for adding data-driven elements is to create a selection with selectAll, then set the data with data, then append the element, to the .enter() selection. So
chartContainer.append("path")
.data(data)
.attr("d", arc)
.attr("class", "arc");
needs to be
chartContainer.selectAll("path")
.data(data)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc");
See updated fiddle: http://jsfiddle.net/gZ62Z/1/