I'm struggling to change the font on a plot produced using chartkick.
I have set up chartkick for Rails 7 using ImportMap.
config/importmap.rb
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
app/javascript/application.js
import "chartkick"
import "Chart.bundle"
I've produced the plot I want using the following code:
<%= line_chart [
{ name: "Apples", data: FruitCount.pluck(:date, :apples) },
{ name: "Pears", data: FruitCount.pluck(:date, :pears) },
{ name: "Oranges", data: FruitCount.pluck(:date, :oranges) },
] %>
I can format the code using the options built into Chartkick (xtitle: "Date", ytitle: "Count", legend: "right" etc) but I'm unable to pass options to chart.js using library (say library: {backgroundColor: "#eee"}). No options are passed and the plot remains with the default formatting.
Has anyone else had similar problems? I just want to change the font of the axis ticks and legend items.
All help greatly appreciated.
Related
I've been trying to import a library called chart.js to the code sandbox on slate, but even after I read the documentation I was quite doubtful about how the import system works inside the code sandbox, I wish someone could explain me in detail how I do the import of the library, how to call it in the LIBRARY LOCATIONS field and also how to call it in the JAVASCRIPT field inside the code sandbox
Step-by-step:
Drag-and-drop the JS file in a project or folder of your choice (not in a dataset !)
Choose Upload as a raw file without modifying the extension (recommended) when prompted
Let it upload
You will see the JS file in the project or folder you uploaded it to, you can then select the line representing your file and this should open a right panel, where you can find the path to this file e.g. /myproject/myfolder/myJSlibrary.js
In Slate, add a Code-Sandbox widget
In the configuration of the code Sandbox widget, find at the bottom the LIBRARY LOCATIONS section (see here)
Past the path you found earlier, in an array, like ["/myproject/myfolder/myJSlibrary.js"]
If you need multiple libraries, you should have something like:
["/myproject/myfolder/myJSlibrary.js", "/myproject/myfolder/myOtherJSlibrary.js"]
For the library usage, it depends of course of which kind of problem you hit. But here is a minimal working example.
Library from here
Below example from official page
HTML
<canvas id="acquisitions"></canvas>
JS
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
options: {
animation: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
}
},
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);
Note: You can see errors related to your lib in the Console tab of your browser's devtools panel.
Want to apply pattern in pie chart using highchart vuejs
Tried using in data field but nothing worked
color: 'url(#highcharts-default-pattern-0)'
EXPECTED PATTERN:
Highcharts patterns work in the same way in Vue as in pure JS. You need to only:
Load and initialize pattern-fill module:
import Highcharts from 'highcharts';
import patternFillInit from 'highcharts/modules/pattern-fill';
patternFillInit(Highcharts);
Use one of the ways of defining patterns from docs, for example by using patternIndex property:
series: [
{
...,
data: [
{
y: 1,
color: {
patternIndex: 0
},
},
...
]
}
]
Live demo: https://codesandbox.io/s/highcharts-vue-demo-1-5039z3
Docs:
https://www.highcharts.com/docs/chart-design-and-style/pattern-fills
https://github.com/highcharts/highcharts-vue#importing-highcharts-modules
I am trying to display my json from a mvc controller to be displayed on a checkboxed kendo ui treeview. The code on the asp.net mvc view and the json sent to the view are given below
MyDoc.cshtml code
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
},
dataSource: {
//type: "odata",
transport: {
read: {
url: '#Url.Content("~/Document/GetMyDocs")',
type: "post",
dataType: "json"
}
},
schema: {
model: {
id: "id", text:"Name",
children: "Files"
}
}
},
dataTextField: [ "Name"],
check: onCheck
});
json object
[{"id":1,"Name":"Checking",
"Files":[{"Filename":"doc10","id":"1afd5a4f-086f-44d2-9287-8098384e379e"},
{"Filename":"doc11","id":"89ea3366-14b8-4e91-8273-6e2a51fbe516"}]},
{"id":2,"Name":"Saving",
"Files":[{"Filename":"doc20","id":"c7a88f5d-067e-4f20-93b6-da6eff69d532"},
{"Filename":"doc21","id":"8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0"}]}]
When I view the page only the toplevel text, "Checking" and "Saving" shows. The date present under Files comes out as undefined.
Thanks
It looks like that Kendo UI uses the dataTextField: [ "Name"] for both the parent and the child node. Since the json in the child data doesn't have a field name equal to "Name" it came out as undefined. Once I changed the property, "FileName" into "Name", it worked. The Telerik's documentation is as atrocious as other third party controls. All their demos are more geared to show how easy peasy it is to create a sexy looking UI using few hard coded data than showing how to create a real world application!
I am loading JQGrid from an API, one of the data structures that I have for my grid is a JSON element formatted as such:
{"id":123,"name":"John Doe","username":"john.doe"}
The data is properly displayed in the grid, however if I try to type in the toolbar search, I do not get a match presumably because jqgrid still has the above JSON stored as an object.
A truncated version of my grid is as follows:
$('#test').jqGrid({
...
loadonce: true,
datatype: 'local',
colModel: [
{name:'test', index:'test', label:'Test', formatter:customFormatter}
],
...
});
function customFormatter (cellvalue,options) {
return cellvalue.name;
}
I found this post that seems to address this very matter, however I am struggling to get my head around as to how to use this for a JSON object. Once the grid is loaded, I don't see a reason as to why the local data should be anything other than string (Until the grid is reloaded).
After stumbling upon the JSON dot notation in the docs, and adding it to the index this now works:
colModel: [
{name:'test.name', index:'test.name', label:'Test'}
]
You should choose name property of colModel which corresponds the names of the properties in the JSON input. So it's native to use just
colModel: [
{name: "name", label: "Name"}
{name: "username", label: "User Name"}
]
If you do need to remap some names in the JSON input to another names in the colModel you should use jsonmap property. For example
colModel: [
{name: "test1", label: "Name", jsonmap: "name"}
{name: "test2", label: "User Name", jsonmap: "username"}
]
The usage of index different as name is not possible in case of usage of loadonce: true. It is not recommended to use values of name property which have . or any other meta-character. The restriction exist because the name property will be used to build id property of many elements of the grid.
I am trying to reload (via ajax) data into a Gantt chart using php and jquery. I can draw a gantt chart with my data on the initial load without any issues. I have a ajax save call to update chart data in which I would like to redraw the gantt chart after a successful save.
I am able to load part of the data, ie the title data on the left, but not the dates, I believe it is not in the right format? I am using this gantt chart plugin from github: https://github.com/thegrubbsian/jquery.ganttView
Below is a sample of the data they are using? Is this json data?
I am not sure? How do I format my output to mirror and use this data.
var ganttData = [
{
id: 1, name: "Feature 1", series: [
{ name: "Planned", start: new Date(2010,00,01), end: new Date(2010,00,03) },
{ name: "Actual", start: new Date(2010,00,02), end: new Date(2010,00,05), color: "#f0f0f0" }
]
},
{
id: 2, name: "Feature 2", series: [
{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
]
},
My code looks like this:
[{"id":0,"name":"task number 20","series":[{"name":"Bob","start":"new Date(2012,2,19)","end":"new Date(2012,6,11)"}]},{"id":1,"name":"another new posts","series":[{"name":"Bill","start":"new Date(2012,5,22)","end":"new Date(2012,6,27)"}]},here
It's not legal to "call" functions (including constructors) from a json string. JSON isn't anything you can pass to an eval function : http://www.json.org/
You should do the transformation from string to date in your javascript code.
You can send
[{..."start":"Thu Jul 12 2012 16:20:17 GMT+0200 (CEST)"...}]
and in your js code, just after json parsing, iterate over the objects to do
myobj.start = new Date(myobj.start);