Google Line Chart with Javascript literal Datatablse now showing X-Axis - google-visualization
I am implementing a Google (line) Chart based on a DataTable so I can change the type of graph 'on the fly'. I have successfully generated the data table (generated by script) based on https://developers.google.com/chart/interactive/docs/reference#dataparam
And implemented in an HTML Page (for testing purpose the page is empty so there is no interference with any other script/content)
The Y-axis, Legenda and lines are correctly generated, yet the x-axis appears to be missing.
I am using the following content for the data table:
{"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]}
This all comes together in the following Javascript
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type="text/javascript">
google.setOnLoadCallback(draw_15a6f1d2a7556b357de0d315596aa96c);
function draw_15a6f1d2a7556b357de0d315596aa96c() {
var data = new google.visualization.DataTable({"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]});
var chart = new google.visualization.LineChart(document.getElementById('draw_15a6f1d2a7556b357de0d315596aa96c'));
chart.draw(data, {width: 800, height: 600});
}
</script>
</head>
<body>
<div id="draw_15a6f1d2a7556b357de0d315596aa96c"></div>
</body>
</html>
Yet I have no idea why the X-axis is not showing up. I have looked into the DataTable Roles but could not find a reference to show the X-axis
https://developers.google.com/chart/interactive/docs/roles?hl=ja#jsonliteral
Nor does the LineChart documentation say which additional arguments have to be supplied.
jsfiddle.net/WuLWF/ (When breaking it up in pieces according to Fiddle standard it did not work)
Or perhaps my DataTable is wrong generated.
Please guide me in the correct direction,
Many thanks
The x-axis is showing up but the labels are not showing up. Your first column is of type string, so you wouldn't see gridlines in any case, but for each row, the first column "f" property is an empty string, which means it will be displayed in the axis label as an empty string, just as it does.
I bet you did this so the tooltips would not show these same values. You might want to investigate custom tooltips to display whatever you want in the tooltips.
If you had used numbers instead of strings for the first column, then the axis labels would be generated and displayed as numbers, using the axis format option, and the values might happen to be close to the same values as in your first column. Discrete string values are used as is.
Or perhaps you would prefer to use a type of date, datetime, or timeofday. These are also treated as continuous, like numbers, rather than discrete, so the formatting of the tick labels is determined by the axis format option. Hope that helps.
Related
Django forms, attrs cols and rows for textarea doesn't work, why?
I'm working on a project with Django and a textarea. The textarea by default renders cols="40" and rows="10", which is not great for my page. I'm trying to use Django's widgets to change those attributes to 20 and 5 respectively. This is my code:
class NewContent(forms.Form):
content = forms.CharField(widget=forms.Textarea(attrs={"cols":20, "rows":5}))
Unfortunately, the code does not change the looks of the form at all when the page gets rendered. Meaning, it displays cols 40 and rows 10. But wait, things get really bizarre... when checking on the developer tools, on Google, I can see that the HTML code has changed to what I want! crazy!!
I also tried the following code that I found in a different chat:
attrs={"style": "height:60px; width:500px"}
Which "changes" the size of the box but... for different reasons I'm not in love with this solution.
Does anybody have an idea of what is happening here?
I have a windows 10 and use VEC.
Cheers!
you might have css style which defines width and height of your textarea
e.g.:
<html>
<head>
<style>
textarea {width: 100px; height:30px;}
</style>
</head>
<body>
<form>
<textarea cols="30" rows="5"></textarea><br/>
<textarea cols="40" rows="7"></textarea>
</form>
</body>
</html>
I also had the same issue with the Textarea. If I don't give any attrs value while creating the textarea.
pgContent = forms.CharField(widget=forms.Textarea)
It takes the default value of row=10 cols=40, defined in the django documentation for textarea. I cleared out the textarea row, col defined in css and I tried this
pgContent = forms.CharField(widget=forms.Textarea(attrs={'rows': 40, 'cols': 70})
No change in pg rendering. But the page source shows the new value of row, col.
I tried this and it worked.
attrs={"style": "height:60px; width:500px"}
css value supersedes the html value for row, col. I'm surprised why is it not taking the value defined in styles.css, which I have defined for textarea.
resetZoom in Chartjs
I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php.
I managed to start chartjs-plugin-zoom.
Now i want to add button "Reset zoom"
I fallowed this tutorial:
Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
But when i add right after $.ajax({}); in app.js
$('#reset_zoom').click(function() {
mycanvas.resetZoom();
})
and press the button error is displayed:
app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
at HTMLButtonElement.<anonymous> (app.js:131)
at HTMLButtonElement.dispatch (datatables.min.js:15)
at HTMLButtonElement.r.handle (datatables.min.js:15)
Can you give me an advice?
Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..
Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.
YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY
Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX
A couple examples of what not to do..
document.getElementById('myChart').resetZoom() // vanilla JavaScript
or even
$("#myChart").resetZoom() // jQuery
What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:
const myChart = new Chart('myChart', {}
Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:
myChart.resetZoom();
Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.
JS
resetZoomBtn = (chart) => {
chart.resetZoom()
};
and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.
<div class="chart-container">
<canvas id="myChart"></canvas>
<button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>
Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.
Thanks,
VP
OrchardCMS Replacement Tokens for Query Results displaying HTML tags instead rendering them
I am having problems understanding the token system for the output of query / projections.
If I leave the property as is it displays the text content with HTML formatting intact.
But I need to wrap it with a tag, the html tags get displayed as text.
Rewrite Results -> Rewrite output
<div class="collapse" id="toggle_{Content.Id}">
{Content.Fields.CaseStudy.ClientChallenge} </div>
I am trying to create a collapsible text area, I already have a button that hides/unhides the content.
Why is it displaying as text instead of rendering the tags properly.
I think this is because I don't know how replacement tokens work.
Another example problem is up one level on the edit Layout, I want to set the item class to work-item {Category}, Category being the name/title of a property, which I am using for grouping.
Right above the projection: I want to include some html that lists all the Categorys in a ul i.e. data-filter=".experiential" I have tried things like: work-item {Category} and work-item {Content.Fields.CaseStudy.Category}. Category is a "term" (?) from a taxonomy.
I feel like I am failing to understand how it all works.
Submitted as a bug https://github.com/OrchardCMS/Orchard/issues/7355 Will edit and post if it is fixed. In case anoyong else comes across this issue.
Refresh a region's items during/after apexrefresh
I have a Report region that I am refreshing via jQuery. I have the following code with the region footer to set up the refresh process:
<script type="text/javascript">
var refreshId = setInterval(function(){ apex.jQuery('##REGION_ID#').trigger('apexrefresh');
}, 5000);
</script>
This works correctly, and the report data is refreshed every 5 seconds. However, the region also contains an Item, whose source value is determined via a SQL Query. I want this value to refresh every time the report region data refreshes too, but the triggered refresh doesn't do this.
Looking closer, it seems the report region div does not contain the Item HTML, so the part of the DOM that gets swapped out during the refresh does not contain the item. The item appears inside a sibling table node called apex_layout_#REGION_ID#:
<div class="rc-content-main">
<table id="apex_layout_7017903473906209" class="formlayout" border="0" summary="">
<div id="report_7017903473906209_catch">
<script type="text/javascript">
</div>
I've tried doing an additional .trigger() call passing in the Item's ID instead of #REGION_ID# but confusingly this does the exact same refresh of the report data. I've also tried setting up a Dynamic Action to fire on "After Refresh" on the region that will refresh the Item, but this does something strange too - it fires repeated AJAX calls with no delay and doesn't change the item value.
Any help appreciated.
You can't refresh an item using the apexrefresh event. You are on the right track with the dynamic action: you will need to 'manually' retrieve a new value. Could you elaborate on how you have set up your "after refresh"-triggered dynamic action for your item? Does it have a true action of "set value" with "sql statement"? Did you inspect the ajax calls? Any errors? Do the calls keep repeating? Also, check the session state (access through the "session" button on the developer bar on the bottom) of the items, and see if the value there has changed.
What are the appropriate formats for the properties of http://schema.org/GeoShape?
It would be nice if the GeoShape page included examples or the individual properties were broken out instead of just being Text. I'm specifically interested in the circle property. I want to define a circle of 20 mile (~ 32km) radius from Nottingham City Centre (52.953, -1.149). <!DOCTYPE html> <html> <head> <title>Nottingham City Neighbourhood</title> </head> <body> <div itemscope itemtype="http://schema.org/Place"> <div itemprop="geo" itemscope itemtype="http://schema.org/GeoShape"> <meta itemprop="circle" content="52.953 -1.149 32186.88"/> </div> </div> </body> </html> The rich snippet tool does pick out the data, but I don't trust that I've used the right format. Especially since the parsed longitude is positive. > The following structured data is viewable only in the XML results view > in Custom Search. More information. > > geoshape (source = MICRODATA) circle = 52.953 -1.149 32186.88 > > > The following structured data can be used to filter search results in > Custom Search. More information. > > more:pagemap:geoshape more:pagemap:geoshape-circle > more:pagemap:geoshape-circle:1.149 > more:pagemap:geoshape-circle:32186.88 > more:pagemap:geoshape-circle:52.953 > more:pagemap:geoshape-circle:52.953_ As for the others, I think both box and polygon would be in the format "$lat1,$long1 $lat2,$long2 $lat3,$long3 $lat1,$long1" for a square. Anybody have a definitive answer or reason?
I've done some archaeology, following a similar trail to others. Details: http://lists.w3.org/Archives/Public/public-vocabs/2012Jun/0116.html The compounding confusion seems to be (as Yves Martin points out) missing whitespace in the original rNews examples. We'll get this situation improved and I'll report back here.
Validation The example you give (in the first version of your question) does not pass validation at http://validator.nu/. You cannot use directly a property in the same node that declares the entity type. Probably the rich snippet tool is not strict enough. To confirm, this alternate tool also refuses to generate a JSON expression from your block because of the lack of a top level element. So an additional node is required for the geo property, here is a proper way to express it (doctype and title are for validation tool only): <!DOCTYPE html> <title>Nottingham City Neighbourhood</title> <div class="hidden" itemscope itemtype="http://schema.org/GeoShape"> <div itemprop="geo"> <meta itemprop="circle" content="52.953 -1.149 32186.88"/> </div> </div> Recommendation According to this Google FAQ only few entities are really supported and based on Organization and Event examples in microdata format, the optional geo property only propose longitude and latitude elements from http://schema.org/GeoCoordinates. So there is less doubt to use that simple point definition compared to circle. By the way this example is valid and properly extracted: <div itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name">Nottingham City Neighbourhood</span> <div itemprop="geo"> <meta itemprop="circle" content="52.953 -1.149 32186.88"/> </div> </div> If you use sindice.com, there is no hit for http://schema.org/GeoShape whereas http://schema.org/GeoCoordinates is extensively used. Not so easy to find real world usage of circle. Circle property value For the circle property content itself, many documentation refers to WGS84 but it only concerns point. This documentation confirms the content text structure for the circle element. This example for rNews obviously lacks a space before the 500 radius and is not properly rendered, the page source contains <td class="rnews_td codestyle">38.920952 -94.645443500</td> instead of <td class="rnews_td codestyle">38.920952 -94.645443 500</td> You should look at schema generators or parsers. Maybe one of them has implemented a fine grain editor for GeoShape properties instead of a raw text field, so that you can confirm property content structure. I have looked at Any23 but still the same issue: GeoCoordinates is implemented but not GeoShape. Box and polygon property value No coma is expected between longitude and latitude values for point, box, polygon or line (only use space) according to both rNews and GeoRSS. As a conclusion, you should avoid GeoShape if your aim is to provide a location to search engines... At the moment, only GeoCoordinates seems to be a reasonable choice.
Going from the discussion on W3.org, an example value of a GeoShape Box would be: 38.920952 -94.645443 38.951797 -94.680439 Those values result in the area mapped here. As stated in the schema, they just need to be the unique values of the corners of the box (e.g. "latmin latmax lonmin lonmax"): A polygon is the area enclosed by a point-to-point path for which the starting and ending points are the same. A polygon is expressed as a series of four or more spacedelimited points where the first and final points are identical.