Heading
<script>
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks() //labels format
.datasets([{type: 'line', fill: false}, 'bar'])
.legend()
.colors()
.tooltip()
.title('Sample Chart'),
});
</script>
</body>
How can format labels to be vertical in Laravel chartisan? I suppose that this part of the code has to change, but I am not sure.
give this a try
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks()
.colors()
.responsive()
.beginAtZero()
.legend({ position: 'bottom' })
.datasets([{ type: 'line', fill: true }])
.custom(function ({ data, merge, server }) {
data.options.scales.yAxes = [{
ticks: {
callback: function(value, index, values) {
return '$' + value;
}
}
}]
return data
})
})
For more info visit this link:https://github.com/Chartisan/Chartisan/issues/7
Related
New to coding here and I have a WordPress page that displays a Google Chart with the source data coming from a Google Sheet where I'm trying to have the Google Chart redraw/refresh the data automatically without manually refreshing the entire web page.
Below is my current code which works to only refresh the data in the chart when a user manually refreshes the entire website.
I have read about AJAX and it seems this is the key but I haven't been able to tweek the Google Developer example code to solve my issue.
I hit a road block at ...
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
where I do not know how to get my public google sheet URL to work in place of the "getData.php" part of the code snippet above. I do not know anything about php but saw examples where people reformatted their google sheet URL is lieu of using the php part to something like:
https://spreadsheets.google.com/feeds/list/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/1/public/basic?alt=json
but that still doesn't work for me. Feels like I'm going down a rabbit hole just trying to get the data using this approach when I already have a way to get the same data (tho without it automatically refreshing without manually reloading the entire website). Any help will be greatly appreciated!
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_1" style="width: 700px; height: 400px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization1);
function drawVisualization1() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
var data = response.getDataTable();
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
chart.draw(data, options);
}
</script>
You can use setRefreshInterval(seconds) to call query.send() every few seconds.
query.setRefreshInterval(120);
query.send(handleQueryResponse1);
you don't need ajax, because you're using google.visualization.Query to get the data.
just need to structure you're code in such a way,
that you can refresh the data and chart,
without rebuilding everything.
see following working snippet,
the chart and options are created once.
the data is retrieved initially, and when the button is clicked.
after receiving the data, the chart is drawn.
I added the 'ready' event to the chart, just to prove the data was refreshed and the chart re-drawn.
but since the data doesn't actually change, nothing appears to happen.
google.charts.load('current', {
packages: ['corechart']
}).then(drawVisualization1);
function drawVisualization1() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
google.visualization.events.addListener(chart, 'ready', function () {
console.log('drawn');
});
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}
},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
getData();
document.getElementById('refresh').addEventListener('click', getData);
function getData() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
chart.draw(data, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="refresh" type="button" value="Refresh" />
<div id="chart_1"></div>
Simple example won't render. Here is my code:
main.js
var Vue = require('vue');
var c3 = require('c3');
new Vue({
template: '<div id="puppa"></div>',
mounted: function () {
c3.generate({
bindto: '#puppa',
data: {
type: 'area',
x: 'x',
xFormat: '%H:%M',
columns:[
['x',"12:38","12:38","12:38","12:38","12:39","12:39","12:39","12:39","12:40","12:40","12:40","12:41","12:41","12:41","12:41","12:42","12:42","12:42","12:42","12:43","12:43","12:43","12:43","12:44","12:44"],
['write', 14709198848,14709313536,14709522432,14709633024,14710034432,14710157312,14710341632,14710583296,14710788096,14710931456,14711058432,14711291904,14711508992,14711668736,14711771136,14712008704,14712107008,14712381440,14712586240,14712795136,14712963072,14713077760,14713331712,14713565184,14713729024],
['read', 3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080,3778094080]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
}
});
In your HTML.
<div id="app"></div>
Or whatever other id you want to use. You need to give your Vue an element to render it's template to. In your Vue
new Vue({
el: "#app",
mounted: function() {
c3.generate({
bindto: this.$el,
...
})
}
})
Here is an example.
Also ran across the need to downgrade the d3 version with c3.
Im trying to load this column chart with external data in Json format from a file
I have a jsfiddle with what i have so far.
Thanks for any help.
http://jsfiddle.net/t9n4d8z4/1/
$(document).ready(function() {
var dataPoints = [];
$.getJSON("https://api.myjson.com/bins/1kfs1", function(result) {
for (var i = 0; i <= result.length - 1; i++) {
dataPoints.push({
label: result[i].label,
y: parseInt(result[i].y)
});
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "column",
dataPoints: result
}]
});
chart.render();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
json format was not handled properly.
Here is the working fiddle : http://jsfiddle.net/canvasjs/t9n4d8z4/3/
$(document).ready(function() {
var dataPoints = [];
$.getJSON("https://api.myjson.com/bins/1kfs1", function(result) {
for (var i = 0; i <= result.dataPoints.length - 1; i++) {
dataPoints.push({
label: result.dataPoints[i].label,
y: parseInt(result.dataPoints[i].y)
});
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "column",
dataPoints: dataPoints
}]
});
chart.render();
});
});
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
I am using DC chart range filter. I want to handle mouse out event on range filter, so I can handle filter on mouse-out. I had used filter and post-redraw but when I use this there are multiple time event fire on single drag on range chart. I need only the last change event and I think a mouse out or mouse up event would be helpful. Can any one help me with how to use mouse up/mouse out event on range Chart?
chart.on('postRender', function() {
chart.select('.brush').on("mouseover", function() {
console.log('mouseover');
});
chart.select('.brush').on("mouseout", function() {
console.log('mouseout');
});
chart.select('.brush').on("mouseup", function() {
console.log('mouseup')
});
chart.select('.brush').on("click", function() {
console.log('click')
});
});
Working snippet below:
var data = [{
date: "2011-11-21",
total: 90
}, {
date: "2011-11-22",
total: 90
}, {
date: "2011-11-23",
total: 90
}, {
date: "2011-11-24",
total: 200
}, {
date: "2011-11-25",
total: 200
}];
var cf = crossfilter(data);
var timeDimension = cf.dimension(function(d) {
return new Date(d.date);
});
var totalGroup = timeDimension.group().reduceSum(function(d) {
return d.total;
});
var chart = dc.lineChart("#chart")
.width(400)
.height(200)
.x(d3.time.scale().domain(d3.extent(data, function(d) {
return new Date(d.date);
})))
.dimension(timeDimension)
.group(totalGroup)
.renderArea(true)
.brushOn(true);
chart.xAxis().ticks(4);
function caught(eventName) {
document.getElementById(eventName).className = 'bold';
setTimeout(function() {
document.getElementById(eventName).className = '';
}, 750);
}
chart.on('postRender', function() {
chart.select('.brush').on("mouseover", function() {
console.log('mouseover');
caught('mouseover');
});
chart.select('.brush').on("mouseout", function() {
console.log('mouseout');
caught('mouseout');
});
chart.select('.brush').on("mouseup", function() {
console.log('mouseup')
caught('mouseup');;
});
chart.select('.brush').on("click", function() {
console.log('click')
caught('click');;
});
});
chart.render();
<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>
<style>
.bold {
font-weight: bold;
}
</style>
<div id="chart"></div>
<div id="mouseout">mouseout</div>
<div id="mouseover">mouseover</div>
<div id="mouseup">mouseup</div>
<div id="click">click</div>
Although I have tried several times, I could not solve trying many method.
Shortly this is the thing what I want to do : only get modified or new rows as an object or JSON string.
You should use set for changing the content of a record. Then, getting the records modified is just iterating through datasource.data() array and checking which items have dirty set to true.
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);
The following snippet shows both that changing the data programmatically or via Grid built-in incell edition is compatible with this approach.
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Discontinued: { type: "boolean" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
columns: [
"ProductName",
{ field: "Discontinued", width: 120 }
],
editable: "incell",
selectable: true
}).data("kendoGrid");
$("#change").on("click", function() {
var sel = grid.select();
if (sel.length) {
var item = grid.dataItem(sel);
item.set("Discontinued", true);
}
});
$("#show").on("click", function() {
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
$("#logger").html(JSON.stringify(dirty, null, 2));
});
});
#logger {
min-height: 60px;
border: 1px solid black;
overflow-x: scroll
}
#grid {
width: 500px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="example">
<div>
This button changes the Discontinued field to "true" for the selected row:
<button id="change" class="k-button">Change selected</button>
</div>
<div>
Click for displaying modified rows:
<button id="show" class="k-button">Show dirty</button>
<pre id="logger"></pre>
</div>
<div id="grid"></div>
</div>