iOS Code Snippet Chart with JS (WebView)

Hi,

attached you can find a little project which shows the basic integration of a BarChart with Chart.js.

Jan

Spoiler: Picture

More examples:

• Multibar: https://www.b4x.com/android/forum/threads/chart-with-js-webview.74850/#post-512322
• in B4A: https://www.b4x.com/android/forum/threads/chart-with-js-webview.74850/#post-478777
• gradient: https://www.b4x.com/android/forum/threads/chart-with-js-webview.74850/page-2#post-513066

 

[tufanv]

AweSome! Charts are one of the basic needs of a simple app. They look beautifulş . Thanks Jan for another help to b4i community.

 

[tufanv]

Hi,

attached you can find a little project which shows the basic integration of a BarChart with Chart.js.

Jan

Spoiler: Picture

Dear Jan,

There is a little problem with update data i think. Lets say we updated the data with a higher number of datasets ( lets say we had 5 data for the graph but later we updated it to 10 data for the graph.) this is no problem. The graph adds the new datas and there are a total of 10 points on the graph.. But if we update the data with less number of datasets ( lets say we had 10 points at first but we want to update to 5 points ) first 5 points updates to graph but there are still 10 points on the graph and last 5 data is from the previous dataset(from 6 to 10 ) so it makes problem.

 

[JanPRO]

Hi,

ist very simple: just clean the data array before you add new data:

JS($"JSBarChart.data.datasets[0].data = [];"$,W)

But note: When you change the number of data, you also have to take care about the labels, backgroundColor and borderColor.

Jan

 

[tufanv]

Hi,

ist very simple: just clean the data array before you add new data:

JS($"JSBarChart.data.datasets[0].data = [];"$,W)

But note: When you change the number of data, you also have to take care about the labels, backgroundColor and borderColor.

Jan

This results with this :

other half of the data still shows but without any line

 

[JanPRO]

Can you post the relevant code?

 

[tufanv]

Can you post the relevant code?

    JS($"JSBarChart.data.datasets[0].data = [];"$,W)
    'JS($"JSBarChart.data.labels[0].data = [];"$,W)
'    JS("JSBarChart.reset();",w)
'    JS("JSBarChart.update();",w)


    For i = 0 To Data.Size -1
        JS($"JSBarChart.data.datasets[0].data[${i}] = ${Data.Get(i)};"$,W)
        JS($"JSBarChart.data.labels[${i}] = ${Data.Get(i)};"$,W)
    Next
   
    JS("JSBarChart.update();",w)
    Data.Clear

I call this with :

UpdateData(Array(listegrafik.Get(0),listegrafik.Get(1),listegrafik.Get(2),listegrafik.Get(3),listegrafik.Get(4),listegrafik.Get(5),listegrafik.Get(6),listegrafik.Get(7),listegrafik.Get(8),listegrafik.Get(9),listegrafik.Get(10),listegrafik.Get(11),listegrafik.Get(12),listegrafik.Get(13),listegrafik.Get(14)))

it works good but when switching to a smaller dataset this problem happens

UpdateData(Array(listegrafik.Get(0),listegrafik.Get(1),listegrafik.Get(2),listegrafik.Get(3),listegrafik.Get(4),listegrafik.Get(5),listegrafik.Get(6)))

i also tried the commented code blocks at the begining with no luck:

 

[JanPRO]

Try to add the following:

JS($"JSBarChart.data.labels = [];"$,W)

Jan

 

[tufanv]

Try to add the following:

JS($"JSBarChart.data.labels = [];"$,W)

Jan

YEs ! works perfect now ! Thanks Jan.

 

[ilan]

great work as always @JanPRO, thanx a lot for this.

 

[tufanv]

Try to add the following:

JS($"JSBarChart.data.labels = [];"$,W)

Jan

Dear Jan. Can we use this code snipper with b4a without using b4a library for this _? Just to show with the webview ?

 

[tufanv]

Dear Jan. Can we use this code snipper with b4a without using b4a library for this _? Just to show with the webview ?

I tried it, I changed the nativeobject to javaobject and it works. But for the updatedata, a line is giving an error under sub js

NaObj.RunMethod("stringByEvaluatingJavaScriptFromString:", Array(Script))

this gives error :

java.lang.RuntimeException: Method: stringByEvaluatingJavaScriptFromString: not found in: android.webkit.WebView

probably this is for ios webview , for android we have to change this to something but i couldnt find .

 

[JanPRO]

Hi,

change the JS sub to the following:

Sub JS (Script As String, WebV As WebView)
    WebV.Loadurl("javascript:" & Script)
End Sub

Attached you can find a B4A demo project.

Jan

 

[tufanv]

Thanks Jan ! Works perfect now

 

[tufanv]

Hi,

change the JS sub to the following:

Sub JS (Script As String, WebV As WebView)
    WebV.Loadurl("javascript:" & Script)
End Sub

Attached you can find a B4A demo project.

Jan

Dear Jan ,

I have a little question with the b4i code.
JS($"JSBarChart.data.labels[1] = "xxx";"$,WebViewairports)

instead of xxx how can i use list.get(0) . I am having trouble with $'s

 

[JanPRO]

Hi,

JS($"JSBarChart.data.labels[1] = "${list.get(0)}";"$,WebViewairports)

Jan

 

[tufanv]

Thanks =)

 

[Descartex]

Is there any way to show multibar charts???
like this:
https://www.b4x.com/android/forum/t...y-files-in-post-238.58017/page-10#post-430857

 

[tufanv]

and is there any way to change the fill color with a gradient color. I tried some codes available on the internet but none of them worked.

https://stackoverflow.com/questions...-instead-of-solid-color-implementing-solution

Hi,

JS($"JSBarChart.data.labels[1] = "${list.get(0)}";"$,WebViewairports)

Jan

 

[JanPRO]

Hi,

@Descartex
You can use the yAxisID property of datasets.The IDs must be defined under options-->scales-->yAxes. I have attached an example.

@tufanv
For which type of chart? LineChart?

Jan