Module: ChartJsGadget
Posted: Tue Mar 07, 2017 9:29 am
Hello,
here is a basic implementation of Chart.js (http://www.chartjs.org/)
Greetings ... Peter
// Edit 2017-01-03: Made a few changes
here is a basic implementation of Chart.js (http://www.chartjs.org/)
Code: Select all
DeclareModule ChartJs
EnableExplicit
Enumeration
#ChartJsData
#ChartJsOptions
EndEnumeration
#ChartJsTypeLine = "line"
#ChartJsTypeBar = "bar"
#ChartJsTypeRadar = "radar"
#ChartJsTypePolarArea = "polarArea"
#ChartJsTypePie = "pie"
#ChartJsTypeDoughnut = "doughnut"
#ChartJsTypeBubble = "bubble"
Global IsInitialized
Declare Init(Callback)
Declare Gadget(Gadget, x, y, Width, Height, ChartType.s)
Declare SetGadgetAttribute_(Gadget, Attribute, Value)
Macro SetGadgetAttribute(Gadget, Attribute, Value)
ChartJs::SetGadgetAttribute_(Gadget, Attribute, Value)
EndMacro
EndDeclareModule
Module ChartJs
EnableExplicit
Procedure Init(Callback)
! require(["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"],
! function() {
IsInitialized = #True
! v_callback();
! }
! );
EndProcedure
Procedure Gadget(Gadget, x, y, Width, Height, ChartType.s)
If Gadget = #PB_Any
Gadget = CanvasGadget(Gadget, x, y, Width, Height)
Else
CanvasGadget(Gadget, x, y, Width, Height)
EndIf
! var selector = $(spider_GadgetID(v_gadget).div).find('canvas');
! var myChart = new Chart(selector, { type: v_charttype });
! selector.data("ChartJs", myChart);
ProcedureReturn Gadget
EndProcedure
Procedure SetGadgetAttribute_(Gadget, Attribute, Value)
! var selector = $(spider_GadgetID(v_gadget).div).find('canvas');
! var myChart = selector.data("ChartJs");
Select Attribute
Case #ChartJsData
! myChart.config.data = v_value;
! myChart.update();
Case #ChartJsOptions
! myChart.config.options = v_value;
! myChart.update();
EndSelect
EndProcedure
EndModule
CompilerIf #PB_Compiler_IsMainFile = 1
EnableExplicit
; Demo
Enumeration
#Window
EndEnumeration
Enumeration
#ChartJsGadget
EndEnumeration
Procedure Main()
OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 400, 300, "ChartJsGadget-Example", #PB_Window_ScreenCentered)
ChartJs::Gadget(#ChartJsGadget, 10, 10, WindowWidth(#Window) - 20, WindowHeight(#Window) - 20, ChartJs::#ChartJsTypeBar)
Protected myData
! v_mydata= {
! labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
! datasets: [{
! label: '# of Votes',
! data: [12, 19, 3, 5, 2, 3],
! backgroundColor: [
! 'rgba(255, 99, 132, 0.5)',
! 'rgba( 54, 162, 235, 0.5)',
! 'rgba(255, 206, 86, 0.5)',
! 'rgba( 75, 192, 192, 0.5)',
! 'rgba(153, 102, 255, 0.5)',
! 'rgba(255, 159, 64, 0.5)'
! ],
! borderColor: [
! 'rgba(255,99,132,1)',
! 'rgba(54, 162, 235, 1)',
! 'rgba(255, 206, 86, 1)',
! 'rgba(75, 192, 192, 1)',
! 'rgba(153, 102, 255, 1)',
! 'rgba(255, 159, 64, 1)'
! ],
! borderWidth: 1
! }]
! };
ChartJs::SetGadgetAttribute(#ChartJsGadget, ChartJs::#ChartJsData, myData)
Protected myOptions
! v_myoptions = {
! scales: {
! yAxes: [{
! ticks: {
! beginAtZero:true
! }
! }]
! }
! };
ChartJs::SetGadgetAttribute(#ChartJsGadget, ChartJs::#ChartJsOptions, myOptions)
EndProcedure
ChartJs::Init(@Main())
CompilerEndIf
// Edit 2017-01-03: Made a few changes